文章

ajax

基础用法

使用xhr需要对构造函数XMLHttpRequst实例化

const xhr = new XMLHttpRequst()

如何在发送消息之前，我们需要先调用open方法，它接收三个参数

  1. 请求的方法
  2. 请求的url
  3. 是否异步 Boolean
xhr.open('get',"http://example.com",true)

然后就可以调用send发送数据了，接收一个参数

xhr.send({a: 1})
// 如果要发送空数据，则传null
xhr.send(null)

接收到响应后，xhr会填充status属性，它表示响应的状态码，可以通过它来判断响应的状态。

此外xhr对象还有另一个常用的属性readyState，它有5个可能的值

  • 0 未调用open
  • 1 调用了open方法，但是没调用send方法
  • 2 调用了send，未接收到响应
  • 3 正在接收响应
  • 4 完成接收

每当readyState变化时，都会触发readystatechange事件。

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        // 处理
    }
}

如果在异步请求的时候想停止，可以调用xhr的abort()方法。

调用这个方法后，XHR对象会停止触发事件，并阻止访问这个对象上任何与响应相关的属性。中断请求后，应该取消对XHR对象的引用。

设置请求头

可以通过getResponseHeader来获取某个http响应头字段

可以通过getAllResponseHeader来获取所有的http响应头字段

可以通过setRequestHeader来添加http请求头字段

GET和POST方法

如果请求是get方法，那么参数需要自己加到url中。

如果请求是post方法

  • 默认发送是application/JSON格式
  • 如果要改为form-data格式，需要
    • 先设置请求头content-type为application/x-www-form-urlencoded
    • 改变参数格式为FormData

FormData

现代Web应用程序中经常需要对表单数据进行序列化，因此XMLHttpRequest Level 2新增了FormData类型。FormData类型便于表单序列化，也便于创建与表单类似格式的数据然后通过XHR发送。

const data = new FormData()
data.append('name',"张三")
// 也可以直接传入表单


超时

xhr有个timeout属性，用于设置超时时间，如果超时未得到响应，就会触发ontimeout事件。

xhr.timeout = 5000
xhr.ontimeout = function(){
    alert('超时了！')
}