Ajax 完整教程1-3(转)

2018-01-03 19:54:00来源:CSDN作者:qq_21065779人点击

分享

Ajax完整教程-(一)

Ajax 简介

Ajax HTMLJavaScript™技术、DHTML DOM 组成,这一杰出的方法可以将笨拙的 Web界面转化成交互性的 Ajax应用程序。它是一种构建网站的强大方法。

Ajax 尝试建立桌面应用程序的功能和交互性,与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件,不过是在 Web 应用程序中。

Ajax 应用程序所用到的基本技术:

1.     HTML用于建立 Web 表单并确定应用程序其他部分使用的字段。 • JavaScript代码是运行 Ajax

2.     应用程序的核心代码,帮助改进与服务器应用程序的通信。 • DHTML Dynamic HTML,用于动态更新表单。我们将使用

3.     divspan和其他动态 HTML 元素来标记 HTML文档对象模型 DOM 用于(通过 JavaScript 代码)处理

4.     HTML结构和(某些情况下)服务器返回的 XML

Ajax 的定义

Ajax= Asynchronous JavaScript and XML(以及 DHTML等)Asynchronous异步JSXML

XMLHttpRequest这是一个 JavaScript对象; 是处理所有服务器通信的对象,创建该对象很简单,如清单 1所示。

清单 1.创建新的 XMLHttpRequest对象

<scriptlanguage="javascript"type="text/javascript">

    var xmlHttp =newXMLHttpRequest();

</script>

通过 XMLHttpRequest对象与服务器进行对话的是 JavaScript技术。这不是一般的应用程序流,这恰恰是 Ajax的强大功能的来源。 

Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest对象放在 Web 表单和服务器之间。 

得到 XMLHttpRequest的句柄后,使用 JavaScript代码完成以下任务:

1.     获取表单数据:JavaScript代码很容易从 HTML表单中抽取数据并发送到服务器。

2.     修改表单上的数据:更新表单也很简单,从设置字段值到迅速替换图像。

3.     解析 HTML XML:使用 JavaScript代码操纵 DOM(请参阅下一节),处理 HTML表单服务器返回的 XML数据的结构。

对于前两点,需要非常熟悉 getElementById()方法,如清单 2所示。

清单 2. JavaScript代码捕获和设置字段值

//捕获字段值:

// 获得字段"phone"的值并用其创建一个变量phone

var phone = document.getElementById("phone").value;

//设置字段值:

// response的数组中获得值并将其写到标签中

document.getElementById("order").value = response[0];

document.getElementById("address").value = response[1];

DOM的功能

当需要在 JavaScript代码和服务器之间传递 XML和改变 HTML 表单的时候,我们再深入研究 DOM

获取 Request 对象

XMLHttpRequest Ajax 应用程序的核心.

var xmlhttp;

if (window.XMLHttpRequest)

  {// IE7+, Firefox, Chrome, Opera, Safari中获得XMLHttpRequest对象

  xmlhttp=newXMLHttpRequest();

  }

else

  {// IE6, IE5中获得XMLHttpRequest对象

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

清单 4.以支持多种浏览器的方式创建 XMLHttpRequest对象

/* Create a new XMLHttpRequest object to talk to the Web server */

var xmlHttp =false;

/*@cc_on @*/

/*@if (@_jscript_version >=5)

try {

  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

  try {

    xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");

  } catch (e2) {

    xmlHttp =false;

  }

}

@end @*/

 

if (!xmlHttp &amp;&typeof XMLHttpRequest !='undefined') {

  xmlHttp = newXMLHttpRequest();

}

这段代码的核心分为三步:

1.     建立一个变量 xmlHttp来引用即将创建的 XMLHttpRequest对象。

2.     尝试在 Microsoft浏览器中创建该对象: 1)尝试使用 Msxml2.XMLHTTP 对象创建它。 2)如果失败,再尝试Microsoft.XMLHTTP 对象。

3.     如果仍然没有建立 xmlHttp,则以非 Microsoft的方式创建该对象。最后,xmlHttp应该引用一个有效的XMLHttpRequest对象,无论运行什么样的浏览器。

Ajax 的请求/响应

与服务器上的 Web应用程序打交道的是 JavaScript技术,而不是直接提交给那个应用程序的 HTML表单。 发出请求 如何使用XMLHttpRequest 对象? 首先–需要一个能够调用JavaScript 方法 的Web 页面。 接下来就是在所有 Ajax 应用程序中基本都雷同的流程:

1、从 Web表单中获取需要的数据。 2、建立要连接的 URL。 3、打开到服务器的连接。 4、设置服务器在完成后要运行的函数。 5、发送请求。

清单 5中的示例 Ajax 方法就是按照这个顺序组织的:

清单 5.发出 Ajax 请求

function callServer() {

  //获得citystate的值

  var city =document.getElementById("city").value;

  var state =document.getElementById("state").value;

  //当它们的值任一个不存在的时候结束JS

  if ((city ==null) || (city =="")) return;

  if ((state ==null) || (state =="")) return;

 

  //创建连接的URL对象

  var url ="/scripts/getZipCode.php?city=" +escape(city) +"&state=" +escape(state);

 

  //打开一个连接服务器的连接

  xmlHttp.open("GET", url,true);

 

  //设置一个方法,当请求返回的时候调用这个方法

  xmlHttp.onreadystatechange =updatePage;

  //xmlhttp.onreadystatechange=function()

  //{

  //    if (xmlhttp.readyState==4 &&xmlhttp.status==200)

  //    {

  //  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

  //    }

  //}

 

  //发生链接

  xmlHttp.send(null);

}

开始的代码使用基本 JavaScript代码获取几个表单字段的值。然后设置一个 PHP脚本作为链接的目标。要注意脚本 URL 的指定方式,city 和 state(来自表单)使用简单的 GET 参数附加在 URL 之后。最后一个参数如果设为 true,那么将请求一个异步连接(这就是 Ajax 的由来)。如果使用 false,那么代码发出请求后将等待服务器返回的响应。 如果设为 true,当服务器在后台处理请求的时候用户仍然可以使用表单(甚至调用其他 JavaScript 方法)。 onreadystatechange 属性可以告诉服务器在运行完成后做什么。因为代码没有等待服务器,必须让服务器知道怎么做以便您能作出响应。 在这个示例中,如果服务器处理完了请求,一个特殊的名为 updatePage() 的方法将被触发。 最后,使用值 null 调用send()。因为已经在请求 URL 中添加了要发送给服务器的数据(city 和state),所以请求中不需要发送任何数据。这样就发出了请求,服务器按照您的要求工作。

处理响应

1.什么也不要做,直到 xmlHttp.readyState属性的值等于 4 2.服务器将把响应填充到xmlHttp.responseText 属性中。

其中的第一点,即就绪状态第二点,使用 xmlHttp.responseText 属性获得服务器的响应,清单 6中的示例方法可供服务器根据清单 5 中发送的数据调用。

清单 6.处理服务器响应

function updatePage() {

  if(xmlHttp.readyState ==4) {

    var response =xmlHttp.responseText;

    document.getElementById("zipCode").value =response;

  }

}

它等待服务器调用,如果是就绪状态,则使用服务器返回的值(这里是用户输入的城市和州的 ZIP编码)设置另一个表单字段的值。 一旦服务器返回 ZIP 编码,updatePage() 方法就用城市/州的 ZIP 编码设置那个字段的值,用户就可以改写该值。这样做有两个原因:

