您的位置:首页 > Web前端 > JavaScript

javascript实现Ajax的六个步骤

2014-10-25 00:00 281 查看
摘要: 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调用。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: