AJAX原理解析与兼容方法封装

时间：2022-04-19 08:30:09
  • AJAX常用参数
  • AJAX对象兼容
  • AJAX对象方法与属性
  • AJAX封装兼容方法源码

AJAX全称Asynchronous JavaScript and XML（异步的JavaScript与XML），最初的AJAX传输的数据格式采用的是XML，所以这也就是AJAX名称的由来，后来由于技术的发展JSON更被接受，现在的AJAX传输数据格式改用的都是JSON格式。其实最初的浏览器并不支持AJAX技术，这些与需求安全技术等等因素相关，这里就不太深入的赘述，值得关注的是AJAX本身实质上就是HTTP网络访问协议通过浏览器内核暴露的接口，通过AJAX对象可以由用户主动通过调用对象的相关方法发起网络请求，浏览器并且会对发起的网络请求进行监听，实现AJAX响应机制。而且AJAX还可以主动添加HTTP报文头，实现多样的网络请求。

一、AJAX常用参数

1. HTTP请求方法(method)：GET、HEAD、POST、PUT、TRACE、OPTIONS、DELETE和Web扩展方法[LOCK、MKCOL、COPY、MOVE]。这些方法不一定都能被正常使用，需要看具体的网络服务程序是否实现。常用的方法就是GET和POST。

2. HTTP请求URL： 请求资源的路径。

3. HTTP请求的主体部分：（data）通常描述的数据，由请求方发送给接受方的数据（我封装的方法中采用的是接收键值对(对象)形式的数据，内部处理成字符串拼接的处理方式）。

4. 浏览器采用异步或同步发送请求（flag/async）：true表示异步，false表示同步。

5. 请求响应的回调方法：callback。由具体AJAX请求事件实现。

二、AJAX对象兼容

AJAX最先被应用到浏览器中的是微软实现的，所以在IE5和IE6中的AJAX对象是ActiveXObject，后来由W3C规范统一为XMLHttpRequest。下面是兼容代码：

var  xhr = null ;

if(window.XMLHttpRequest) {

    //创建除IE以外的ajax对象 --- code f for IE7+, Firefox, Chrome, Opera, Safari

    xhr = new XMLHttpRequest() ;

}else{

    //创建IE的ajax对象 --- code for IE6, IE5

    xhr = new ActiveXObject("Microsoft.XMLHttp");

}

三、AJAX方法与属性

1. xhr.open(method,url,async);用来初始化请求对象的请求。

2. xhr.send(string);将请求发送给接受方，其参数只适应post方法的请求，传入的是请求报文的主体（数据）。其他请求方法将数据拼接在URL后面。

//GET请求方法

xhr.open('GET',url+'?'+data,flag);

xhr.send();

//POST请求方法

xhr.open(method,url,flag);

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

xhr.send(data);

//data格式

"name='xiaoming'&sex='man'"

3. xhr.setRequestHeader(header,value);给HTTP请求报文添加头部字段，参数1：头部名称；参数2：头部的值。这里添加的传输主体（data）发送到服务器之前应该如何对数据进行编码。示例中的application/x-www-form-urlencoded编码类型的发送和接收，窗体数据被编码为名称/值对。还有application/json的发送和接收，表示窗体数据被编码为JSON字符串。multipart/form-data的发送和接收，表示窗体数据被编码为文件编码格式（适应文件、图片等传输）。HTTP头部还有其他很多属性，Content-type数据编码格式也还有其他的格式，就不在这里一一列举了。

4. xhr.onreadystatechange是AJAX请求响应监听事件，每当xhr.readyState的属性值发生改变时就会被触发一次。

5. xhr.readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

6. xhr.status表示HTTP响应的状态码。

  • 200: （OK）表示请求成功，所请求的数据都在响应主体中。（200~299）
  • 401: （Unauthorized）表示未授权，需要输入用户民和密码。
  • 404: （Not Found）表示未找到执行的资源，也就是说请求的资源在服务器中没有找到。
  • 300~399: 重定向，已定义的范围（300~305）。
  • 400~499: 客户端错误,已定义的范围（400~415）。
  • 500~599: 服务器出错,已定义的范围（500~505）。

7. xhr.responseText获取字符串形式的响应数据。

8. xhr.responseXML获取XML形式的响应数据。

四、AJAX兼容方法封装源码

 function ajaxFunc(method,url,data,callback,flag){

     //参数：method(提交请求方法)：get、post；

     //         url(提交地址)：服务器地址；

     //         data(提交数据)：采用Object数据类型，当get请求模式时转换为字符串拼接形式，当post请求模式时转换为JSON数据格式；

     //         callback(处理服务器响应数据的方法)；

     //         flag(异步还是同步提交)：true(异步)、false(同步)；

     //创建一个ajax对象

     let xhr = null;

     if(window.XMLHttpRequest){

         //  创建除IE以外的ajax对象 -- code f for IE7+, FireFox, Chrome, Opera, Safari

         xhr = new XMLHttpRequest();

     }else{

         // 创建兼容IE的ajax对象 -- code for IE6, IE5

         xhr = new ActiveXObject("Microsoft.XMLHttp");

     }

     //将get、post转成大写

     method = method.toUpperCase();

     //发起ajax请求

     if(method === 'GET'){

         //将dta的JSON格式数据转换拼接成可直接提交的字符串形式

         data = (function(data){

             let httpText = "";

             if(!data){

                 return null;

             }

             for(let temp in data){

                 httpText = httpText + (temp + '=' + data[temp] + '&');

             }

             return httpText;

         })(data);

         //发起GET方法的请求

         xhr.open(method, url + '?' + data, flag);

         xhr.send(null);

     }else if(method === 'POST'){

         //发起POST方法的请求

         xhr.open(method, url, flag);

         xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

         xhr.send(JSON.stringify(data));

     }

     //监听物理信息

     xhr.onreadystatechange = function(){

         // 监听到readystate=4时

         // 解析服务器返回的responseText数据

         if(xhr["readyState"] === 4){

             //判断响应状态是否为200--表示请求成功响应

             if(xhr["status"] === 200){

                 callback(xhr["responseText"]);

             }

         }

     }

 }

相关文章