ajax请求

关于ajax

Ajax全称为 “Asynchronous Javascript And XML” （异步 JavaScript 和 XML），是一种异步的数据传输技术，所谓异步就是非阻塞的，当前程序的执行和前面程序是否执行完毕没有关系。
使用ajax能实现前后台的交互，ajax有许多的优点：
1、不需要插件的⽀持，原⽣ js 就可以使⽤
2、不需要刷新页面就可以更新数据
3、减轻了服务端和带宽的负担

ajax请求

一个最基本的ajax请求包括三个步骤：

1、创建ajax对象

//ie9以上
const xhr = new XMLHttpRequest();

//ie9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP');

2、配置链接信息

const xhr = new XMLHttpRequest();
xhr.open('get', './data.php');

//open方法是用来配置ajax对象请求信息的
//open方法里面可以传入三个参数
//第一个参数表示请求的方式
//第二个参数表示请求的url
//第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步

3、发送请求

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
xhr.send()

//send方法表示把配置好信息的 ajax 对象发送到服务端

关于get和post请求

get请求直接将数据以查询字符串的形式，拼接在url之后，以?分割URL和传输数据，参数之间以&相连，虽然简单快捷，但是安全性更差，并且传输数据最大只能有2kb。

post请求是直接通过浏览器内部进行数据传输，所传输的数据不会拼接在url之后，所以相较get更加安全，并且post请求没有大小限制。

二者最基本的特征就是这些，此外还有一些更为复杂的差别，这里不做探讨。

状态码

虽然一个最基本的ajax请求就是上面三个步骤，完成以上三步后我们确实可以把请求发送到服务端，正常情况下客户端也能得到响应，但是我们拿不到响应。
如果想要拿到响应，应该满足两个前提条件：

1、本次 HTTP 请求是成功的，也就是http 状态码为 200 ~ 299
xhr.status：记录本次请求的 http 状态码的
http状态码2xx表示成功，4xx表示客户端错误，5xx表示服务端错误

2、ajax 对象也有⾃⼰的状态码，⽤来表示本次 ajax 请求中各个阶段。

xhr.readyState：记录ajax的状态码，表示⼀个 ajax 请求的全部过程中的某⼀个状态。
readyState === 0 ： 表示未初始化完成，也就是 open ⽅法还没有执⾏
readyState === 1 ： 表示配置信息已经完成，也就是执⾏完 open 之后
readyState === 2 ： 表示 send ⽅法已经执⾏完成
readyState === 3 ： 表示正在解析响应内容
readyState === 4 ： 表示响应内容已经解析完毕，可以在客户端使⽤了

所以在 ajax 请求的全部过程中，只有当 readyState=== 4 的时候，我们才可以正常使⽤服务端给我们的数据。只有当两个条件都满⾜的时候，才是本次请求正常完成。

readyStateChange

在 ajax 对象中有⼀个事件叫做 readyStateChange ，它是专⻔⽤来监听 ajax 对象的 readyState 值改变的的⾏为，只要 readyState 的值发⽣变化了，那么就会触发该事件，所以我们可以用这个时间来监听ajax的readyState 状态码是否等于4。

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
xhr.send()
xhr.onreadyStateChange = function (){
		if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)){
		}        //判断 readyState 的值是否等于 4，并且http状态码是否为200 ~ 299之间
}

responseText

ajax 对象的 responseText 成员是⽤来记录服务端给我们的响应体内容的，我们可以⽤这个成员来获取响应体内容。

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
xhr.send()
xhr.onreadyStateChange = function (){
		if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)){
				console.log(xhr.responseText)
		}       //直接打印服务端给我们返回的内容
}

完整的ajax请求函数的封装

清楚以上步骤后我们就可以封装一个完整的ajax请求函数

/*
    type 代表 请求方式
    url  代表 请求url路径
    data 代表 发送数据
    success 代表 下载数据成功以后执行的函数
    error   代表 下载数据失败以后执行的函数
*/

function $ajax({type = "get", url, data, success, error}){
    var xhr = null;
    try{
        xhr = new XMLHttpRequest();
    }catch(error){
        xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }
    
    if(type == "get" && data){
        url += "?" + querystring(data);
    }
    xhr.open(type, url, true);
    if(type == "get"){
        xhr.send();
    }else{
         //设置提交数据格式
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        data ? xhr.send(querystring(data)) : xhr.send();
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                if(success){
                    success(xhr.responseText);
                }
            }else{
                if(error){
                    error("Error：" + xhr.status);
                }
            }
        }
    }
}
function querystring(obj){
    var str = '';
    for(var attr in obj){
        str += attr + "=" + obj[attr] + "&";
    }
    return str.substring(0, str.length - 1);
}