javascript实现Ajax的六个步骤

通过jQuery的封装之后，对于Ajax的使用变得非常的简单，但是个人对于javascript实现的Ajax的原理却一无所知，今天在看《锋利的jQuery》这本书的时候，在书上看到了关于这个实现的例子，特此摘抄下来。

例子描述：单击一个按钮，然后通过传统的javascript的Ajax的方式从服务器端取回一个“Hello Ajax！”的字符串并显示在页面上。

首先在前台页面中书写HTML代码，代码如下：

<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText"></div>

<button>按钮用来触发Ajax，id为"resText"的元素用来显示从服务器返回的HTML文本。

接下来的任务就是完成Ajax()函数，实现步骤如下：

(1)定义一个函数，通过该函数来异步获取信息，代码如下：

function Ajax(){
//...
}

(2)声明一个空对象用来装入XMLHttpRequest对象，代码如下：

var xmlHttpReq=null;

(3)给XMLHttpRequest对象赋值，代码如下：

if(window.ActiveXObject){                                    //IE5、IE6是以ActiveXObject的方式
                                                             //引入xmlHttpRequest对象的
    xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){                             //除IE5、IE6以外的浏览器
                                                             //XMLHttpRequest是window的子对象
    xmlHttpReq=new XMLHttpRequest();                         //实例化一个XMLHttpRequest对象
}

IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的，而其他浏览器的XMLHttpRequest对象是window的子对象。

(4)实例化成功后，使用open()方式初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器URL，代码如下：

xmlHttpReq.open("GET","test.php",true);    //调用open()方法并采用

默认情况下，使用XMLHttpRequest对象发送的HTTP请求是异步进行的，但是可以显示地把async参数设置为true，如上面代码所示。

(5)因为要做一个异步调用，所以需要注册一个XMLHttpRequest对象，将调用的回调事件处理器当它的readyState值改变时调用。当readState值被改变时，会激发一个readstatechange事件，可以使用onreadstatechange属性来注册该回调事件处理器，代码如下：

xmlHttpReq.onreadstatechange=RequestCallBack;    //设置回调函数

(6)使用send()方法发送该请求，因为这个请求使用的是HTTP的GET方式，所以可以在不指定参数或使用null参数的情况下调用send()放法，代码如下：

xmlHttpReq.send(null);        //因为使用GET方法提交，所以可以使用null作为参数调用

当请求状态改变时，XMLHttpRequest对象调用onreaystatechange属性注册的事件处理器。因此，在处理该响应之前，事件处理器应该首先检查readyState的值和HTTP的状态。当请求完成加载(readyState值为4)并且响应已经成功(HTTP状态为200)时，就可以调用一个javascript函数来处理该响应内容，代码如下：

function RequestCallBack(){//一旦readyState值改变，将会调用该函数
    if(xmlHttpReq.readyState == 4)
    {
        if(xmlHttpReq.status == 200){
        //将xmlHttpReq.responseText的值赋予id为resText的元素
            document.getElementById("resText").innerHTML=xmlHttpReq.responseText;
        }
    }
}

最后，如果单击"Ajax提交"按钮后发现网页上出现了"Hello Ajax！",那么就完成了第一个Ajax调用。

转载于:https://my.oschina.net/u/1418898/blog/337289