AJAX 的基本概念与应用-原创手记-慕课网

一、概述

AJAX 是 Asynchronous JavaScript and XML的简称，翻译过来就是异步的JavaScript和XML。
因此，它不是一种什么新的编程语言，只是一种处理服务器数据与网页界面的技术框架，相当于Android中的网络请求框架。

AJAX是在2005年的时候，因为Google的Google Suggest功能，它才流行起来的。

二、XMLHttpRequest / ActiveXObject对象

就像概述上说的，AJAX好比Android中的网络请求框架，因此它也有类似Java中的HttpRequest对象。
不过由于Web的兼容性，在IE5与IE6时只能使用ActivieXObject，现代的浏览器基本都支持XMLHttpRequest。

语法

//XMLHttpRequest实例化
var httpRequest = new XMLHttpRequest();

//ActiveXObject实例化
var activeXObject = new ActiveXObject("Microsoft.XMLHttp");

我们在用的时候，得先判断浏览器是否支持XMLHttpRequest对象，以免程序Bug.如下：

 var xmlHttp;
 if(window.XMLHttpRequest){
 //如果浏览器支持XMLHttpRequest对象
 xmlHttp = new XMLHttpRequest();
 }else{
  //不支持XMLHttpRequest
  xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
 }

三、XMLHttpRequest方法列表

方法	描述
open(method,url,async)	规定请求方法(GET/POST),请求URL地址，是否异步请求
send(string)	将请求发送至服务器，有send()与send(string)，当string不为空时，仅用于Post请求

注：至于什么时候用GET,什么时候用POST，这个就不用再讲了。
这里强调一点的时open()方法中的第三个参数async,这个是看你是否执行异步请求，
这个要看你的业务，有时需要同步请求，比如，我提交一个表单，只有当提交成功的时候，我才跳转至新的界面或刷新当前界面。这时就需要同步操作。
但大部分我们都是异步请求，因为这样可以很好的解决界面卡顿等等问题。

四、XMLHttpRequest三个重要的属性

跟java中的Http请求一样，有反应服务器响应的状态码等，比如200表示请求成功，404表示路径错误，页面未找到等。
AJAX中的XMLHttpRequest有以下三个重要属性：

readystate: 表示Web与服务器建立XMLHttpRequest请求的状态，用以下5个状态码(0~4)表示：
0: 请求未初始化；
1：服务器连接已经建立；
2: 请求已接收；
3：请求处理中；
4：请求已完成，且服务器响应已就绪；
onreadystatechange: 请求状态改变时的监听回调，即每当readystate发生改变时，就会触发该函数
status: 状态码，200：“ok", 404:未找到页面

事例：

xmlHttp.onreadystatechange = function(){
 if(xmlHttp.readystate == 4 && xmlHttp.status == 200){
    document.getElementById("test").innerHTML = xmlHttp.responseText;
 }
}

至于onreadystatechange事件，我们下面将对其进行详细讲解

五、请求实例

既然AJAX也是网络请求，那么它也要遵循HTTP协议，那样，它也可以添加HTTP请求头。如下：

xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

GET请求实例

var requestURL = "http://10.8.4.45:8080/app-h5-dev2/other/CGlassH5Dev/page/index.html",true);

 //配置请求参数
xmlHttp.open("GET",{requestURL}+"?t="+Math.radom(),true);
 //发送请求
 xmlHttp.send();

POST请求实例

//一、用post提交无参
xmlHttp.open("POST",{requestURL},true);
xmlHttp.send();

//二、用post提交参数
xmlHttp.open("POST",{requestURL},true);
xmlHttp.send("t=10&times=1000");

六、请求响应

跟所有网络请求一样，有请求，就会有服务器的响应，就得接收服务器返回的数据。
在Java里面我们是用HttpResponse来接收，在Web里面，很简单，直接使用XMLHttpRequest对象中的responseText或responseXML属性

属性名	描述
responseText	当服务器返回的数据为字符串时用
responseXML	当服务器返回的数据格式为XML时用

七、onreadystatechange 事件

由上面的XMLHttpRequest对象的三重要属性，已经知道，onreadystatechange是当请求被发送到服务器，且请求状态发生改变时，会被触发的回调函数事件，它有（0-4）共5个状态码，会被触发5次。
这个就相当于java里面的callback回调，只是在js里面它的写法不一样。它是把这个回调的function赋值给XMLHttpRequest对象的onreadystatechange属性。

/**
*请求回调函数
**/
function requestCallback(){
  if (xmlhttp.readyState==4)
    {
     alert("4：请求已经完成，服务器响应已经就绪，等待返回");
     if(xmlhttp.status == 200){
      alert("200：服务器已经响应，成功返回数据");
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
     }else if(xmlhttp.status == 404){
      //错误页面处理
     }else if(){
      //todo 自己公司其他errorCode处理
     }

    }
  if(xmlhttp.readyState == 0){
      alert("0：请求未初始化");
    }else if(xmlhttp.readyState == 1){
      alert("1：服务器连接已经建立");
    }else if(xmlhttp.readyState == 2){
     alert("2：请求已被服务器接收");
    }else if(xmlhttp.readyState == 3){
     alert("3：请求处理中");
    }
}
xmlHttp.onreadystatechange = requestCallback();

八、实际项目应用

在实际项目中的应用，可能都会经过不同程度的封装，以便统一处理请求头，请求参数，返回值，错误处理等。
总之，根据各自业务线的需求来封装，同时考虑到扩展就行了。
也许有同学会觉得我闲得蛋疼，说人家JQuery已经封装得这么好了，且兼容性也都处理好了，还要自己封装个鸟啊。对于这种思想，我选择直接过滤。因为即使是JQuery已经封装好了，我们也应该去搞懂AJAX的原理，要想如果是自己要怎么封装，那样才能在碰到变态的业务时，能随机应便的处理。

下面看个例子：

/**
*基于AJAX进行基本的网络请求封装
*
*reqMethod:请求方法GET/POST
* url:请求资源路径
* data:请求参数
* success:成功回调
* error: 错误回调
**/
function myAJAX(reqMethod,url,data,success,error){
   //todo 这里根据上面第一点的语法来对AJAX请求对象进行实例化
   var reqObj = ...

   if(reqMethod.toString().toLowerCase() == "POST".toLowerCase()){
    reqObj.open("POST",url);
    reqObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    reqObj.send(data);
   }else if(reqMethod.toString().toLowerCase() == "GET".toLowerCase()){
    reqObj.open("GET",url+"?"+data);
    reqObj.send(null);
   }else{
    alert("请设置正确的请求方式：GET或POST”);
   }

   return reqObj;

 }

 /**
 *请求回调
 **/
 function callback(){
  //todo 这里参考上述第七点的回调函数写法
 }

下一篇文章，我们再一起来详细了解JQuery.

参考资料

【AJAX教程】http://www.w3school.com.cn/ajax/index.asp