AJAX全称Asynchronous JavaScript and XML（异步的JavaScript与XML），最初的AJAX传输的数据格式采用的是XML，所以这也就是AJAX名称的由来，后来由于技术的发展JSON更被接受，现在的AJAX传输数据格式改用的都是JSON格式。其实最初的浏览器并不支持AJAX技术，这些与需求安全技术等等因素相关，这里就不太深入的赘述，值得关注的是AJAX本身实质上就是HTTP网络访问协议通过浏览器内核暴露的接口，通过AJAX对象可以由用户主动通过调用对象的相关方法发起网络请求，浏览器并且会对发起的网络请求进行监听，实现AJAX响应机制。而且AJAX还可以主动添加HTTP报文头，实现多样的网络请求。
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最先被应用到浏览器中的是微软实现的，所以在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"); }
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 发生变化。
6. xhr.status表示HTTP响应的状态码。
7. xhr.responseText获取字符串形式的响应数据。
8. xhr.responseXML获取XML形式的响应数据。
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