保持例子简单,说明有时候可能希望用户能够修改服务器返回的数据。

要记住这两点,它们对于好的用户界面设计来说很重要。

连接 Web表单

一个 JavaScript方法捕捉用户输入表单的信息并将其发送到服务器,另一个 JavaScript方法监听和处理响应,并在响应返回时设置字段的值。所有这些实际上都依赖于调用第一个 JavaScript方法,它启动了整个过程。 利用 JavaScript 技术更新表单。

清单 7.启动一个 Ajax 过程

 

<form>

    <p>City:<inputtype="text"name="city"id="city"size="25"

           onChange="callServer();" /></p>

    <p>State:<inputtype="text"name="state"id="state"size="25"

           onChange="callServer();" /></p>

    <p>Zip Code:<inputtype="text"name="zipCode"id="city"size="5" /></p>

</form>

当用户在 city state 字段中输入新的值时,callServer()方法就被触发,于是 Ajax开始运行了。

结束语

在下一期文章中,您将掌握:

XMLHttpRequest 对象 学会如何处理 JavaScript 和服务器的通信 如何使用 HTML 表单以及如何获得 DOM 句柄。

Ajax完整教程-(二)

·         

Web 2.0 一瞥

我们需要一种方法使发送的请求接收的响应只包含需要的数据而不是整个 HTML 页面。

多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下,Ajax Web 2.0 方法允许在不更新整个 HTML页面的情况下发送和接收数据。

XMLHttpRequest简介

XMLHttpRequest:一个 JavaScript对象,它是Web 2.0Ajax和大部分其他内容的核心。下面给出将要用于该对象的很少的几个方法和属性:

open():建立到服务器的新请求。 send():向服务器发送请求。 abort():退出当前请求。 readyState:提供当前 HTML 的就绪状态。 responseText:服务器返回的请求响应文本。

XMLHttpRequest做什么这些方法和属性都与发送请求及处理响应有关。事实上,如果看到 XMLHttpRequest 的所有方法和属性,就会发现它们都与非常简单的请求/响应模型有关。

首先需要创建一个新变量并赋给它一个 XMLHttpRequest对象实例。

清单 1.创建新的 XMLHttpRequest对象

<scriptlanguage="javascript"type="text/javascript">

        var request =new XMLHttpRequest();

</script>

JavaScript 不要求指定变量类型,因此不需要像清单 2那样做(在 Java 语言中可能需要这样)。

清单 2.创建 XMLHttpRequest Java 伪代码

XMLHttpRequestrequest = new XMLHttpRequest();

因此在 JavaScript中用 var 创建一个变量,给它一个名字(如 “request”),然后赋给它一个新的 XMLHttpRequest实例。此后就可以在函数中使用该对象了。

错误处理

在实际上各种事情都可能出错,而上面的代码没有提供任何错误处理。较好的办法是创建该对象,并在出现问题时优雅地退出。比如,任何较早的浏览器(不论您是否相信,仍然有人在使用老版本的 Netscape Navigator)都不支持 XMLHttpRequest,您需要让这些用户知道有些地方出了问题。清单 3说明如何创建该对象,以便在出现问题的时候发出 JavaScript警告。

清单 3.创建具有错误处理能力的 XMLHttpRequest

<scriptlanguage="javascript"type="text/javascript">

    var request =false;

    try {

      request =new XMLHttpRequest();

    } catch (failed) {

      request =false;

    }

 

    if (!request)

      alert("Error initializingXMLHttpRequest!");

</script>

一定要理解这些步骤:

1、创建一个新变量 request并赋值 false。后面将使用 false作为判定条件,它表示还没有创建 XMLHttpRequest对象。 2、增加 try/catch 块: 1)尝试创建 XMLHttpRequest 对象。 2)如果失败(catch (failed))则保证 request 的值仍然为false。 3、检查 request 是否仍为 false(如果一切正常就不会是 false)。 4、如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。

现在已经得到了一段带有错误检查的 XMLHttpRequest对象创建代码,还可以告诉您哪儿出了问题。

应付 Microsoft 我们需要采用不同的方法处理 Microsoft 浏览器。 清单 4.增加对 Microsoft浏览器的支持

<scriptlanguage="javascript"type="text/javascript">

    var request =false;

    try {

      request =new XMLHttpRequest();

    } catch (trymicrosoft) {

      try {

        request =new ActiveXObject("Msxml2.XMLHTTP");

      } catch (othermicrosoft) {

        try {

          request =new ActiveXObject("Microsoft.XMLHTTP");

        } catch (failed) {

          request =false;

        }

      }

    }

 

    if (!request)

      alert("Error initializingXMLHttpRequest!");

</script>

很容易被这些花括号迷住了眼睛,因此下面分别介绍每一步:

1、创建一个新变量 request并赋值 false。使用 false作为判断条件,它表示还没有创建 XMLHttpRequest对象。 2、增加 try/catch 块: 1)尝试创建 XMLHttpRequest 对象。 2)如果失败(catch(trymicrosoft)): 1>尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Msxml2.XMLHTTP)。 2> 如果失败(catch(othermicrosoft))尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Microsoft.XMLHTTP)。 2)如果失败(catch (failed))则保证 request 的值仍然为 false。 3、检查 request 是否仍然为 false(如果一切顺利就不会是 false)。 4、如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。

这样修改代码之后再使用 Internet Explorer试验,就应该看到已经创建的表单(没有错误消息)。

静态与动态

再看一看清单 13 4,注意,所有这些代码都直接嵌套在 script标记中。像这种不放到方法或函数体中的 JavaScript代码称为静态 JavaScript。就是说代码是在页面显示给用户之前的某个时候运行。(虽然根据规范不能完全精确地知道这些代码何时运行对浏览器有什么影响,但是可以保证这些代码在用户能够与页面交互之前运行。)这也是多数 Ajax 程序员创建 XMLHttpRequest对象的一般方式。

就是说,也可以像清单 5那样将这些代码放在一个方法中。

清单 5. XMLHttpRequest创建代码移动到方法中

<scriptlanguage="javascript"type="text/javascript">

 

    var request;

 

    function createRequest() {

      try {

        request =new XMLHttpRequest();

      } catch (trymicrosoft) {

        try {

          request =new ActiveXObject("Msxml2.XMLHTTP");

        } catch (othermicrosoft) {

          try {

            request =new ActiveXObject("Microsoft.XMLHTTP");

          } catch (failed) {

            request =false;

          }

        }

      }

 

      if (!request)

        alert("Error initializingXMLHttpRequest!");

    }

</script>

如果按照这种方式编写代码,那么在处理 Ajax之前需要调用该方法。因此还需要清单 6这样的代码。

清单 6.使用 XMLHttpRequest的创建方法

<scriptlanguage="javascript"type="text/javascript">

 

    var request;

 

    function createRequest() {

      try {

        request =new XMLHttpRequest();

      } catch (trymicrosoft) {

        try {

          request =new ActiveXObject("Msxml2.XMLHTTP");

        } catch (othermicrosoft) {

          try {

            request =new ActiveXObject("Microsoft.XMLHTTP");

          } catch (failed) {

            request =false;

          }

        }

      }

 

      if (!request)

        alert("Error initializingXMLHttpRequest!");

    }

 

    function getCustomerInfo() {

      createRequest();

      // 使用request变量进行一系列的操作

    }

</script>

此代码惟一的问题是推迟了错误通知,这也是多数 Ajax程序员不采用这一方法的原因。假设一个复杂的表单有 10 15 个字段、选择框等,当用户在第 14 个字段(按照表单顺序从上到下)输入文本时要激活某些 Ajax代码。这时候运行 getCustomerInfo()尝试创建一个 XMLHttpRequest对象,但(对于本例来说)失败了。然后向用户显示一条警告,明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据!这是非常令人讨厌的,而讨厌显然不会吸引用户再次访问您的网站。

如果使用静态 JavaScript,用户在点击页面的时候很快就会看到错误信息。这样也很烦人,是不是?可能令用户错误地认为您的 Web应用程序不能在他的浏览器上运行。不过,当然要比他们花费了 10分钟输入信息之后再显示同样的错误要好。因此,我建议编写静态的代码,让用户尽可能早地发现问题。

XMLHttpRequest发送请求

得到请求对象之后就可以进入请求/响应循环了。记住,XMLHttpRequest惟一的目的是让您发送请求和接收响应。其他一切都是 JavaScriptCSS或页面中其他代码的工作:改变用户界面、切换图像、解释服务器返回的数据。准备好 XMLHttpRequest之后,就可以向服务器发送请求了。

欢迎使用沙箱

Ajax 采用一种沙箱安全模型。因此,Ajax代码(具体来说就是 XMLHttpRequest对象)只能对所在的同一个域发送请求。以后的文章中将进一步介绍安全和 Ajax,现在只要知道在本地机器上运行的代码只能对本地机器上的服务器端脚本发送请求。如果让 Ajax代码在 http://www.breakneckpizza.com/ 上运行,则必须 http://www.breakneck.com/ 中运行的脚本发送请求。

设置服务器 URL

首先要确定连接的服务器的 URL。这并不是 Ajax的特殊要求,但仍然是建立连接所必需的,显然现在您应该知道如何构造 URL了。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该 URL。比如,清单 7中的 JavaScript代码获取电话号码字段的值并用其构造 URL

清单 7.建立请求 URL

<scriptlanguage="javascript"type="text/javascript">

       var request = false;

       try {

         request =new XMLHttpRequest();

       } catch (trymicrosoft) {

         try {

           request =new ActiveXObject("Msxml2.XMLHTTP");

         } catch (othermicrosoft) {

           try {

             request =new ActiveXObject("Microsoft.XMLHTTP");

           } catch (failed) {

             request =false;

           } 

         }

       }

 

       if (!request)

         alert("Error initializing XMLHttpRequest!");

 

       function getCustomerInfo() {

         var phone = document.getElementById("phone").value;

         var url = "/cgi-local/lookupCustomer.php?phone=" +escape(phone);

       }

</script>

代码创建了一个新变量 phone,并把 ID “phone” 的表单字段的值赋给它。

清单 8展示了这个表单的 XHTML,其中可以看到 phone字段及其 id 属性。

清单 8. Break Neck Pizza表单

<body>

  <p><imgsrc="breakneck-logo_4c.gif"alt="Break Neck Pizza" /></p>

  <formaction="POST">

       <p>Enter your phone number:

            <inputtype="text"size="14"name="phone"id="phone"

              onChange="getCustomerInfo();" />

       </p>

       <p>你的订单会被发送到:</p>

       <divid="address"></div>

       <p>你的订单类型:</p>

       <p><textareaname="order"rows="6"cols="50"id="order"></textarea></p>

       <p><inputtype="submit"value="OrderPizza"id="submit" /></p>

  </form>

</body>

还要注意,当用户输入电话号码或者改变电话号码时,将触发清单 8所示的 getCustomerInfo()方法。该方法取得电话号码并构造存储在 url变量中的 URL 字符串。记住,由于 Ajax 代码是沙箱型的,因而只能连接到同一个域,实际上 URL中不需要域名。该例中的脚本名为/cgi-local/lookupCustomer.php。最后,电话号码作为 GET参数附加到该脚本中:”phone=” +escape(phone)

如果以前没用见过 escape()方法,它用于转义不能用明文正确发送的任何字符。比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL中传递这些字符。

可以根据需要添加任意多个参数。比如,如果需要增加另一个参数,只需要将其附加到 URL中并用&)字符分开 [第一个参数用问号(?)和脚本名分开]

打开请求

有了要连接的 URL后就可以配置请求了。可以用 XMLHttpRequest对象的 open() 方法来完成。该方法有五个参数:

request-type:发送请求的类型。典型的值是 GET POST,但也可以发送 HEAD请求。 url:要连接的 URL。 asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。 username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。 password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。

open() 是打开吗? Internet 开发人员对 open() 方法到底做什么没有达成一致。但它实际上并不是打开一个请求。如果监控 XHTML/Ajax 页面及其连接脚本之间的网络和数据传递,当调用 open() 方法时将看不到任何通信。

通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。

将这些结合起来,通常会得到清单 9所示的一行代码。

清单 9.打开请求

   function getCustomerInfo() {

     var phone = document.getElementById("phone").value;

     var url ="/cgi-local/lookupCustomer.php?phone=" +escape(phone);

     request.open("GET", url,true);

   }

一旦设置好了 URL,其他就简单了。多数请求使用 GET就够了(后面的文章中将看到需要使用 POST的情况),再加上 URL,这就是使用 open()方法需要的全部内容了。

挑战异步性

本系列的后面一篇文章中,我将用很多时间编写和使用异步代码,但是您应该明白为什么 open()的最后一个参数这么重要。在一般的请求/响应模型中,比如 Web 1.0,客户机(浏览器或者本地机器上运行的代码)向服务器发出请求。该请求是同步的,换句话说,客户机等待服务器的响应。当客户机等待的时候,至少会用某种形式通知您在等待:

沙漏(特别是 Windows上)。 旋转的皮球(通常在 Mac 机器上)。 应用程序基本上冻结了,然后过一段时间光标变化了。

而异步请求不等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在 Web表单中输入数据,甚至离开表单。服务器悄悄地响应请求,完成后告诉原来的请求者工作已经结束。

发送请求

一旦用 open()配置好之后,就可以发送请求了。

send() 只有一个参数,就是要发送的内容。但是在考虑这个方法之前,回想一下前面已经通过 URL本身发送过数据了:

var url ="/cgi-local/lookupCustomer.php?phone=" +escape(phone);

·        1

虽然可以使用 send()发送数据,但也能通过 URL本身发送数据。事实上,GET请求(在典型的 Ajax应用中大约占 80%)中,用 URL发送数据要容易得多。如果需要发送安全信息或 XML,可能要考虑使用 send()发送内容。如果不需要通过 send()传递数据,则只要传递 null作为该方法的参数即可。

清单 10.发送请求

   function getCustomerInfo() {

     var phone = document.getElementById("phone").value;

     var url ="/cgi-local/lookupCustomer.php?phone=" +escape(phone);

     request.open("GET", url,true);

     request.send(null);

   }

指定回调方法

现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认,open()方法中 “true” 这个小小的关键字建立了异步请求。但是除此之外,这些代码与用 Java servlet JSPPHP Perl 编程没有什么两样。那么 Ajax Web 2.0 最大的秘密是什么呢?秘密就在于 XMLHttpRequest的一个简单属性 onreadystatechange

首先一定要理解这些代码中的流程(如果需要请回顾清单 10)。建立其请求然后发出请求。此外,因为是异步请求,所以 JavaScript 方法(例子中的 getCustomerInfo())不会等待服务器。因此代码将继续执行,就是说,将退出该方法而把控制返回给表单。用户可以继续输入信息,应用程序不会等待服务器。

