WEB20中AJAX应用的详细探讨

1、ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异 步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处 理，减轻服务器和带宽的负担，从而达到节约isp的空间及带宽租用成本的目的。我们以两个验证通行证帐号是否存在的例子来讲述ajax在实际中的应用：(1) 用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在；(2) 以xmldocument对彖方式返冋响应来验证金山通行证帐号是否存在；首先，我彳门需要用javascript来创建xmlhttprequest类向服务器发送一个http请 求，xmlhttprequest 类首先

2、由 internet explorer 以 activex 对象引入，被称为 xmlhttp。 后来mozilla、netscape> safari和其他浏览器也提供了 xmlhttprequest类，不过它们创 建xmlhttprequest类的方法不同。对于internet explorer浏览器，创建xmlhttprequest方法如下：xmlhttp_request = new activexobject(”msxml2xmlhttp.3.0”)； /3.0 或 4.0, 5.0xmlhttp_request = new activexobject("msxml2.xm

3、lhttp");xmlhttp_request = new activexobject("microsoft.xmlhttp");由于在不同internet explorer浏览器屮xmlhttp版本可能不一致，为了更好的兼容 不同版本的internet explorer浏览器，因此我们需要根据不同版本的internet explorer浏览 器来创建xmlhttprequest类,上面代码就是根据不同的internet explorer浏览器创建 xmlhttprequest 类的方法。对于 mozilla、netscape. safari 等浏览器，创建 xm

4、lhttprequest 方法如下：xmlhttp_request = new xmlh社prequest();如果服务器的响应没有xml mime-type header,某些mozilla浏览器可能无法正常工 作。为了解决这个问题，如果服务器响应的header不是text/xml,可以调用其它方法修改 该 headeroxmlhttp_request = new xmlhttprequest();xmlhttp_request.overridemimetype(ttext/xmr);在实际应用中，为了兼容多种不同版本的浏览器，一般将创建xmlhttprequest 类的方法写成如下形式：t

5、ryif( window.activexobject)for( vari = 5;i;i-)tryif( i=2)xmlhttp_request = new activexobject( "microsoft.xmlhttp");elsexmlhttp_request = new activexobject( "msxml2.xmlhttp.” + i + ".0"); xmlhttp_request.setrequestheader(hcontent-type，7，text/xmr,);xmlhttp_request.setrequesthe

6、ader(hcontent-type","gb2312");break;catch(e)xmlhttp_request = false;else if( window.xmlhttprequest)xmlhttp_request = new xmlhttprequest();if (xmlhttp_request.overridemimetype) xmlhttp_request.overridemimetype(,text/xmr);catch(e)xmlhttp_request = false;在定义了如何处理响应后，就要发送请求了。可以调用http请求类的o

7、pen（）和send（）方 法，如下所示：xmlhttp_request.open('ger, url, true); xmlhttp_request.send(null);open（）的第一个参数是http请求方式一get, post或任何服务器所支持的您想调用 的方式。按照http规范，该参数要大写;否则，某些浏览器（如firefox）可能无法处理请求。第二个参数是请求页面的url。第三个参数设置请求是否为异步模式。如果是true, javascript函数将继续执行，而 不等待服务器响应。这就是”ajax”中的“a”。用javascript来创建xmlhttprequest类向服

8、务器发送一个http请求后，接下来要 决定当收到服务器的响应后，需要做什么。这需要告诉http请求对象用哪一个javascript 函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的javascript的 函数名，如下所示：xmlhttp_request .on readystatecha nge =functionname;functionname是用javascript创建的函数名，注意不要写成functionname(), 当然我们也可以直接将javascript代码创建在onreadystatechange之后，例如：xmlhttp_request.o

9、nreadystatecha nge = functi on()/ javascript 代码段在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了, 函数才可以处理该响应。xmlhttprequest提供了 readystate属性來对服务器响应进行判 断。readystate的取值如下:0 （未初始化）1 （正在装载）2 （装载完毕）3 (交互中)4(完成)所以只有当readystate=4时，一个完整的服务器响应已经收到了，函数才可以处理该 响应。具体代码如下：if (http_request.readystate = 4) /收到完整的服务器响应 else /没有收

10、到完整的服务器响应当readystate=4时，一个完整的服务器响应已经收到了，接着，函数会检查http 服务器响应的状态值。完整的状态取值可参见w3c文档。当http服务器响应的值为200 吋，表示状态正常。在检查完请求的状态值和响应的http状态值后，就可以处理从服务器得到的数据了。 有两种方式可以得到这些数据：(1) 以文本字符串的方式返回服务器的响应(2) 以xmldocument对彖方式返冋响应实例一：用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在首先，我们登陆网易通行证注册页面，可以看到检测用户名是否存在是将用户名提交给 checkssn.jsp页面进行判断，格式为

11、： n.j sp?username=用户名根据上面讲到的方法，我们可以利用ajax技术对网易通行证用户名进行检测：第一步：新建一个基于xhtml标准的网页，在区域插入javascript函数如下：在区域建立一个文本框，id为163id再建一个id为messsge的空白区域用來显示返回字符串(也可以通过javascript两数 截取一部分字符串显示)：这样，一个基于ajax技术的用户名检测页面就做好了，不过这个页面将返回服务器响 应生成页面的所有字符串，当然还可以对返回的字符串进行一些操作，便于应用到不同的需 实例二：以xmldocument对象方式返回响应来验证金山通行证帐号是否存在 在上血的

12、例子中，当服务器对http请求的响应被收到后，我们会调用请求对象的reponsetext属性。该属性包含了服务器返冋响应文件的内容。现在我们以xmldocument 对象方式返冋响应，此时将不再需要reponsetext属性而使用responsexml属性。首先登陆金山通行证注册页而，我们发现金山通行证用户名的检测方式为： xml 数据： isexisteduid2当result值为时表示此用户名已被注册，当result值为2时表示此用户名尚未注册， 因此通过对result值的判断可以知道用户名是否被注册。对上例代码进行修改：首先找到docume nt.geteleme ntbyld('

13、;message').i nn erhtml = xmlhttp_request.resp on setext;改为：var response = xmlhttp_request.responsexml.documentelement;var result = response.getelementsbytagnamecresult')o.firstchild.data;/b回 result节点数据if(result =-2)document.getelementbyld('message').innerhtml ="用户名 "+docume

14、nt.getelementbyld('163id,).value+"尚未注册”；else if(result =-1)document.getelementbyld('message').innerhtml = ”对不起,用户名"+document.getelementbyld('163id').value+"已经注册”；通过以上两个实例说明了 ajax的客户端基础应用，釆用的是网易和金山现成的 服务器端程序，当然为了开发合适自己页血的程序，还需要对自己编写服务器端程序，这设 计到程序语言及数据库的操作，对于有一定程序基础的

15、读者一定不是很难的事情，本文着重 讨论了客户端ajax的应用体验，广大读者对以根据本文讲的原理结合各种样式表现手法作 出绚丽多彩的应用，希望本文能够起到抛砖引玉的作用。附录（一）http 1.1支持的状态代码100 continue初始的请求已经接受，客户应当继续发送请求的其余部分101 switching protocols服务器将遵从客户的请求转换到另外一种协议200 0k 一切正常，对get和post请求的应答文档跟在后面。201 created服务器已经创建了文档，location头给出了它的url。202 accepted已经接受请求，但处理尚未完成。203 non-authorit

16、ative information文档已经正常地返冋，但一些应答头可能不正确， 因为使用的是文档的拷贝204 no content没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新 页面，而servlet可以确定用户文档足够新，这个状态代码是很有用的205 reset content没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览 器清除表单输入内容206 partial content客户发送了一个带有range头的get请求，服务器完成了它300 multiple choices客户请求的文档可以在多个位置找到，这些位置己经在返回的文档内 列出。如果服务器要提出优先选择

17、，则应该在location应答头指明。301 moved permanently客户请求的文档在其他地方，新的url在location头中给 出，浏览器应该自动地访问新的url。302 found类似于301,但新的url应该被视为临时性的替代，而不是永久性的。303 see other类似于301/302,不同之处在于，如果原來的请求是post, location 头指定的重定向目标文档应该通过get提取304 not modified客户端有缓冲的文档并发出了一个条件性的请求（一般是提供 if-modified-since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的 文

18、档还可以继续使用。305 use proxy客户请求的文档应该通过location头所指明的代理服务器提取307 temporary redirect和302(found)相同。许多浏览器会错误地响应302应答进行 重定向，即使原来的请求是post,即使它实际上只能在post请求的应答是303吋才能 重定向。由于这个原因，http 1.1新增了 307,以便更加清除地区分几个状态代码：当出 现303应答时，浏览器可以跟随重定向的get和post请求;如果是307应答，则浏览器 只能跟随对get请求的重定向。400 bad request请求出现语法错误。401 unauthorized客户试图

19、未经授权访问受密码保护的页面。应答中会包含一个 www-authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的 authorization头后再次发出请求。403 forbidden资源不可用。404 not found无法找到指定位置的资源405 method not allowed 请求方法(get、post、head、delete、put、trace 等)对指定的资源不适用。406 not acceptable指定的资源已经找到，但它的mime类型和客户在accpet头中所 指定的不兼容407 proxy authentication required类似于40

20、1,表示客八必须先经过代理服务器的授 权。408 request timeout在服务器许可的等待时间内，客户一直没有发出任何请求。客 户可以在以后重复同一请求。409 conflict通常和put请求有关。由于请求和资源的当前状态相冲突，因此请求不 能成功。410 gone所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。 它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知 的原因文档不可用。411 length required服务器不能处理请求，除非客户发送一个content-length头。412 precondition failed

21、请求头屮指定的一些前提条件失败413 request entity too large目标文档的大小超过服务器当前愿意处理的大小。如果 服务器认为自己能够稍后再处理该请求，则应该提供一个retry-after头414 request uri too long uri 太长416 requested range not satisfiable服务器不能满足客户在请求中指定的range头500 internal server error服务器遇到了意料不到的情况，不能完成客户的请求501 not implemented服务器不支持实现请求所需要的功能。例如，客户发出了一个 服务器不支持的put请求502 bad gateway服务器作为网关或者代理时，为了完成请求访问下一个服务器，但 该服务器返回了非法的应答503 service unavailable服务器由于维护或者负载过重未能应答。例如