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

• 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兼容方法封装源码

 1 // JavaScript Document
 2 function ajaxFunc(method,url,data,callback,flag){
 3     //参数：method(提交请求方法)：get、post；
 4     //         url(提交地址)：服务器地址；
 5     //         data(提交数据)：采用JSON格式；
 6     //         callback(处理服务器响应数据的方法)；
 7     //         flag(异步还是同步提交)：true(异步)、false(同步)；
 8 
 9     //创建一个ajax对象
10     var  xhr = null ;
11     if(window.XMLHttpRequest) {
12         //创建除IE以外的ajax对象 --- code f for IE7+, Firefox, Chrome, Opera, Safari
13         xhr = new XMLHttpRequest() ;
14     }else{
15         //创建除IE的ajax对象 --- code for IE6, IE5
16         xhr = new ActiveXObject("Microsoft.XMLHttp");
17     }
18     //将GET、POST转成大写
19     method = method.toUpperCase();
20     //将data的JSON格式数据转换拼接成可直接提交的字符串形式
21     data=(function(data){
22         var httpText="";
23         if(!data){
24             return null;
25         }
26         for(var i in data){
27             //jsonName+"="+jsonText
28             httpText=httpText+( i + '=' + data[i] +'&');    
29         }
30         return httpText;
31     })(data);
32     //发起AJAX请求
33     if(method == 'GET'){
34         //判断请求方式为GET时采用以下提交方式
35         xhr.open(method,url+'?'+data,flag);
36         xhr.send();
37     }else if(method == 'POST'){
38         //判断请求方式为POST时采用以下提交方式
39         xhr.open(method,url,flag);
40         xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
41         xhr.send(data);
42     }
43     //监听物理信息
44     xhr.onreadystatechange = function(){
45         //监听到readystate=4的请求发送完成并获取到且解析完成的responseText数据
46         if(xhr.readyState == 4){
47             //判断响应状态是否成功
48             if(xhr.status==200){
49                 //调用数据处理方法处理服务器响应过来的数据
50                 callback(xhr.responseText);
51             }
52         }
53     }
54 }

转载于:https://www.cnblogs.com/ZheOneAndOnly/p/10626727.html