这就提出了一个有趣的问题:服务器完成了请求之后会发生什么?答案是什么也不发生,至少对现在的代码而言如此!显然这样不行,因此服务器在完成通过 XMLHttpRequest发送给它的请求处理之后需要某种指示说明怎么做。

JavaScript中引用函数:

JavaScript 是一种弱类型的语言,可以用变量引用任何东西。因此如果声明了一个函数 updatePage()JavaScript也将该函数名看作是一个变量。换句话说,可用变量名 updatePage在代码中引用函数。

清单 11.设置回调方法

   function getCustomerInfo() {

     var phone = document.getElementById("phone").value;

     var url ="/cgi-local/lookupCustomer.php?phone=" +escape(phone);

     request.open("GET", url,true);

     request.onreadystatechange = updatePage;

     request.send(null);

   }

需要特别注意的是该属性在代码中设置的位置 ——它是在调用 send()之前设置的。发送请求之前必须设置该属性,这样服务器在回答完成请求之后才能查看该属性。现在剩下的就只有编写 updatePage()方法了,这是本文最后一节要讨论的重点。

处理服务器响应

发送请求,用户高兴地使用 Web表单(同时服务器在处理请求),而现在服务器完成了请求处理。服务器查看 onreadystatechange属性确定要调用的方法。除此以外,可以将您的应用程序看作其他应用程序一样,无论是否异步。换句话说,不一定要采取特殊的动作编写响应服务器的方法,只需要改变表单,让用户访问另一个 URL或者做响应服务器需要的任何事情。这一节我们重点讨论对服务器的响应和一种典型的动作 ——即时改变用户看到的表单中的一部分。

回调和 Ajax

现在我们已经看到如何告诉服务器完成后应该做什么: XMLHttpRequest对象的 onreadystatechange属性设置为要运行的函数名。这样,当服务器处理完请求后就会自动调用该函数。也不需要担心该函数的任何参数。我们从一个简单的方法开始,如清单 12所示。

清单 12.回调方法的代码

<scriptlanguage="javascript"type="text/javascript">

   var request =false;

   try {

     request =new XMLHttpRequest();

   } catch (trymicrosoft) {

     try {

       request =new ActiveXObject("Msxml2.XMLHTTP");

     } catch (othermicrosoft) {

       try {

         request =new ActiveXObject("Microsoft.XMLHTTP");

       } catch (failed) {

         request =false;

       } 

     }

   }

 

   if (!request)

     alert("Error initializingXMLHttpRequest!");

 

   function getCustomerInfo() {

     var phone = document.getElementById("phone").value;

     var url ="/cgi-local/lookupCustomer.php?phone=" +escape(phone);

     request.open("GET", url,true);

     request.onreadystatechange = updatePage;

     request.send(null);

   }

 

   function updatePage() {

     alert("Server is done!");

   }

</script>

它仅仅发出一些简单的警告,告诉您服务器什么时候完成了任务。在自己的网页中试验这些代码,然后在浏览器中打开(如果希望查看该例中的 XHTML,请参阅清单 8)。输入电话号码然后离开该字段,将看到一个弹出的警告窗口(如 3所示),但是点击 OK又出现了……

根据浏览器的不同,在表单停止弹出警告之前会看到两次、三次甚至四次警告。这是怎么回事呢?原来我们还没有考虑 HTTP就绪状态,这是请求/响应循环中的一个重要部分。

HTTP 就绪状态

前面提到,服务器在完成请求之后会在 XMLHttpRequest onreadystatechange属性中查找要调用的方法。这是真的,但还不完整。事实上,每当 HTTP就绪状态改变时它都会调用该方法。这意味着什么呢?首先必须理解 HTTP就绪状态。

HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在 Ajax 应用程序中需要了解五种就绪状态:

0:请求没有发出(在调用 open()之前)。 1:请求已经建立但还没有发出(调用 send() 之前)。 2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。 3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。 4:响应已完成,可以访问服务器响应并使用它。

与大多数跨浏览器问题一样,这些就绪状态的使用也不尽一致。您也许期望任务就绪状态从 0 123再到 4,但实际上很少是这种情况。一些浏览器从不报告 0 1 而直接从 2 开始,然后是 3 4。其他浏览器则报告所有的状态。还有一些则多次报告就绪状态 1。在上一节中看到,服务器多次调用 updatePage(),每次调用都会弹出警告框 ——可能和预期的不同!

对于 Ajax编程,需要直接处理的惟一状态就是就绪状态 4,它表示服务器响应已经完成,可以安全地使用响应数据了。基于此,回调方法中的第一行应该如清单 13所示。

清单 13.检查就绪状态

   function updatePage() {

     if (request.readyState ==4)

       alert("Server is done!");  

   }

修改后就可以保证服务器的处理已经完成。尝试运行新版本的 Ajax代码,现在就会看到与预期的一样,只显示一次警告信息了。

HTTP 状态码

虽然清单 13中的代码看起来似乎不错,但是还有一个问题 —— 如果服务器响应请求并完成了处理但是报告了一个错误怎么办?要知道,服务器端代码应该明白它是由 AjaxJSP、普通 HTML表单或其他类型的代码调用的,但只能使用传统的 Web专用方法报告信息。而在 Web世界中,HTTP 代码可以处理请求中可能发生的各种问题。

比方说,您肯定遇到过输入了错误的 URL请求而得到 404 错误码的情形,它表示该页面不存在。这仅仅是 HTTP请求能够收到的众多错误码中的一种。表示所访问数据受到保护或者禁止访问的 403 401 也很常见。无论哪种情况,这些错误码都是从完成的响应得到的。换句话说,服务器履行了请求(即 HTTP就绪状态是 4)但是没有返回客户机预期的数据。

因此除了就绪状态外,还需要检查 HTTP状态。我们期望的状态码是 200,它表示一切顺利。如果就绪状态是 4而且状态码是 200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据(而不是错误或者其他有问题的信息)。因此还要在回调方法中增加状态检查,如清单 14所示。

清单 14.检查 HTTP 状态码

   function updatePage() {

     if (request.readyState ==4)

       if (request.status ==200)

         alert("Server is done!");

   }

为了增加更健壮的错误处理并尽量避免过于复杂,可以增加一两个状态码检查,请看一看清单 15中修改后的 updatePage()版本。

清单 15.增加一点错误检查

   function updatePage() {

     if (request.readyState ==4)

       if (request.status ==200)

         alert("Server is done!");

       elseif (request.status ==404)

         alert("Request URL does not exist");

       else

         alert("Error: status code is " +request.status);

   }

现在将 getCustomerInfo()中的 URL 改为不存在的 URL 看看会发生什么。应该会看到警告信息说明要求的 URL不存在 —— 好极了!很难处理所有的错误条件,但是这一小小的改变能够涵盖典型 Web应用程序中 80% 的问题。

读取响应文本

现在可以确保请求已经处理完成(通过就绪状态),服务器给出了正常的响应(通过状态码),最后我们可以处理服务器返回的数据了。返回的数据保存在 XMLHttpRequest对象的 responseText属性中。

关于 responseText中的文本内容,比如格式和长度,有意保持含糊。这样服务器就可以将文本设置成任何内容。比方说,一种脚本可能返回逗号分隔的值,另一种则使用管道符(即 |字符)分隔的值,还有一种则返回长文本字符串。何去何从由服务器决定。

