AJAX以及轮询

本文对比了传统表单提交与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)
  • 使用内置的 XMLHttpRequestfetch 对象,实现和服务器的交互
  • 交互数据时不需要刷新数据,用户体验好
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)
})

更多用法 https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

2. 双工通信

2.1 轮询

每隔一段时间发一次请求

  • 发请求,立即响应,返回空
  • 发请求,立即响应,返回新数据
  • 发请求,立即响应,返回数据为空
  • 发请求,立即响应,返回数据为空

gitee案例 chat-xhr-poll

2.2 长轮询(Comet)

客户端

  • 发请求,等待响应
  • 当响应时,再次发送请求

服务端

  • 请求到来,如果没新数据,则不发
  • 当有新数据,需要通知客户端,再响应

gitee案例 chat-comet

2.3 WebSocket

gitee案例 chat-websocket

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值