ajax实现步骤,AJAX基本实现步骤

AJAX基本实现步骤

AJAX是异步通信的一种技术，主要实现技术是javascript+xml+html+css+服务端。在这里主要讨论客户端的操作。以下是客户端的实现步骤：

1、创建XMLHttpRequest对象(需要考虑各浏览器兼容的问题)

2、使用XMLHttpRequest对象打开一个连接(指定连接方式和连接地址以及是否同步)

3、设置请求的头部(请求的类型和请求的编码格式)

4、设置回调函数

5、发送请求

6、更新页面显示

实现详解：

(1)、创建XMLHttpRequest对象(需要考虑各浏览器兼容的问题)。

具体实现：

var xmlHttp;

function createXMLHttpRequest() {

//建立XMLHttpRequest

try {

xmlHttp= new XMLHttpRequest();

} catch (e)

{

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (ee) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (err) {

xmlHttp = false;

}

}

}

if(!xmlHttp)

alert("不能创建XMLHttpRequest对象");

}

createXMLHttpRequest();

基本上，上面的码就能够实现在大部分浏览器中创建XMLHttpRequest对象。这一步的作用就是为了创建XMLHttpRequest对象，所以基本上不需要进行更改。

(2)、使用XMLHttpRequest对象打开一个连接(指定连接方式和连接地址以及是否同步)

具体实现：

xmlHttp.open("POST","URL ",true);

调用XMLHttpRequest对象的open方法。第一个参数是提交数据的方式，取值为post/get；第二个参数是提交的目标页面(也就是用于处理提交数据的页面)；第三个参数指定是否请求是异步的-缺省值为true，为了发送一个同步请求，需要把这个参数设置为false。

(3)、设置请求的头部(请求的类型和请求的编码格式)

具体实现：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

(4)、设置回调函数

主要用于处理从服务端发送给客户端的数据，主要使用javascript去调用页面中的元素，并根据服务端返回的结果去控制页面中元素的更新。内部实现实际上是javascript中的事件处理机制。

具体实现：

//事件绑定

xmlHttp.onreadystatechange=show;

//事件处理函数

function show()

{

//如果readyState为4，表示响应已经被完全接收。

if(xmlHttp.readyState==4)

{

//如果获得的结果状态代码为200，表示服务端正常返回

if(xmlHttp.status==200)

{

//客户端响应代码

}

}

}

(5)、发送请求

调用XMLHttpRequest对象的send方法实现数据的发送。

具体实现：

if(uname.value!=null)xmlHttp.send("uname="+uname.value);

(6)、更新页面元素的显示

在发送数据到服务端之后，服务端处理完毕会返回客户端一个响应，我们在客户端所设定的回调函数实际上就是对事件的处理，当readystate属性发生变化的时候都会触发事件处理函数，如果readystate变成了4并且响应的状态码是200的话，那么则表示服务端正常返回了信息。这个时候我们就能够获得服务端的响应信息并进行相对应的处理。

具体实现：

alert(xmlHttp.responseXML);

alert(xmlHttp.responseHTML);