AJAX和XmlHttpRequest下的WEB开发

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

一、 引言

在xmlhttprequest对象和ajax给用户和开发者带给巨大好处的同时,也许还有一些问题你没有考虑到-但是的确到了值得引起每个人注意的时候了。

甚至非常讨厌的人也都喜欢xmlhttprequest,因为它提供给程序员真正梦想的功能。也正是因为有了这样的新技术,web应用软件开始变得具有象桌面应用软件相似的行为。如今,问题总是象"假定为……"那样地简单,这把幼稚的终端用户从需要了解服务端、客户、回寄和提交按钮-"提交?提交给什么东西?"-等一系列问题的苦海中解脱出来。

最近,无数可怕的案例爆炸式出现在web上,它们充分说明为什么远程脚本(或称"ajax",如果你喜欢的话)是自从单像素点gif技术以来最伟大的事情。事实上,成串的酷极的、有用的应用软件正日益增长,象站点flickr,google maps,the weborb presentation server等所宣传的那样。

这些站点和另外许多地方大肆宣传ajax的能力。公正地说,这种技术在提高在线操作的质量方面的确有相当的潜力来。然而,尽管它有许多的优点,但是这个神圣的web通讯大杯中嗅起来仍然有一股奇怪的味道;就象摆动在我们面前的啤酒和巧克力,仍有一个邪恶的方面存在于其中-表面上看起来是多么地纯洁和天真。

这种潜在的邪恶存在于用户熟悉的操作界面背后的重要的功能性差距之中。你们当中许多人可能已经使用互联网近10年了,并且你知道它怎样工作:你到处点按鼠标,填充表单,修改你的输入;当做完所有这些,你可以点击提交按钮。你们都了解这些精华经验-它们从因特网的一代传递到新的一代,如:"不要点按提交按钮两次-否则,表单可能要提交两次"或"等待稍微长一些时间,它正在处理"或"在你提交了表单后,不要点按'向后'按钮",等等。

但是既然现在ajax已登堂入室,那么你可以把基本知识抛出窗外。简直是"什么东西都可以"-突然间出现一种新的可被跟踪的数据-可以在任何时候发送出去,而不需要用户的任何了解,甚至用户还不了解这竟然是可能发生的。每一位骷恳桓鍪蟊暌贫恳幌碌惆词蟊辏恳淮瓮6伲寄鼙徊痘癫⒎⑺偷絎eb服务器,而你对此无能为力。

二、 xmlhttprequest:利与弊

就象许多技术存在利弊一样,产生这种技术的目的是为了利用其优点。直到如今,xmlhttprequest带给人们如此多的优点,诸如不需回滚的输入校验,文本区域的拼写检查以及gmail等等,简直几乎为人们捧之为神圣。基于ajax技术创建的接口使用起来非常有趣,甚至编码更有趣味。简直很难令人相信,这样一种神奇的技术竟然能够做错事情。

但是,即使还没有发现存在巨大的安全漏洞,该xmlhttprequest也有可能因为其外在的优雅而失败。它很可能会失败在"用户轮廓图"-用于更好的描述之目的-的应用之中。当前,用户轮廓图帮助web站主侦探趋势,跟踪网页浏览习惯并帮助消除使用性问题。但是直到现在,开发人员还只能分析寄回的数据-用户决定让服务器取得的数据并为提交后得到处理而高兴。

但是通过一种微秒的手段,这种能量平衡会发生易位。通过使用ajax技术,一个用户的行为可以被持续地并小心地监控。因为它能被做,所以它将被做;这就带给人们一个相当头疼的问题,而不仅仅是浪费带宽、成兆的垃圾信息以及更慢的网页装载次数的问题。

设想一下,这里仅是举例说明问题,你把一部新购买的ipod掉到地上去了,结果它停止了工作。抱着希望得到免费的替换的想法,你发了一封电子邮件给apple公司的售后服务部,信中说:"我刚刚买了一个新牌子的ipod。我不小心把它掉到了楼梯上,它突然停止工作了。"之后,你决定删去第二句以支持你的理由。太晚了!如果该网站使用了ajax技术,你的反映可能早就被杀死在了你的抱怨桌前!

或者-一个更恶意破坏性的例子-请考虑这种情况:大多数人都有一个或两个用户名/口令组合以用于他们的"并不重要"的站点,如新闻站点、博客、论坛等。他们可能还有几个保留的这种组合以用于更敏感的网站-银行业务,web邮件和工作帐号等。在一个给定页面中输入不正确的登录细节是非常普通和极易犯的错误。虽然他们以前形成的习惯的影响应对此负主要责任,但是在人们点击提交按钮前常常是已经意识到他们所做的事情的。

不幸的是,一个ajax击键记录程序实现起来相当麻烦。使用如此的一个击键记录程序,就可以用代码来收集不正确的登录尝试,然后针对一系列"重要的"站点对之进行试验-当然,也可以使用xmlhttprequest对象。

三、 "恶意"暗示

