ajax研究

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

ajax主要应用xmlhttprequest与服务器进行异步调用。

关于xmlhttprequest技术的文章,请参阅:

http://www.xmlhttp.cn/manual/xmlhttprequest.members.html

标准ajax交互

不同于标准web客户中所用的标准请求/响应方法,ajax应用的做法稍有差别。

1. 一个客户端事件触发一个ajax事件。从简单的onchange事件到某个特定的用户动作,很多这样的事件都可以触发ajax事件。可以有如下的代码:

2. 创建xmlhttprequest对象的一个实例。使用open()方法建立调用,并设置url以及所希望的http方法(通常是get或post)。请求实际上通过一个send()方法调用触发。可能的代码如下所示:

var xmlhttp;

function validateemail() {

var email = document.getelementbyid("email");

var url = "validate?email=" + escape(email.value);

if (window.activexobject) {

xmlhttp = new activexobject("microsoft.xmlhttp");

}

else if (window.xmlhttprequest) {

xmlhttp = new xmlhttprequest();

}

xmlhttp.open("get", url);

xmlhttp.onreadystatechange = callback;

xmlhttp.send(null);

}

3. 向服务器做出请求。可能调用servlet、cgi脚本,或者任何服务器端技术。

4. 服务器可以做你想做的事情,包括访问数据库,甚至访问另一个系统。

5. 请求返回到浏览器。content-type设置为text/xml——xmlhttprequest对象只能处理text/html类型的结果。在另外一些更复杂示例中,响应可能涉及更广,还包括javascript、dom管理以及其他相关的技术。需要说明,你还需要设置另外一些首部,使浏览器不会在本地缓存结果。为此可以使用下面的代码:

response.setheader("cache-control", "no-cache");

response.setheader("pragma", "no-cache");

6. 在这个示例中,xmlhttprequest对象配置为处理返回时要调用callback()函数。这个函数会检查xmlhttprequest对象的readystate属性,然后查看服务器返回的状态码。如果一切正常,callback()函数就会在客户端上做些有意思的工作。以下就是一个典型的回调方法:

function callback() {

if (xmlhttp.readystate == 4) {

if (xmlhttp.status == 200) {

//do something interesting here

}

}

}

可以看到,这与正常的请求/响应模式有所不同,但对web开发人员来说,并不是完全陌生的。显然,在创建和建立xmlhttprequest对象时还可以做些事情,另外当“回调”函数完成了状态检查之后也可以有所作为。一般地,你会把这些标准调用包装在一个库中,以便在整个应用中使用,或者可以使用web上提供的库。这个领域还很新,但是在开源社区中已经如火如荼地展开了大量的工作。

通常,web上提供的各种框架和工具包负责基本的连接和浏览器抽象,有些还增加了用户界面组件。有一些纯粹基于客户,还有一些需要在服务器上工作。这些框架中的很多只是刚开始开发,或者还处于发布的早期阶段,随着新的库和新的版本的定期出现,情况还在不断发生变化。这个领域正在日渐成熟,最具优势的将脱颖而出。一些比较成熟的库包括libxmlrequest、rslite、sarissa、javascript对象注解(javascript object notation,json)、jsrs、直接web远程通信(direct web remoting,dwr)和rails on ruby。这个领域日新月异,所以应当适当地配置你的rss收集器,及时收集有关ajax的所有网站上的信息!

2.4 get与post

你可能想了解get和post之间有什么区别,并想知道什么时候使用它们。从理论上讲,如果请求是幂等的就可以使用get,所谓幂等是指多个请求返回相同的结果。实际上,相应的服务器方法可能会以某种方式修改状态,所以一般情况下这是不成立的。这只是一种标准。更实际的区别在于净荷的大小,在许多情况下,浏览器和服务器会限制url的长度url用于向服务器发送数据。一般来讲,可以使用get从服务器获取数据;换句话说,要避免使用get调用改变服务器上的状态。

一般地,当改变服务器上的状态时应当使用post方法。不同于get,需要设置xml- httprequest对象的content-type首部,如下所示:

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

与get不同,post不会限制发送给服务器的净荷的大小,而且post请求不能保证是幂等的。

你做的大多数请求可能都是get请求,不过,如果需要,也完全可以使用post。

2.5 远程脚本

我们已经介绍了ajax,下面来简单谈谈远程脚本。你可能会想:“ajax有什么大不了的?我早就用iframe做过同样的事情。”实际上,我们自己也曾用过这种方法。这在以前一般称为远程脚本(remote scripting),很多人认为这只是一种修修补补。不过,这确实提供了一种能避免页面刷新的机制。

2.5.1 远程脚本概述

基本说来,远程脚本是一种远程过程调用类型。你可以像正常的web应用一样与服务器交互,但是不用刷新整个页面。与ajax类似,你可以调用任何服务器端技术来接收请求、处理请求并返回一个有意义的结果。正如在服务器端有很多选择,客户端同样有许多实现远程脚本的选择。你可以在应用中嵌入flash动画、java applet,或者activex组件,甚至可以使用xml-rpc,但是这种方法过于复杂,因此除非你使用这种技术很有经验,否则这种方法不太合适。实现远程脚本的通常做法包括将脚本与一个iframe(隐藏或不隐藏)结合,以及由服务器返回javascript,然后再在浏览器中运行这个javascript。

microsoft提供了自己的远程脚本解决方案,并聪明地称之为microsoft远程脚本(microsoft remote scripting,msrs)。采用这种方法,可以像调用本地脚本一样调用服务器脚本。页面中嵌入java applet,以便与服务器通信,.asp页面用于放置服务器端脚本,并用.htm文件管理客户端的布局摆放。在netscape和ie 4.0及更高版本中都可以使用microsoft的这种解决方案,可以同步调用,也可以异步调用。不过,这种解决方案需要java,这意味着可能还需要附加的安装例程,而且还需要internet information services(iis),因此会限制服务器端的选择。

brent ashley为远程脚本创建了两个免费的跨平台库。jsrs是一个客户端javascript库,它充分利用dhtml向服务器做远程调用。相当多的操作系统和浏览器上都能使用jsrs。如果采用一些常用的、流行的服务器端实现(如php、python和perl cgi),jsrs一般都能在网站上安装并运行。ashley免费提供了jsrs,而且还可以从他的网站(www.ashleyit.com

/rs/main.htm)上得到源代码。

如果你觉得jsrs太过笨重,ashley还创建了rslite,这个库使用了cookie。rslite仅限于少量数据和单一调用,不过大多数浏览器都能提供支持。

2.5.2 远程脚本的示例

为了进行比较,这里向你展示如何使用iframe来实现类似ajax的技术。这非常简单,而且过去我们就用过这种方法(在xmlhttprequest问世之前)。这个示例并没有真正调用服务器,只是想让你对如何使用iframe实现远程脚本有所认识。

这个示例包括两个文件:iframe.html(见代码清单2-2)和server.html(见代码清单2-3)。server.html模拟了本应从服务器返回的响应。

代码清单2-2 iframe.html文件

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