ajax请求

何为ajax

传统的web交互没触发一次请求就要都要去重新刷新一次整个页面，这样既浪费带宽又浪费时间。ajax的出现解决了这一问题，ajax通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。即在不重新加载整个网页的情况下，对网页的某部分实现更新。

如何实现ajax请求

ajax的实现可分为四个步骤：
1.创建一个XMLHttpRequest对象；
2.使用open()方法打开请求地址，open()方法中需要的参数：（1.请求方式，2.请求地址，3.是否异步）；
3.发送请求体；
4.响应请求
readyState代表XMLHttpRequest的状态。从0到4发生变化：
0: 请求未初始化，对象已创建，未调用open()方法
1: 服务器连接已建立，open()成功调用
2: 请求已接收，send()方法已调用，尚未开始接收数据
3: 请求处理中，正在接收数据，Http响应已接收，但尚未接收完成
4: 请求已完成，且响应已就绪

status为响应状态码：
1XX：信息类，表示收到Web浏览器请求，正在进一步处理中；
2XX：成功，表示用户请求被正确接收和处理，例如：200 OK；
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作；
4XX：客户端错误，表示客户端提交的请求有错误，例如：404 Not Found；
5XX：服务器错误，表示服务器不能完成对请求的处理，例如：500

onreadystatechange：请求状态改变的事件触发器
responseText：服务器响应的文本内容

以下为ajax请求具体的实现过程，只针对get请求和post请求：

//把对象转换为请求时所需要的字符串样式
function json2url(data){
    data.t = new Date().getTime();  //调价时间戳，避免重复
    var ary = [];
    for (let attr in data){
        ary.push(attr+'='+data[attr])
    }
    return ary.join('&')
}
function ajax(url,type,data,success){
    //第一步：创建XMLHttpRequest对象
    var xml = new XMLHttpRequest()
    //判断是get请求还是post请求
    switch (type.toLowerCase()) {
        case 'get':
            //第二步：打开地址
            xml.open('GET',url+'?'+json2url(data),true) //参数：1.请求方式，2.请求地址，3.是否异步
            //第三步：发送请求
            //因为是get请求，参数在地址栏传入，所以发送请求体不需要内容,可以写入null，也可以为空
            xml.send(null);
            break;
        case 'post':
            //打开地址
            xml.open('POST',url,true);
            //设置请求报文
            xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //发送请求体
            xml.send(json2url(data))
            break;
    }
    //第四步:响应请求
    xml.onreadystatechange = function (){
        //readyState存有 XMLHttpRequest 的状态,4代表请求已完成，且响应成功
        //status 响应状态码 2xx代表成功
        if(xml.readyState == 4 && /^2\d{2}$/.test(xml.status)){
            //success作为回调函数把获取的数据返回出去
            success && success(xml.responseText)
        }
    }
}