AJAX开发简略 (第二部分)(2)

  有些版本的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。

  open的第二个参数是目标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=onD、处理服务器返回的信息
  在第二步我们已经指定了响应处理函数,这一步,来看看这个响应处理函数都应该做什么。

  首先,它要检查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以字符串的形式显示出来: <script language="javascript"> var http_request = false; function send_request(url) {//初始化、指定处理函数、发送请求的函数 http_request = false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest) { //Mozilla 浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) {//设置MiME类别 http_request.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { // IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { // 异常,创建对象实例失败 window.alert("不能创建XMLHttpRequest对象实例."); return false; } http_request.onreadystatechange = processRequest; // 确定发送请求的方式和URL以及是否同步执行下段代码 http_request.open("GET", url, true); http_request.send(null); } // 处理返回信息的函数 function processRequest() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回,开始处理信息 alert(http_request.responseText); } else { //页面不正常 alert("您所请求的页面有异常。"); } } } </script> 7.3、简单的示例
  接下来,我们利用上面的开发框架来做两个简单的应用。

A、数据校验
  在用户注册的表单中,经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open的弹出窗口,或者window. showModalDialog的对话框。不过,这两个都需要打开窗口。采用AJAX后,采用异步方式直接将参数提交到服务器,用window.alert将服务器返回的校验信息显示出来。代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wfzjww.html