Ajax入门 基础概念与方法

======================================================
注：本文源代码点此下载
======================================================

xmlhttprequest对象

除ie以外所有的浏览器都支持直接使用xmlhttprequest对象。而ie是通过创建activexobject来创建类似的对象。这里给出一种包装方法使得ie5以上的ie版本也能具有xmlhttprequest对象,这样我们在使用xmlhttprequest对象的时候可以使用同一的创建方法:

(来自《精通javascript》)

if (typeof xmlhttprequest == 'undefined') {

xmlhttprequest = function() {

return new activexobject(

navigator.useragent.indexof("msie 5") >= 0 ? "microsoft.xmlhttp" : "msxml2.xmlhttp"

);

}

}

发送请求

get请求

只支持发送串行化数据(下文会有具体例子)

以下是get请求发送的简单例子

// 创建对象

var xml = new xmlhttprequest();

// 初始化

xml.open("get", "test.html", true);

// 发送

xml.send();

post请求

post请求发送方式与get请求发送方式类似,下文具体。

请求状态

我们可以通过xmlhttprequest对象中的readystate监视请求的状态。readystate是一个整型值,各自代表的状态是:

0 = 未初始化

1 = 已初始化 (有些书将此状态注为下载,实际测试发现初始化后、未发送请求之前,状态已经修改为1)

2 = 下载已完成

3 = 交互的(响应被部分接收)

4 = 完成

在我们的ajax应用中,一般只需要使用4-完成状态。

当请求状态变化时,会触发onreadystatechange事件,我们处理ajax响应就是为这个事件绑定处理函数。

客户端完整示例

以下结合上述内容,写一个完整的客户端ajax示例

var xml = new xmlhttprequest();

// 未初始化 xml.readystate 为 0

xml.open("post", "test.html", true);

// 已初始化 xml.readystate 为 1

xml.setrequestheader("content-type", "application/x-www-form-urlencoded");

if (xml.overridemimetype)

xml.setrequestheader("connection", "close");

// 绑定状态变化事件处理函数

xml.onreadystatechange = function() {

alert(xml.readystate);

}

xml.send("abc");

数据对象的格式

根据数据对象的特点,我们可以选择合适的发送方式。

串行化

利用http get标准请求,即类似: http://www.zhengchuyu.cn/?name=zcy&nick=donald 的传输方式。

我们需要有一个串行化函数,并且是针对表单元素和键值对对象设计的。(不能串行化多选按钮)

function serialize(a) {

var s = [];

if (a.constructor == array) {

// 表单元素数组

for (var i = 0; ia.length; i++) {

s.push( a[i].name + "=" + encodeuricomponent(a[i].value));

}

}

else {

// 键值对对象

for (var j in a)

s.push(j + "=" + encodeuricomponent(a[j]));

}

return s.join("&");

}

get请求发送串行化数据

var xml = new xmlhttprequest();

xml.open("get", "test.html?" + serialize(data), true);

xml.send();

post请求发送串行化数据

var xml = new xmlhttprequest();

xml.open("post", "test.html", true);

// 设置content-type头部信息,告诉服务器如何解析我们发送的数据

xml.setrequestheader("content-type", "application/x-www-form-urlencoded");

// 保证浏览器发送的串行化数据长度正确

if (xml.overridemimetype)

xml.setrequestheader("connection", "close");

// 串行化数据发送

xml.send(serialize(data));

xml

后文详述。

json

后文详述

http响应

上文已经提到可以通过判断readystate的值得知请求状态,我们可以知道客户端是否已经获得了服务器响应。但是服务器并不是每一次都能正常响应,这时我们需要通过服务器响应代码(保存在返回结果对象的status变量中)判断响应情况。

状态码

成功响应 200～300

未修改响应 304

本地文件 无状态码

另外有一个特殊情况(来自《精通javascript》,没有验证),safari浏览器中,如果文档自上次请求未曾修改过,会返回状态码“undefined”,比较怪异。

以下给出一判断xmlhttprequest对象是否处于成功响应状态的兼容函数

function httpsuccess(r) {

try {

return !r.status && location.protocol == "file:"

|| (r.status >= 200 && r.status300)

|| r.status == 304

|| navigator.useragent.indexof("safari") >= 0 && typeof r.status == "undefined";

}

catch(e) {

return false;

}

}

超时检查

超时检查比较简单,就是用一个变量记录是否超时,在send发送之前用一个settimeout设定在某个时间段后把该变量标记为超时,并在状态改变响应函数中检测这一变量就行了。

服务器返回数据

服务器可以返回任何格式的数据。一般比较常用的是xml、html、javascript/json。

获取数据

获取数据通过xmlhttprequest的两个重要属性:responsexml和responsetext。

responsexml 可以获取xml,即服务器明确指出“content-type:text/xml”时才可以由这个属性获取。

responsetext 可以获取html和javascript类型的数据。

指定类型解析数据

以下是一个按指定类型解析数据的函数

(来自《精通javascript》,为了便于理解,稍有改动)

// type可选值:xml, script, text, html 默认值:空

function httpdata(r, type) {

var ct = r.getresponseheader("content-type");

var data = !type && ct && ct.indexof("xml") >= 0;

data = (type == "xml" || data) ? r.responsexml : r.responsetext;

if (type == "script")

eval.call(window, data);

return data;

}

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/