在本文使用的例子中,服务器返回客户的上一个订单和客户地址,中间用管道符分开。然后使用订单和地址设置表单中的元素值,清单 16给出了更新显示内容的代码。

清单 16.处理服务器响应

  function updatePage() {

     if (request.readyState ==4) {

       if (request.status ==200) {

         var response = request.responseText.split("|");

         document.getElementById("order").value =response[0];

         document.getElementById("address").innerHTML =

           response[1].replace(//n/g,"");

       } else

         alert("status is " +request.status);

     }

   }

首先,得到 responseText并使用 JavaScript split()方法从管道符分开。得到的数组放到 response中。数组中的第一个值 ——上一个订单 —— response[0]访问,被设置为 ID “order”的字段的值。第二个值 response[1],即客户地址,则需要更多一点处理。因为地址中的行用一般的行分隔符(“/n”字符)分隔,代码中需要用 XHTML 风格的行分隔符 来代替。替换过程使用 replace() 函数和正则表达式完成。最后,修改后的文本作为 HTML 表单 div 中的内部 HTML。结果就是表单突然用客户信息更新了,如图 4 所示。

结束本文之前,我还要介绍 XMLHttpRequest的另一个重要属性 responseXML。如果服务器选择使用 XML响应则该属性包含(也许您已经猜到)XML响应。处理 XML 响应和处理普通文本有很大不同,涉及到解析、文档对象模型(DOM)和其他一些问题。后面的文章中将进一步介绍 XML。但是因为 responseXML 通常和 responseText一起讨论,这里有必要提一提。对于很多简单的 Ajax应用程序 responseText就够了,但是您很快就会看到通过 Ajax应用程序也能很好地处理 XML

结束语

您可能对 XMLHttpRequest感到有点厌倦了,我很少看到一整篇文章讨论一个对象,特别是这种简单的对象。但是您将在使用 Ajax编写的每个页面和应用程序中反复使用该对象。坦白地说,关于 XMLHttpRequest还真有一些可说的内容。下一期文章中将介绍如何在请求中使用 POST GET,来设置请求中的内容头部和从服务器响应读取内容头部,理解如何在请求/响应模型中编码请求和处理 XML

再往后我们将介绍常见 Ajax工具箱。这些工具箱实际上隐藏了本文所述的很多细节,使得 Ajax编程更容易。您也许会想,既然有这么多工具箱为何还要对底层的细节编码。答案是,如果不知道应用程序在做什么,就很难发现应用程序中的问题。

因此不要忽略这些细节或者简单地浏览一下,如果便捷华丽的工具箱出现了错误,您就不必挠头或者发送邮件请求支持了。如果了解如何直接使用 XMLHttpRequest,就会发现很容易调试和解决最奇怪的问题。只有让其解决您的问题,工具箱才是好东西。

因此请熟悉 XMLHttpRequest吧。事实上,如果您有使用工具箱的 Ajax代码,可以尝试使用 XMLHttpRequest对象及其属性和方法重新改写。这是一种不错的练习,可以帮助您更好地理解其中的原理。

下一期文章中将进一步讨论该对象,探讨它的一些更有趣的属性(如 responseXML),以及如何使用 POST请求和以不同的格式发送数据。请开始编写代码吧。

Ajax完整教程-(三)

 

对于很多 Web开发人员来说,只需要生成简单的请求并接收简单的响应即可; 但是对于希望掌握 Ajax 的开发人员来说,必须要全面理解: HTTP 状态代码 HTTP 就绪状态 XMLHttpRequest 对象

XMLHttpRequest对象,它是 Ajax 应用程序的中心,负责处理服务器端应用程序和脚本的请求,并处理从服务器端组件返回的数据。所有的 Ajax应用程序都要使用 XMLHttpRequest对象。

重点介绍这个请求对象的 3个关键部分的内容:

•HTTP 就绪状态 •HTTP 状态代码 •可以生成的请求类型

如果您不仅仅是想了解 Ajax编程的常识,而是希望了解更多内容,就需要熟悉就绪状态、状态代码和请求本身的内容。当应用程序出现问题时 ——这种问题总是存在 ——那么如果能够正确理解就绪状态、如何生成一个 HEAD请求或者 400 的状态代码的确切含义,就可以在 5 分钟内调试出问题,而不是在各种挫折和困惑中度过 5个小时。

深入了解 HTTP就绪状态

XMLHttpRequest对象的 readyState 的属性:这个属性确保服务器已经完成了一个请求,通常会使用一个回调函数从服务器中读出数据来更新 Web 表单或页面的内容。清单 1给出了一个简单的例子:

清单 1.在回调函数中处理服务器的响应

function updatePage() {

   if (request.readyState ==4) {

     if (request.status ==200) {

       var response = request.responseText.split("|");

       document.getElementById("order").value =response[0];

       document.getElementById("address").innerHTML =

         response[1].replace(//n/g,"<br />");

     } else

       alert("status is " +request.status);

   }

}

这显然是就绪状态最常见(也是最简单)的用法。正如您从数字 “4”中可以看出的一样,还有其他几个就绪状态:

0:请求未初始化(还没有调用 open())。 1:请求已经建立,但是还没有发送(还没有调用 send())。 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 4:响应已完成;您可以获取并使用服务器的响应了。

隐秘就绪状态

第一种就绪状态的特点是 readyState属性为 0readyState == 0),表示未初始化状态。一旦对请求对象调用 open() 之后,这个属性就被设置为 1由于您通常都是在一对请求进行初始化之后就立即调用 open(),因此很少会看到 readyState == 0的状态。另外,未初始化的就绪状态在实际的应用程序中是没有真正的用处的。

不过为了满足我们的兴趣,请参见清单 2的内容,其中显示了如何在 readyState被设置为 0 时来获取这种就绪状态。

清单 2.获取 0 就绪状态

  function getSalesData() {

     //创建一个请求对象

     createRequest(); 

     alert("Ready state is: " + request.readyState);

 

     //开始(初始化)这个请求

     var url ="/boards/servlet/UpdateBoardSales";

     request.open("GET", url,true);

     request.onreadystatechange = updatePage;

     request.send(null);

   }

在这个简单的例子中,getSalesData() Web 页面调用来启动请求(例如点击一个按钮时)所使用的函数。注意您必须在调用 open()之前来查看就绪状态。图 1给出了运行这个应用程序的结果。

显然,这并不能为您带来多少好处;需要确保尚未调用 open()函数的情况很少。在大部分 Ajax编程的真实情况中,这种就绪状态的唯一用法就是使用相同的 XMLHttpRequest对象在多个函数之间生成多个请求。在这种(不常见的)情况中,您可能会在生成新请求之前希望确保请求对象是处于未初始化状态(readyState == 0)。这实际上是要确保另外一个函数没有同时使用这个对象。

查看正在处理的请求的就绪状态

除了 0就绪状态之外,请求对象还需要依次经历典型的请求和响应的其他几种就绪状态,最后才以就绪状态 4的形式结束。这就是为什么您在大部分回调函数中都可以看到 if (request.readyState == 4) 这行代码;它确保服务器已经完成对请求的处理,现在可以安全地更新 Web 页面或根据从服务器返回来的数据来进行操作了。

要查看这种状态发生的过程非常简单。如果就绪状态为 4,我们不仅要运行回调函数中的代码,而且还要在每次调用回调函数时都输出就绪状态。清单 3 给出了一个实现这种功能的例子。

清单 3.查看就绪状态

   function updatePage() {

     //输出当前状态

     alert("updatePage() called with ready stateof " +request.readyState);

   }

0等于 4

在多个 JavaScript函数都使用相同的请求对象时,您需要检查就绪状态 0来确保这个请求对象没有正在使用,这种机制会产生问题。由于 readyState == 4表示一个已完成的请求,因此您经常会发现那些目前没在使用的处于就绪状态的请求对象仍然被设置成了 4 ——这是因为从服务器返回来的数据已经使用过了,但是从它们被设置为就绪状态之后就没有进行任何变化。有一个函数 abort()会重新设置请求对象,但是这个函数却不是真正为了这个目的而使用的。如果您必须使用多个函数,最好是为每个函数都创建并使用一个函数,而不是在多个函数之间共享相同的对象。

如果您不确定如何运行这个函数,就需要创建一个函数,然后在 Web页面中调用这个函数,并让它向服务器端的组件发送一个请求(例如清单 2给出的函数,或本系列文章的第 1部分和第 2 部分中给出的例子)。确保在建立请求时,将回调函数设置为 updatePage();要实现这种设置,可以将请求对象的onreadystatechange属性设置为 updatePage()

这段代码就是 onreadystatechange意义的一个确切展示 ——每次请求的就绪状态发生变化时,就调用 updatePage(),然后我们就可以看到一个警告了。

您可以自己尝试运行这段代码。将其放入 Web页面中,然后激活事件处理程序(单击按钮,在域之间按 tab键切换焦点,或者使用设置的任何方法来触发请求)。这个回调函数会运行多次 ——每次就绪状态都会改变 ——您可以看到每个就绪状态的警告。这是跟踪请求所经历的各个阶段的最好方法。

浏览器的不一致性

在对这个过程有一个基本的了解之后,请试着从几个不同的浏览器中访问您的页面。您应该会注意到各个浏览器如何处理这些就绪状态并不一致。例如,在 Firefox 1.5中,您会看到以下就绪状态:

•1 •2 •3 •4

这并不奇怪,因为每个请求状态都在这里表示出来了。然而,如果您使用 Safari来访问相同的应用程序,就应该看到 ——或者看不到 —— 一些有趣的事情。下面是在 Safari 2.0.1中看到的状态:

•2 •3 •4

Safari 实际上把第一个就绪状态给丢弃了,也并没有什么明显的原因说明为什么要这样做;不过这就是 Safari的工作方式。这还说明了一个重要的问题:尽管在使用服务器上的数据之前确保请求的状态为 4是一个好主意,但是依赖于每个过渡期就绪状态编写的代码的确会在不同的浏览器上得到不同的结果。

例如,在使用 Opera 8.5时,所显示的就绪状态情况就更加糟糕了:

•3 •4

最后,Internet Explorer会显示如下状态:

•1 •2 •3 •4

如果您碰到请求方面的问题,这就是用来发现问题的首要之处。最好的方式是在 Internet Explorer Firefox 都进行一下测试 —— 您会看到所有这 4 种状态,并可以检查请求的每个状态所处的情况。

接下来我们再来看一下响应端的情况。

显微镜下的响应数据

一旦我们理解在请求过程中发生的各个就绪状态之后,接下来就可以来看一下 XMLHttpRequest对象的另外一个方面了 —— responseText属性。回想一下在上一篇文章中我们介绍过的内容,就可以知道这个属性用来从服务器上获取数据。一旦服务器完成对请求的处理之后,就可以将响应请求数据所需要的任何数据放到请求的 responseText中了。然后回调函数就可以使用这些数据,如清单 1清单 4所示。

清单 4.使用服务器上返回的响应

 function updatePage() {

     if (request.readyState ==4) {

       var newTotal = request.responseText;

       var totalSoldEl =document.getElementById("total-sold");

       var netProfitEl =document.getElementById("net-profit");

       replaceText(totalSoldEl, newTotal);

 

       /* out the new net profit */

       var boardCostEl =document.getElementById("board-cost");

       var boardCost = getText(boardCostEl);

       var manCostEl =document.getElementById("man-cost");

       var manCost = getText(manCostEl);

       var profitPerBoard = boardCost -manCost;

       var netProfit = profitPerBoard *newTotal;

 

       /* Update the net profit on the sales form*/

       netProfit = Math.round(netProfit *100) / 100;

       replaceText(netProfitEl, netProfit);

     }

 }

清单 1相当简单;清单 4 稍微有点复杂,但是它们在开始时都要检查就绪状态,并获取 responseText属性的值。

查看请求的响应文本

与就绪状态类似,responseText属性的值在整个请求的生命周期中也会发生变化。要查看这种变化,请使用如清单 5所示的代码来测试请求的响应文本,以及它们的就绪状态。

清单 5.测试 responseText属性

   function updatePage() {

     // Output the current ready state

     alert("updatePage() called with ready stateof " +request.readyState +

           " and a response text of '" +request.responseText + "'");

     }

现在在浏览器中打开 Web应用程序,并激活您的请求。要更好地看到这段代码的效果,请使用 Firefox InternetExplorer,因为这两个浏览器都可以报告出请求过程中所有可能的就绪状态。例如在就绪状态 2中,就没有定义 responseText;如果 JavaScript控制台也已经打开了,您就会看到一个错误。

不过在就绪状态 3中,服务器已经在 responseText属性中放上了一个值,至少在这个例子中是这样

您会看到就绪状态为 3的响应在每个脚本、每个服务器甚至每个浏览器上都是不一样的。不过,这在调试应用程序中依然是非常有用的。

获取安全数据

所有的文档和规范都强调,只有在就绪状态为 4时数据才可以安全使用。相信我,当就绪状态为 3时,您很少能找到无法从 responseText属性获取数据的情况。然而,在应用程序中将自己的逻辑依赖于就绪状态 3可不是什么好主意 ——一旦您编写了依赖于就绪状态 3的完整数据的的代码,几乎就要自己来负责当时的数据不完整问题了。

比较好的做法是向用户提供一些反馈,说明在处于就绪状态 3时,很快就会有响应了。尽管使用 alert()之类的函数显然不是什么好主意 ——使用 Ajax 然后使用一个警告对话框来阻塞用户显然是错误的 ——不过您可以在就绪状态发生变化时更新表单或页面中的域。例如,对于就绪状态 1来说要将进度指示器的宽度设置为 25%,对于就绪状态 2来说要将进度指示器的宽度设置为 50%,对于就绪状态 3来说要将进度指示器的宽度设置为 75%,当就绪状态为 4时将进度指示器的宽度设置为 100%(完成)。

当然,正如您已经看到的一样,这种方法非常聪明,但它是依赖于浏览器的。在 Opera上,您永远都不会看到前两个就绪状态,而在 Safari上则没有第一个(1)。由于这个原因,我将这段代码留作练习,而没有在本文中包括进来。

深入了解 HTTP状态代码

有了就绪状态和您在 Ajax编程技术中学习到的服务器的响应,您就可以为 Ajax应用程序添加另外一级复杂性了 ——这要使用 HTTP 状态代码。这些代码对于 Ajax 来说并没有什么新鲜。从 Web 出现以来,它们就已经存在了。在 Web浏览器中您可能已经看到过几个状态代码:

401:未经授权 403:禁止 404:没找到

您可以找到更多的状态代码。

xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open())。 1:请求已经建立,但是还没有发送(还没有调用 send())。 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 4:响应已完成;您可以获取并使用服务器的响应了。

