AJAX与双工通信技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Layouwen/article/details/113442110

本文对比了传统表单提交与AJAX的区别，详细介绍了AJAX的使用，包括XMLHttpRequest对象的GET和POST请求，以及fetch API的GET和POST操作。同时，探讨了双工通信中的轮询、长轮询和WebSocket技术，阐述了它们在实时通信中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 传统表单提交与AJAX比较

1.1 Form表单

<form action="/form.html" method="post">
  <input type="text" name="username" placeholder="username" />
  <input type="password" name="password" placeholder="password" />
  <input type="submit" />
</form>

它支持持GET和POST类型
提交数据后页面会刷新，用户体验差

1.2 AJAX

概念
AJAX = Asynchronous JavaScript and XML （异步的JavaScript 和 XML）
使用内置的 XMLHttpRequest 和 fetch 对象，实现和服务器的交互
交互数据时不需要刷新数据，用户体验好

1.2.1 XMLHttpRequest

GET 请求

创建对象
配置参数
绑定事件
发送请求

let xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onload = function(){}
xhr.send()

方法1

let url = 'http://xxx.xxx.com/api/blog/list'
let xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(JSON.parse(xhr.responseText))
    } else {
      console.log('数据错误')
    }
  }
}
xhr.onerror = () => {
  console.log('网络异常')
}
xhr.send()

方法2

let url = 'http://xxx.xxx.com/api/blog/list'
let xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onload = () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  console.log(xhr.response)
} else {
  console.log('数据错误')
}
}
xhr.onerror = () => {
  console.log('网络异常')
}
xhr.send()

POST 请求

let url = 'http://xxx.xxx.com/api/user/login'
let xhr = new XMLHttpRequest()

xhr.timeout = 3000 // 设置请求超时时间
xhr.open('POST', url, true)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhr.onload = () => {
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
    console.log(JSON.parse(xhr.responseTest))
  } else {
    console.log('数据错误')
  }
}
xhr.ontimeout = () => {
  console.log('请求超时')
}
xhr.onerror = () => {
  console.log('网络异常')
}
xhr.send('username=layouwen&password=123456')

简单的封装

const request = (url, params, onsuccess, onerror) => {
  url = url + '?' + Object.entries(params).map(arr=>arr[0] + '=' + arr[1]).join('&')
  let xhr = new XMLHttpRequest()
  xhr.open('POST', url, true)
  xhr.onload = () => {
    if (xhr.status === 200 || xhr.status === 304) {
      onsuccess(JSON.parse(xhr.responseText))
    } else {
      onerror()
    }
  }
  xhr.onerror = onerror
  xhr.send()
}

request('http://www.xxx.com/api/user/login', {
  username: 'layouwen',
  passowrd: '123456'
}, data => {
  console.log('请求成功', data)
}, () => {
  console.log('网络异常')
})

1.2.2 Post请求编码方式

两个常用的

application/x-www-form-urlencoded

参数变为 key1=value1&key2=value2 的形式

multipart/form-data

一般用于上传文件使用

multipart/form-data

let formData = new FormData()
formData.append('username', 'layouwen')
formData.appedn('password', '123456')
let url = 'http://www.xxx.com/api/user/login'
let xhr = new XMLHttpRequest()
xhr.open('POST', url, true)
xhr.onload = () => {
  if (xhr.status === 200 || xhr.status === 304) {
    console.log(JSON.parse(xhr.responseText))
  } else {
    console.log('接口异常')
  }
}
xhr.send(formData)

1.2.3 fetch

GET

let url = 'http://www.xxx.com/api/blog/list'

fetch(url).then(response => response.json()).then(data => {
  document.body.innerText = data.results[0].weather_data[0].weather
})

POST

let url = 'http://www.xxx.com/api/user/login'
let data = {
  username: 'layouwen',
  password: '123456'
}

fetch(url, {
  method: 'POST',
  body: Object.entries(data).map(arr=>arr[0] + '=' + arr[1]).join('&')
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(res=>res.json()).catch(error => {
  console.log('Error', error)
}).then(response => {
  console.log('Success', response)
})