步骤

1. 创建ajax对象

• XMLHttpRequest,该对象是有兼容问题的,在低版本的ie浏览器中不支持,标准下最新XMLHttpRequest是XMLHttpRequest2
• 低版本ie下使用：ActiveXObject('Microsoft.XMLHTTP')

let xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

2. 设置请求参数

• 第一个参数：请求方式，也就是http请求方式：get、post
• 第二个参数：请求地址，url
• 第三个参数：是否异步无阻塞，true表示异步无阻塞

xhr.open('get', '/checkusername?username=' + this.value, false);

如果是post请求的话，必须设置头信息

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

3. 发送请求

当get请求时

xhr.send();

当通过post发送请求时，用到xhr.send()，括号里写要发送的数据，必须以键值对的形式来发送数据

xhr.send('username=haha&age=13');

4. 监听返回

• onload属性是标准的XMLHttpRequest才有的事件
• 低版本浏览器不支持，在标准浏览器下（XMLHttpRequest2），该对象还有其他的一些相关事件：error,loaded,progress,abort
• 低版本浏览器使用onreadystatechange事件，这个事件在标准浏览器也是存在的
• onreadystatechange：
  • 属性：readyState
    • ajax的工作状态
    • 0：初始化
    • 1：调用send方法后（请求发出以后）
    • 2：请求已经被接收处理
    • 3：客户端接收到响应，但是内容还不一定完成了解析
    • 4：解析完成

xhr.onload = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
       console.log(xhr.responseText); 
    }
}

readyState

用来描述 从xhr创建开始，到整个请求完成，这个完整生命周期
只要当readyState为4的时候，才表示返回的数据是可以真正使用的

status

status是表示服务端返回的状态码。
一般而言，当服务端返回200的时候，才表示一切ok。

我们在获取返回结果的时候，就增加了一个判断 xhr.status == 200。

responseText

在web开发中，服务端和浏览器端交换数据，只有一种类型 --- 字符串
而responseText就是用来接受服务端返回的字符串。

有三种字符串表现形式：

• 纯文本
• html字符串
• json字符串
  • 可以使用JSON.parse()把json字符串转化成json对象

注意

在get请求的时候
如果遇到= 和 & 这些特殊符号 或者中文（IE下）
则需要用encodeURIComponent进行转码

let a = encodeURIComponent(this.username);

建议 将 send方法 写在最后面

JQ 的 ajax

$.ajax({
    url: '请求地址',
    type: 'get',//get、post
    async: 'true',//默认为true异步
    data: '发送的数据',
    datatype: 'json',//返回的数据格式
    success(res){
        //请求成功后的回调函数
    },
    error(err){
        //请求失败的回调函数
    },
    timeout: 1000,//设置请求超时的毫秒值
})