xmlhttp.status的值及解释: 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功 201——提示知道新文件的URL 202——接受和处理、但处理未完成 203——返回信息不确定或不完整 204——请求收到,但返回信息为空 205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件 206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到 301——删除请求数据 302——在其他地址发现了请求数据 303——建议客户访问其他URL或访问方式 304——客户端已经执行了GET,但文件未变化 305——请求的资源必须从服务器指定的地址得到 306——前一版本HTTP中使用的代码,现行版本中不再使用 307——申明请求的资源临时性删除

400——错误请求,如语法错误 401——请求授权失败 402——保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405——用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖,请求资源不可访问 407——类似401,用户必须首先在代理服务器上得到授权 408——客户端没有在用户指定的饿时间内完成请求 409——对当前资源状态,请求不能完成 410——服务器上不再有此资源且无进一步的参考地址 411——服务器拒绝用户定义的Content-Length属性请求 412——一个或多个请求头字段在当前请求中错误 413——请求的资源大于服务器允许的大小 414——请求的资源URL长于服务器允许的长度 415——请求资源不支持请求项目格式 416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段 417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求合起来

500——服务器产生内部错误 501——服务器不支持请求的函数 502——服务器暂时不可用,有时是为了防止发生系统过载 503——服务器过载或暂停维修 504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长 505——服务器不支持或拒绝支请求头中指定的HTTP版本

