简单的ajax实现

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

1。最简单的ajax实现。

这里,我们通过一步步的解析,来形成一个发送和接收xmlhttprequest请求的程序框架。ajax实质上也是遵循request/server模式,所以这个框架基本的流程也是:对象初始化à发送请求à服务器接收à服务器返回à客户端接收à修改客户端页面内容。只不过这个过程是异步的。

a、初始化对象并发出xmlhttprequest请求

为了让javascript可以向服务器发送http请求,必须使用xmlhttprequest对象。使用之前,要先将xmlhttprequest对象实例化。之前说过,各个浏览器对这个实例化过程实现不同。ie以activex控件的形式提供,而mozilla等浏览器则直接以xmlhttprequest类的形式提供。为了让编写的程序能够跨浏览器运行,要这样写:

if (window.xmlhttprequest) { // mozilla, safari, ...http_request = new xmlhttprequest();}else if (window.activexobject) { // iehttp_request = new activexobject("microsoft.xmlhttp");}

有些版本的mozilla浏览器处理服务器返回的未包含xml mime-type头部信息的内容时会出错。因此,要确保返回的内容包含text/xml信息。

http_request = new xmlhttprequest();http_request.overridemimetype('text/xml');

b、指定响应处理函数

接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给xmlhttprequest对象的onreadystatechange属性就可以了。比如:

http_request.onreadystatechange = processrequest;

需要指出的时,这个函数名称不加括号,不指定参数。也可以用javascript即时定义函数的方式定义响应函数。比如:

http_request.onreadystatechange = function() { };

c、发出http请求

指定响应处理函数之后,就可以向服务器发出http请求了。这一步调用xmlhttprequest对象的open和send方法。

http_request.open('get', 'http://www.example.org/some.file', true);http_request.send(null);

open的第一个参数是http请求的方法,为get、post或者head。

pen的第二个参数是目标url。基于安全考虑,这个url只能是同网域的,否则会提示“没有权限”的错误。这个url可以是任何的url,包括需要服务器解释执行的页面,不仅仅是静态页面。目标url处理请求xmlhttprequest请求则跟处理普通的http请求一样,比如jsp可以用request.getparameter(“”)或者request.getattribute(“”)来取得url参数值。

open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为true,则不会继续执行,直到服务器返回信息。默认为true。

按照顺序,open调用完毕之后要调用send方法。send的参数如果是以post方式发出的话,可以是任何想传给服务器的内容。不过,跟form一样,如果要传文件或者post内容给服务器,必须先调用setrequestheader方法,修改mime类别。如下:

http_request.setrequestheader(“content-type”,”application/x-www-form-urlencoded”);

这时资料则以查询字符串的形式列出,作为sned的参数,例如:

name=value&anothername=othervalue&so=on

d、处理服务器返回的信息

在第二步我们已经指定了响应处理函数,这一步,来看看这个响应处理函数都应该做什么。

首先,它要检查xmlhttprequest对象的readystate值,判断请求目前的状态。参照前文的属性表可以知道,readystate值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下:

if (http_request.readystate == 4) {// 信息已经返回,可以开始处理} else {// 信息还没有返回,等待}

服务器返回信息后,还需要判断返回的http状态码,确定返回的页面没有错误。所有的状态码都可以在w3c的官方网站上查到。其中,200代表页面正常。

if (http_request.status == 200) {// 页面正常,可以开始处理信息} else {// 页面有问题}

xmlhttprequest对成功返回的信息有两种处理方式:

responsetext:将传回的信息当字符串使用;

responsexml:将传回的信息当xml文档使用,可以用dom处理。

e、一个初步的开发框架

总结上面的步骤,我们整理出一个初步的可用的开发框架,供以后调用;这里,将服务器返回的信息用window.alert以字符串的形式显示出来:

一

无标题页

用户名:

好文要顶关注我收藏该文与我联系

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