公平地说,上面引用的大多数的"恶意"应用软件都能被合理地加以处理,即使在xmlhttprequest技术出现以前。的确,request对象是一种相对于以前的iframe技术更为优雅的成功提交表单数据的方法。但是,xmlhttprequest以一种更为自然的方式工作,这种方式简直可以能使客户端与服务器端的交互差别逐渐消失。

具有讽刺意味的是,直到最近,随着firefox web浏览器的不断流行,才使得较多用户真正了解到可以由web客户端储存和控制的信息的深度和广度。随着广泛采用象greasemonkey,web开发者扩展以及cookie编辑器这样的工具,人们比以往任何时候更为确信,如果问题发生在客户端,那么责任一般应归咎于该用户。

但是现在,即使象我们这样狂妄的人也不再只是右击鼠标,看一下源代码,然后就能确信正在发生的事情了。请考虑下面的onreadystatechange javascript语句,运行它是为了响应一个xmlhttprequest:

xmlreq.onreadystatechange =

{

if( xmlreq.readystate == 4 )

{

eval( xmlreq.responsetext );

}

}

上面的代码执行包含在来自于xmlhttprequest的响应中的javascript代码。换句话说,有可能出现这种情况:即使一个页面加载完毕,也有可能在后台再进行添加或修改javascript函数和代码!因此就算你观察该页面代码的源代码-它可能发送了键击或鼠标移动事件到web服务器,你也无法确信你所见的代码是当前执行的唯一代码。把这些特征与一些令人胆战心惊的困惑结合起来,那么你可以看到,恶意目的与xmlhttprequest对象相结合,怎么不能实现web客户的信息窃取!

四、 还不确信?

