原生ajax的封装

周涵畅

2023-12-01

1.什么是Ajax?

Ajax定义：Ajax(Asynchronous JavaScript+XML,即异步JavaScript加XML)，是一种通过异步请求的方式向服务器请求数据，在无需重新刷新整个网页的情况下，能够更新部分网页的技术。

作用：更好的提升用户的体验，并减少网络数据的传输量。

2.ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

3.ajax应用场景

ajax主要应用与表单验证、动态加载数据，按照需求取数据、改善用户体验、数据局部刷新等等。

4.实现ajax的核心

(1)XMLHttpRequest对象

所有现代浏览器都通过XMLHttpRequest构造函数原生支持XHR对象

let xhr = new XMLHttpRequest();

(2)open()方法

open()方法接收3个参数，分别是：请求类型（"get"、"post"等）、请求URL，以及表示请求是否异步的布尔值(true 异步，false 同步)，格式如下：

xhr.open('get','/api/login','true');

调用open方法不会实际发送请求，只是为发送请求做好准备。

注意：只能访问同源URL,也就是域名相同、端口相同、协议相同。如果请求的URL与发送请求的页面在任何方面有所不同，则会抛出安全错误。

(3)send()方法

要发送定义好的请求，必须调用send()方法,调用send()之后，请求就会发送到服务器

let xhr.open("get","example.text",true);
xhr.send(null);//send方法接收一个参数，是作为请求体发送的数据，如果不需要发送请求体，则必须传null

(4).readyState:返回当前文档的载入状态（即当前处在请求/响应过程的那个阶段）

0：未初始化(Uninitialized)。尚未调用open()方法。

1：已经打开(Open)。已经调用open()方法，尚未调用send()方法。

2：已发送(Sent)。已调用send()方法，尚未收到响应。

3：接收中(Receiving)。已经收到部分响应。

4：完成(Complete)。已经收到所有的响应，可以使用了。

每次readyState从一个值变为另一个值，都会触发readystatechange事件。因此，可以借此机会检查readyState的值。一般我们只关心readyState值是4，表示数据已就绪。为保证跨浏览器兼容，onreadystatechange事件处理程序应该在调用open()之前赋值。如下：

let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
            alert(xhr.responseText);//成功时响应体返回的实体
        }else{
            alert('Request was unsuccessful:'+xhr.status);//失败时返回响应的状态
        }
    }
};
xhr.open('get','example.txt',true);
xhr.send(null);

(5).responseText:作为响应体返回的文本。

(6).responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应的数据的XML DOM文档。

(7)status：响应的HTTP状态码

1XX：信息性状态码，表示接受的请求正在处理

2XX：成功状态码，表示请求正常处理

3XX：重定向状态码，表示需要附加操作来完成请求

4XX：客户端错误状态，表示服务器无法处理请求

5XX：服务器错误状态，表示服务器处理请求出错

(8)HTTP头部

每个HTTP请求和响应都会携带一些头部字段，XHR对象会通过一些方法暴露于请求和响应相关的头部字段。默认情况下，XHR请求会发送一下头部字段。

Accept：浏览器可以处理的内容类型。

Accept-Charset:浏览器可以显示的字符集。

Accept-Encoding:浏览器可以出来的压缩编码类型。

Accept-Language:浏览器使用的语言。

connection:浏览器与服务器的连接类型。

Cookie：页面中设置的cookie。

Host:发送请求的页面所在的域。

Referer:发送请求的页面的URL。

User-Agent:浏览器的用户代理字符串。

发送额外请求头可以使用setRequestHeader()方法，这个方法接收两个参数，分别是请求头的名称和值。注意：为保证请求头部被发送，必须在open()之后，send()之前被调用setRequestHeader()

例子如下：

let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
            alert(xhr.responseText);//成功时响应体返回的实体
        }else{
            alert('Request was unsuccessful:'+xhr.status);//失败时返回响应的状态
        }
    }
};
xhr.open('get','example.txt',true);
xhr.setRequestHeader("MyHeader","MyValue");//open()之后send()之前
xhr.send(null);

(9)GET请求与POST请求的区别

1.GET请求

最常用的请求方法，用于向服务器查询某些信息，必要时，需要在get请求的URL后面添加查询字符串参数，对于XHR而言，查询字符串必须正确编码后添加到URL后面，然后在传给open()方法。

查询字符串中的每个名和值都必须使用encodeURICompenent编码，所有的名/值对必须以和号（&）分隔，如下所示：

xhr.open('get','example.php?name1=value1&name2=value2',true);//get请求参数拼接在url上面

2.POST请求

第二个最常用的请求，用于向服务器发送应该保持的数据。例子如下：

xhr.open("post",'/api/login',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//配置请求头
xhr.send('username=xx&password=xxx');//发送的请求数据，post放在send里面

(10)原生JS封装ajax请求

/*
*@method jsonUrl(josn) 处理json格式数据，返回成get请求URL数据格式name1=value1&name2=value2
*/
function jsonUrl(json){
    var res='';
    var arr=[];
    for(var key in json){//for in 遍历对象获取属性和值key为属性，json[key]为对应属性值
        arr.push(key+'='+json[key])
    }
    res=arr.join('&');
    return res;
}

/*
*@method ajax(json) 封装ajax
*/
function ajax(json){
    if(!json){
        alert('需要传值');
        return;
    }
    //默认值的设定
    if(!json.url){
        alert('后台的地址必填项');
        return
    }
    json.type=json.type || 'get';
    json.data=json.data || {};

    //1、创建一个ajax对象
    var oAjax;
    //考虑兼容性
    if(window.XMLHttpRequest){
        oAjax=new XMLHttpRequest();
    }else if(window.ActiveObject){   //兼容IE6一下版本
        oAjax=new ActiveXobject('Microsoft.XMLHTTP');
    }
    //.toLowerCase() 转换成小写
    switch (json.type.toLowerCase()){
        case 'get':
            //2、创建链接   oAjax.open('请求的方式','请求的地址',是否异步)
            oAjax.open('get',json.url+'?'+jsonUrl(json.data),true)
            //3、发送
            oAjax.send(null);
            break;
        case 'post':
            //2、创建链接   oAjax.open('请求的方式','请求的地址',是否异步)
            oAjax.open('post',json.url,true);
            //请求头的类型
            oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //3、发送
            oAjax.send(jsonUrl(json.data));
            break;
    }

    //4.等待接收消息
    oAjax.onreadystatechange=function () {
        if(oAjax.readyState==4){//通讯已经完成，数据全部接收
            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){//网络状态是成功
                /*console.log(oAjax.responseText)*/
                json.success && json.success(oAjax.responseText);
            }else{
                json.error && json.error(oAjax.status);
            }
        }
    }
    
}

基本的使用示例：

ajax({
    url:'api/login'//后台的地址 
    type:'post',
    data:{
        username:'username',
        password:'password',
    },
    success:function(data){
    //服务器返回响应
    }
    //异常处理
    error:function(err){
        console.log(err)
    }
})