1xx:信息响应类,表示接收到请求并且继续处理 2xx:处理成功响应类,表示动作被成功接收、理解和接受 3xx:重定向响应类,为了完成指定的动作,必须接受进一步处理 4xx:客户端错误,客户请求包含语法错误或者是不能正确执行 5xx:服务端错误,服务器不能正确执行一个正确的请求

xmlhttp.readyState==4 && xmlhttp.status==200的解释:请求完成并且成功返回

要为 Ajax应用程序另外添加一层控制和响应(以及更为健壮的错误处理)机制,您需要适当地查看请求和响应中的状态代码。

200:一切正常

在很多 Ajax应用程序中,您将看到一个回调函数,它负责检查就绪状态,然后继续利用从服务器响应中返回的数据,如清单 6所示。

清单 6.忽略状态代码的回调函数

   function updatePage() {

     if (request.readyState ==4) {

       var response = request.responseText.split("|");

       document.getElementById("order").value =response[0];

       document.getElementById("address").innerHTML =

         response[1].replace(//n/g,"<br />");

     }

   }

这对于 Ajax编程来说证明是一种短视而错误的方法。如果脚本需要认证,而请求却没有提供有效的证书,那么服务器就会返回诸如 403 401 之类的错误代码。然而,由于服务器对请求进行了应答,因此就绪状态就被设置为 4(即使应答并不是请求所期望的也是如此)。最终,用户没有获得有效数据,当 JavaScript试图使用不存在的服务器数据时就可能会出现严重的错误

它花费了最小的努力来确保服务器不但完成了一个请求,而且还返回了一个一切良好的状态代码。这个代码是 “200”,它是通过 XMLHttpRequest对象的 status 属性来报告的。为了确保服务器不但完成了一个请求,而且还报告了一个 OK状态,请在您的回调函数中添加另外一个检查功能,如清单 7所示。

清单 7.检查有效状态代码

  function updatePage() {

     if (request.readyState ==4) {

       if (request.status ==200) {

         var response = request.responseText.split("|");

         document.getElementById("order").value =response[0];

         document.getElementById("address").innerHTML =

           response[1].replace(//n/g,"<br />");

       } else

         alert("status is " +request.status);

     }

   }

通过添加这几行代码,您就可以确认是否存在问题,用户会看到一个有用的错误消息,而不仅仅是看到一个由断章取义的数据所构成的页面,而没有任何解释。

重定向和重新路由

在深入介绍有关错误的内容之前,我们有必要来讨论一下有关一个在使用 Ajax并不需要关心的问题 ——重定向。在 HTTP 状态代码中,这是 300 系列的状态代码,包括:

301:永久移动 302:找到(请求被重新定向到另外一个 URL/URI 上) 305:使用代理(请求必须使用一个代理来访问所请求的资源)

Ajax 程序员可能并不太关心有关重定向的问题,这是由于两方面的原因:

1.     首先,Ajax应用程序通常都是为一个特定的服务器端脚本、servlet或应用程序而编写的。对于那些您看不到就消失了的组件来说,Ajax程序员就不太清楚了。因此有时您会知道资源已经移动了(因为您移动了它,或者通过某种手段移动了它),接下来要修改请求中的URL,并且不会再碰到这种结果了。

2.     更为重要的一个原因是:Ajax应用程序和请求都是封装在沙盒中的。这就意味着提供生成 Ajax请求的 Web页面的域必须是对这些请求进行响应的域。因此 ebay.com所提供的 Web 页面就不能对一个在 amazon.com上运行的脚本生成一个 Ajax风格的请求;在 ibm.com上的 Ajax 应用程序也无法对在 netbeans.org上运行的servlets发出请求。

结果是您的请求无法重定向到其他服务器上,而不会产生安全性错误。在这些情况中,您根本就不会得到状态代码。通常在调试控制台中都会产生一个 JavaScript错误。因此,在对状态代码进行充分的考虑之后,您就可以完全忽略重定向代码的问题了。

结果是您的请求无法重定向到其他服务器上,而不会产生安全性错误。在这些情况中,您根本就不会得到状态代码。通常在调试控制台中都会产生一个 JavaScript错误。因此,在对状态代码进行充分的考虑之后,您就可以完全忽略重定向代码的问题了。

错误

一旦接收到状态代码 200并且意识到可以很大程度上忽略 300系列的状态代码之后,所需要担心的唯一一组代码就是 400系列的代码了,这说明了不同类型的错误。回头再来看一下清单 7,并注意在对错误进行处理时,只将少数常见的错误消息输出给用户了。尽管这是朝正确方向前进的一步,但是要告诉从事应用程序开发的用户和程序员究竟发生了什么问题,这些消息仍然是没有太大用处的。

首先,我们要添加对找不到的页的支持。实际上这在大部分产品系统中都不应该出现,但是在测试脚本位置发生变化或程序员输入了错误的 URL时,这种情况并不罕见。如果您可以自然地报告 404错误,就可以为那些困扰不堪的用户和程序员提供更多帮助。例如,如果服务器上的一个脚本被删除了,我们就可以使用清单 7中的代码,这样用户就会看到一个非描述性错误。

边界情况和困难情况

看到现在,一些新手程序员就可能会这究竟是要讨论什么内容。有一点事实大家需要知道:只有不到 5% Ajax 请求需要使用诸如 23之类的就绪状态和诸如 403之类的状态代码(实际上,这个比率可能更接近于 1%甚至更少)。这些情况非常重要,称为边界情况(edge case ——它们只会在一些非常特殊的情况下发生,其中遇到的都是最奇特的问题。虽然这些情况并不普遍,但是这些边界情况却占据了大部分用户所碰到的问题的 80%!

对于典型的用户来说,应用程序 100次都是正常工作的这个事实通常都会被忘记,然而应用程序只要一次出错就会被他们清楚地记住。如果您可以很好地处理边界情况(或困难情况),就可以为再次访问站点的用户提供满意的回报。

用户无法判断问题究竟是认证问题、没找到脚本(此处就是这种情况)、用户错误还是代码中有些地方产生了问题。添加一些简单的代码可以让这个错误更加具体。请参照清单 8,它负责处理没找到的脚本或认证发生错误的情况,在出现这些错误时都会给出具体的消息。

清单 8.检查有效状态代码

   function updatePage() {

     if (request.readyState ==4) {

       if (request.status ==200) {

         var response = request.responseText.split("|");

         document.getElementById("order").value =response[0];

         document.getElementById("address").innerHTML =

           response[1].replace(//n/g,"<br />");

       } elseif (request.status ==404) {

         alert ("Requested URL is not found.");

       } elseif (request.status ==403) {

         alert("Access denied.");

       } else

         alert("status is " +request.status);

     }

   }

·        

虽然这依然相当简单,但是它的确多提供了一些有用的信息。图 6给出了与 5相同的错误,但是这一次错误处理代码向用户或程序员更好地说明了究竟发生了什么。

在我们自己的应用程序中,可以考虑在发生认证失败的情况时清除用户名和密码,并向屏幕上添加一条错误消息。我们可以使用类似的方法来更好地处理找不到脚本或其他 400类型的错误(例如 405表示不允许使用诸如发送 HEAD请求之类不可接受的请求方法,而 407则表示需要进行代理认证)。然而不管采用哪种选择,都需要从对服务器上返回的状态代码开始入手进行处理。

其他请求类型

如果您真希望控制 XMLHttpRequest对象,可以考虑最后实现这种功能 —— HEAD 请求添加到指令中。在前两篇文章中,我们已经介绍了如何生成 GET请求;在马上就要发表的一篇文章中,您会学习有关使用 POST请求将数据发送到服务器上的知识。不过本着增强错误处理和信息搜集的精神,您应该学习如何生成 HEAD请求。

生成请求

实际上生成 HEAD请求非常简单;您可以使用 “HEAD”(而不是 “GET” “POST”)作为第一个参数来调用 open()方法,如清单 9所示。

清单 9.使用 Ajax 生成一个 HEAD 请求

  function getSalesData() {

     createRequest();

     var url ="/boards/servlet/UpdateBoardSales";

     request.open("HEAD", url,true);

     request.onreadystatechange = updatePage;

     request.send(null);

   }

·       

当您这样生成一个 HEAD请求时,服务器并不会像对 GET POST 请求一样返回一个真正的响应。相反,服务器只会返回资源的头(header),这包括响应中内容最后修改的时间、请求资源是否存在和很多其他有用信息。您可以在服务器处理并返回资源之前使用这些信息来了解有关资源的信息。

对于这种请求您可以做的最简单的事情就是简单地输出所有的响应头的内容。这可以让您了解通过 HEAD请求可以使用什么。清单 10提供了一个简单的回调函数,用来输出从 HEAD请求中获得的响应头的内容。

清单 10.输出从 HEAD 请求中获得的响应头的内容

  function updatePage() {

     if (request.readyState ==4) {

       alert(request.getAllResponseHeaders());

     }

   }

·        

您可以单独使用这些头(从服务器类型到内容类型)在 Ajax应用程序中提供其他信息或功能。

检查 URL

您已经看到了当 URL不存在时应该如何检查 404错误。如果这变成一个常见的问题 ——可能是缺少了一个特定的脚本或 servlet ——那么您就可能会希望在生成完整的 GET POST 请求之前来检查这个 URL。要实现这种功能,生成一个 HEAD请求,然后在回调函数中检查 404错误;清单 11 给出了一个简单的回调函数。

清单 11.检查某个 URL 是否存在

   function updatePage() {

     if (request.readyState ==4) {

       if (request.status ==200) {

         alert("URL exists");

       } elseif (request.status ==404) {

         alert("URL does not exist.");

       } else {

         alert("Status is: " +request.status);

       }

     }

   }

·        

诚实地说,这段代码的价值并不太大。服务器必须对请求进行响应,并构造一个响应来填充内容长度的响应头,因此并不能节省任何处理时间。另外,这花费的时间与生成请求并使用 HEAD请求来查看 URL 是否存在所需要的时间一样多,因为它要生成使用 GET POST 的请求,而不仅仅是如清单 7所示一样来处理错误代码。不过,有时确切地了解目前什么可用也是非常有用的;您永远不会知道何时创造力就会迸发或者何时需要 HEAD请求!

有用的 HEAD请求

您会发现 HEAD请求非常有用的一个领域是用来查看内容的长度或内容的类型这样可以确定是否需要发回大量数据来处理请求,和服务器是否试图返回二进制数据,而不是 HTML、文本或 XML(在 JavaScript 中,这 3种类型的数据都比二进制数据更容易处理)。

在这些情况中,您只使用了适当的头名,并将其传递给 XMLHttpRequest对象的 getResponseHeader()方法。因此:

要获取响应的长度,只需要调用 request.getResponseHeader(“Content-Length”); 要获取内容类型,请使用 request.getResponseHeader(“Content-Type”);

在很多应用程序中,生成 HEAD请求并没有增加任何功能,甚至可能会导致请求速度变慢(通过强制生成一个 HEAD请求来获取有关响应的数据,然后在使用一个 GET POST 请求来真正获取响应)。然而,在出现您不确定有关脚本或服务器端组件的情况时,使用 HEAD请求可以获取一些基本的数据,而不需要对响应数据真正进行处理,也不需要大量的带宽来发送响应。

结束语

对于很多 Ajax Web 程序员来说,本文中介绍的内容似乎是太高级了。生成 HEAD请求的价值是什么呢?到底在什么情况下需要在 JavaScript中显式地处理重定向状态代码呢?这些都是很好的问题;对于简单的应用程序来说,答案是这些高级技术的价值并不是非常大。

然而,Web已经不再是只需实现简单应用程序的地方了;用户已经变得更加高级,客户期望能够获得更好的稳定性、更高级的错误报告,如果应用程序有 1%的时间停机,那么经理就可能会因此而被解雇。

因此您的工作就不能仅仅局限于简单的应用程序了,而是需要更深入理解 XMLHttpRequest

1.     如果您可以考虑各种就绪状态 ——并且理解了这些就绪状态在不同浏览器之间的区别 ——就可以快速调试应用程序了。您甚至可以基于就绪状态而开发一些创造性的功能,并向用户和客户回报请求的状态。

2.     如果您要对状态代码进行控制,就可以设置应用程序来处理脚本错误、非预期的响应以及边缘情况。结果是应用程序在所有的时间都可以正常工作,而不仅仅是只能一切都正常的情况下才能运行。

3.     增加这种生成 HEAD请求的能力,检查某个 URL是否存在,以及确认某个文件是否被修改过,这样就可以确保用户可以获得有效的页面,用户所看到的信息都是最新的,(最重要的是)让他们惊讶这个应用程序是如何健壮和通用。

本文的目的并非是要让您的应用程序显得十分华丽,而是帮助您去掉黄色聚光灯后重点昭显文字的美丽,或者外观更像桌面一样。尽管这些都是 Ajax的功能(在后续几篇文章中就会介绍),不过它们却像是蛋糕表面的一层奶油。如果您可以使用 Ajax来构建一个坚实的基础,让应用程序可以很好地处理错误和问题,用户就会返回您的站点和应用程序。在接下来的文章中,我们将添加这种直观的技巧,这会让客户兴奋得发抖

 

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台