你还不感到害怕并因此而愤怒吗?还不准备愤起并删去你的浏览器中的xmlhttprequest代码吗?那么,好,也许本文强势的措词论证会吓倒了你;那么在游戏"fonzie寻宝记"(the search for 's treasure。译者注:在google中输入这几个关键词,你肯定能找到这个在线文本游戏,本人没有深入试验。难道这个小东西那么可爱的面孔下竟然埋伏着上面所述的那么恐怖的……)中-你能够救出fonzie吗?

通过使用很有艺术的命令行接口,穿过充满文本的门厅寻找丢失的arthur 'fonzie' fonzarelli宝藏。祝你幸运,但是请记住…虽然它看上去就象无危害的客户交互-你每作四次移动,该游戏通过xmlhttprequest对象发送一个请求到服务器上并保存你的移动。永远记住:不要做一个印刷工(don't make a typo);不要尝试一些愚蠢的东西如"eat jukebox";不要在游戏中输入一个用户名和口令字;否则……

xmlhttprequest详解

/*

*author jouy.lu

*/

var xmlhttp; //首先定义一个全局域变量来保存对象的引用;

function createxmlhttprequest(){ //该方法用来创建xmlhttprequest对象的实例.

if(window.activexobject){

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

}else if(window.xmlhttprequest){

xmlhttp = new xmlhttprequest();

}

}

考虑到兼容浏览器的问题:建议的写法如下:

var xmlhttp;

function createxmlhttp(){

if(window.xmlhttprequest){

xmlhttp = new xmlhttprequest();

if (xmlhttp.overridemimetype){

xmlhttp.overridemimetype("text/xml");

}

}

else if(window.activexobject){

try{

xmlhttp = newactivexobject("msxml2.xmlhttp");

}catch(e){

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

}

}

if(!xmlhttp){

window.alert("your broswer not support xmlhttprequest!");

}

return xmlhttp;

}

/************************************xmlhttprequest的标准操作*********************

abort():终止当前请求;

getallresponseheaders():把http所以响应首部作为键/值对返回;

getresponseheader("header");返回指定首部的串值;

open("post/get/put","url");建立对服务器的调用,url参数可以是相对url或绝对url,该方法还包含了另三个可选参数;

send(content);向服务器发送请求;

setrequestheader("header","value");把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。

注:

void open(string method, string url, boolean asynch, string username, string password):这个方法会建立对服务器的调用。

要提供调用的特定方法(get、post或put),还要提供所调用资源的url。另外还可以传递一个boolean值,指示这个调用是异步还是同步的,

默认值为true,这表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。由于异步调用是使用ajax

的主要优点之一,所以倘若将这个参数设置为false,从某种程度上讲与使用xmlhttprequest对象的初衷不太相符。在某些情况下这,个参数

设置为false也是有用的,比如在持久存储页面之前你可能想先验证用户的输入。最后两个参数不说自明,允许你指定一个特定的用户名和口令。

void send(content):这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待,直到接收到响应

为止。参数是可选的,可以是一个dom对象的实例、一个输入流,或者是一个串。传入这个对象的内容会作为请求体的一部分发送。

void setrequestheader(string header, string value):这个方法为http请求中一个给定的首部设置值。它有两个参数,第一个串表

示要设置的首部,第二个串表示要在首部中放置的值。需要说明,这个方法必须在open()之后才能调用。在所有这些方法中,最有可能用到

的就是open()和send()。xmlhttprequest对象还有许多属性,在设计ajax交互时这些属性非常有用。

void abort(): 顾名思义,这个方法就是要停止请求。

string getallresponseheaders(): 这个方法的核心功能对web应用开发人员应该很熟悉了,它会返回一个串,其中包含http请求的所有响

应首部。首部包括content-length、date和uri。

string getresponseheader(string header):这个方法与getallresponseheaders()是对应的,不过它有一个参数来表示你希望得到哪一个

首部值,并且会把这个值作为一个串返回。

******************************/

/*******************************标准xmlhttprequest属性**********************

onreadystatechange:每个状态改变时都会触发这个事件处理器,通常会调用一个javascript函数。

readystate:请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载, 2 = 已加载, 3 = 交互中, 4 = 完成。

responsetext:服务器的响应,表示为一个串。

responsexml:服务器的响应,表示为xml。这个对象可以解析为一个dom对象。

status:服务器的http状态码(200对应ok,404对应not found(未找到),等等).

statustext:http状态码的相应文本(ok或not found(未找到)等等)。

***************************************************************************

*/

/*********************来看看到底要怎么才能发送请求*******

使用xmlhttprequest对象发送请求的基本步骤如下:

1.得到xmlhttprequest对象实例的一个引用,为此,可以创建一个新的实例,也可以访问包含有

xmlhttprequest实例的一个变量。

2.告诉xmlhttprequest对象,哪个函数会处理xmlhttprequest对象状态的改变。为此要把对象的

onreadystatechange属性设置为指向一个javascript函数的指针。

3. 指定请求的属性。xmlhttprequest对象的open()方法会指定将发出的请求。open()方法取3个

参数:一个是指示所用方法(通常是get或post)的串,另一个是表示目标资源url的串,还有一

个boolean值,指示请求是否是异步的。

4. 将请求发送给服务器。xmlhttprequest对象的send()方法会把请求传送到指定的目标资源。

send()方法接受一个参数,这通常是一个串或一个dom对象。这个参数会作为请求体的一部分传送到

目标url.向send()方法提供参数时,要确保open()中指定的方法是post。如果没有数据要作为请求体

的一部分发送,则使用null。

异步方式给用户带来的体验:(我想程序员看到这段解释,心里真的很爽!)

对服务器的请求是异步发送的,因此浏览器可以继续响应用户输入,并在后台等待服务器的响应。

如果选择同步操作,而且倘若服务器的响应要花好几秒才能到达,浏览器就会表现得很迟钝,在

等待期间不能响应用户的输入。这样一来,浏览器好像被冻住一样,无法响应用户输入,而异步

做法可以避免这种情况,从而让最终用户有更好的体验,尽管这种改善很细微,但确实很有意义。

这样用户就能继续工作,而且服务器会在后台处理先前的请求。能与服务器通信而不打断用户的

工作流,这样就可以采用很多技术来改善用户体验。例如,假设有一个验证用户输入的应用。用

户在输入表单上填写各个域时,浏览器可以定期地向服务器发送表单值来进行验证,此时并不打

断用户,他还可以继续填写余下的表单域。如果某个验证规则失败,用户会立即得到通知,而不

必等表单真正发送到服务器进行处理时才知道有错误,这就能大大节省用户的时间,也能减轻服

务器上的负载压力,因为不必在表单提交不成功时完全重建表单的内容。

下面是说明安全问题的:

xmlhttprequest对象要受制于浏览器的安全“沙箱”。xmlhttprequest对象请求的所有资源

都必须与调用脚本在同一个域(domain)内。这个安全限制使得xmlhttprequest对象不能请

求脚本所在域之外的资源。这个安全限制的强度如何因浏览器而异(见图2-5)。internet explorer

会显示一个警告,指出可能存在一个安全风险,但是用户可以选择是否继续发出请求。firefox则

会断然停止请求,并在javascript控制台显示一个错误消息。firefox确实提供了一些javascript技巧,

使得xmlhttprequest也可以请求外部url的资源。不过,由于这些技术针对特定的浏览器,最好不要用,

而且要避免使用xmlhttprequest访问外部url。

**********************************************************

*/

xmlhttprequest成员

属性

onreadystatechange*

指定当readystate属性改变时的事件处理句柄。只写

readystate

返回当前请求的状态,只读.

responsebody

将回应信息正文以unsigned byte数组形式返回.只读

responsestream

以ado stream对象的形式返回响应信息。只读

responsetext

将响应信息作为字符串返回.只读

responsexml

将响应信息格式化为xml document对象并返回,只读

status

返回当前请求的http状态码.只读

statustext

返回当前请求的响应行状态,只读

* 表示此属性是w3c文档对象模型的扩展.

方法

abort

取消当前请求

getallresponseheaders

获取响应的所有http头

getresponseheader

从响应信息中获取指定的http头

open

创建一个新的http请求,并指定此请求的方法、url以及验证信息(用户名/密码)

send

发送请求到http服务器并接收回应

setrequestheader

单独指定请求的某个http头

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