Ajax技术

一、Ajax开发模式与传统开发模式的比较

传统的Web开发模式中，页面中用户的每一次操作都会触发一次返回Web服务器的HTTP请求，服务器进行相应的处理（获得数据、运行与不同的系统会话）后，返回一个HTML页面给客户端

在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回的结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置

二、Ajax技术的使用

1、XMLHttpRequest对象

Ajax使用的技术中，最核心的技术就是XMLHttpRequest对象，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传出协议连接一个服务器，是微软公司为满足开发者需求而推出的。许多浏览器都对其提供支持，不过实现方式与IE有所不同。

2、XML

XML是eXtensible Markup Language（可扩展的标记语言）的缩写，它提供了用于描述结构化数据的格式，适用于不同应用程序之间的数据交换，而且这种交换不以预先定义的一组数据结构为前提，增强了可扩展性。XMLHttpRequest对象与服务器交换的数据通常采用XML格式。

3、JavaScript

JavaScript是一种在Web页面中添加动态脚本代码的解释性程序语言，其核心已经嵌入到目前主流的Web浏览器中。虽然平时应用最多的是通过JavaScript实现一些网页特效及表单数据验证等功能，其实JavaScript可以实现的功能远不止这些。JavaScript是一种具有丰富的面向对象特性的程序设计语言，利用它能执行许多复杂的任务。

4、CSS

CSS是Cascading Style Sheet (层叠样式表)的缩写，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在Ajax出现之前，CSS已经广泛的应用到了网页中。在Ajax中，通常使用CSS进行页面布局，通过改变文档对象的CSS属性控制

5、DOM

DOM是文档对象模型的简称，是表示文档和访问、操作构成文档的各种元素的应用程序接口。在Ajax中，可以达到在不刷新页面的情况下实时修改用户界面的目的。

三、使用XMLHttpRequest对象

1、初始化XMLHttpRequest对象

A、IE浏览器的初始化方式：

var http_request = new ActiveXObject(“Msxml2.XMLHttp”);

或者

var http_request = new ActiveXObject(“Microsoft.XMLHttp”);

B、非IE；浏览器的初始化方法

var http_request = new XMLHttpRequest();

为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象。创建一个跨浏览器的XMLHttpRequest对象的方法：

if(window.XMLHttpRequest){

http_request = new XMLHttpRequest();

}else if{

try{

http_request = new ActiveXObject(“Msxml2.XMLHTTP”);

}catch(e){

try{

http_request = new ActiveXObject(“Microsoft.XMLHTTP”);

}catch(e){}

}

2、XMLHttpRequest对象的常用方法

A、open()方法

open()方法用于设置进行异步请求目标的URL、请求方法及参数信息。具体语法如下：

open(“method”,”URL” [,asyncFlag [,”userName”] [,”password”]])

参数说明：

method:用于指定请求类型，一般为GET或POST

URL：用于指定请求地址，可以使用绝对路径或相对路径，可传递查询字符串

asyncFlag：指定请求方式，异步请求为true,同步请求为false。默认为true

userName:指定请求的用户名

password:指定请求密码

范例：

设置异步请求目标为regist.jsp，请求方法为GET,请求方式为异步

http_request.open(“GET”,”regist.jsp”,”true”);

B、send()方法

send()方法用于想服务器发送请求。如果请求声明为异步，该方法将立刻返回，否则将等到接受到响应为止。语法格式：

send(content)

参数说明：

Content:用于指定发送的数据，可以是DOM对象的实例、输入流或字符串。没参数需要传递，可以设置为null

范例：

http_request.send(null);

C、setRequestHeader()方法

setHttpHeader()方法用于为请求的HTTP头设置值。语法格式如下：

setRequestHeader(“header”,”value”)

参数说明：

header:用于指定HTTP头

value:用于为指定的HTTP头设置值

PS:

setRequestHeader()方法必须在调用open()方法之后才能调用

范例：

在发送POST请求时，需要设置Content-Type请求头的值为“application/x-www-form-urlencoded”

http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

D、abort()方法

abort()方法用于停止或放弃当前的异步请求。语法格式如下：

abort();

E、getResponseHeader()方法

getResponseHeader()方法用于以字符串形式返回指定的HTTP头信息。其语法格式：

getResponseHeader(“headerLable”);

参数说明：

headerLable:用于指定HTTP头，包括Server/Content-Type/Date等

范例：

获取HTTP头中Content-type的值，可以使用如下代码

http_request.getResponseHeader(“Content-type”);

F、getAllResponseHeaders()方法

getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP头信息，其中包括Server/Date/Content-Type和Content-Length。语法格式：

getAllResponseHeaders();

范例：

应用如下代码调用getAllReponseHeaders()方法

Alert(http_request.getAllResponseHeaders());

3、XMLHttpRequest对象的常用属性

A、onreadystatechange属性

Onreadystatechange属性用于指定状态改变时所触发的事件处理器。在Ajax中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数

范例：

http_request.onreadystatechange = getResult;

在指定触发的事件处理器时，所调用的JavaScript函数不能添加小括号或参数。但是可以使用匿名对象。例如：要调用带参数的函数，可以使用如下方式：

Http_request.onreadystatechange=function(){

getResult(“添加参数”);

}

B、readyState属性

readyState属性用于获取请求的状态。该属性共包括5种属性值，如下：

C、responseText属性

responseText属性用于获取服务器的响应，表示为字符串

D、responseXML属性

responseXML属性用于获取服务器的响应，表示为XML，这个对象可以解析为一个DOM对象。

E、status属性

Status属性用于返回服务器的HTTP状态码，常用的状态码如下