初识Ajax技术1

一 引题

如何让web程序用起来像桌面应用程序一样简单；

胖客户端？瘦客户端？如何选择？-----看需求，看用户的使用，灵活调节。

不要闪烁，空白页出现？

 

二 初识Ajax

1.    Ajax是一个客户端技术，不论你现在使用何种服务器端技术，都能使用Ajax，而不管使用的是Java、.NET、Ruby、PHP还是CGI。

2.    Ajax是一种基于浏览器的方法；

3.    Ajax不是全新的网页技术，它是以一种新方法来整合现存的多种网页技术；

4.    效果如：Google Suggest；

5.    Ajax相关技术如下：

◆  HTML/XHTML和CSS：在浏览器显示用户接口和呈现相关数据；

◆  JavaScript；所有的浏览器都支持JavaScript脚本语言。AJAX使用JavaScript脚本语言来操作XmlHttpRequest对象、操作DOM和CSS等。

◆  XML：服务器异步传递的数据；

◆  XMLDOM:当浏览器异步获取XML数据后，可以进一步的使用JavaScript程序代码和XML DOM来取出相关的信息；

◆  XMLHTTPRequest对象：JavaScript代码识通过XMLHTTPRequest对象来建立异步的HTTP请求；

注意：对于一些相关技术，你不必是这方面的专家，但是基本了解还是必要的。

6.    Ajax最大特色之一：可以更新网页的部分内容而不需要刷新整个页面；

 

最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。（这个功能正是AJAX的一大特点之一）

三 理解异步思想

1. Ajax允许你异步地完成操作，这个最大的优点；    

2. 多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。

比如，到 Amazon.com 网站上点击一个按钮或者输入搜索项。就会对服务器发送一个请求，然后响应再返回到浏览器。该请求不仅仅是图书和书目列表，而是另一个完整的 HTML页面。因此当 Web 浏览器用新的 HTML 页面重绘时，可能会看到闪烁或抖动。事实上，通过看到的每个新页面可以清晰地看到请求和响应。

 

 

四 通过一个简单的例子来学习Ajax技术

（参考例题：TrainAjax/NewRequest.aspx）

要真正实现这种绚丽的奇迹，必须非常熟悉一个 JavaScript 对象，即 XMLHttpRequest。

XmlHttpRequest对象允许浏览器通过它与Web服务器进行通信。这个对象为页面提供了客户端和服务器端的异步通信功能。

 

在Internet Explorer中，这个功能由“MSXML”ActiveX组件提供；在FireFox中，这个功能由一个叫XmlHttpReqeust的对象来提供。在编写AJAX代码时，需要判断浏览器类型，并为不同浏览器提供不同的XmlHttpRequest的调用代码。

1 创建一个新的XMLHttpRequest对象：

首先需要创建一个新变量并赋给它一个 XMLHttpRequest对象实例。这在 JavaScript 中很简单，只要对该对象名使用 new 关键字即可，如 清单 1 所示。

 

清单 1. 创建新的 XMLHttpRequest 对象

<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>

 

不难吧？记住，JavaScript 不要求指定变量类型；

　　

清单 2.具有错误处理能力，并且对新旧浏览器都支持的代码

<script language="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!");
</script>

 

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

 

2 打开HTTP请求

var url = "Default.aspx?phone=" + escape(phone);

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

open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。

GET和POST的区别？

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。

 

例如 ：

var url = "ValidateLogin.aspx?username="+UserName+"&password="+Password;

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

XMLRequest.send(null);

此外，也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。

 

例如：

var url = "ValidateLogin.aspx";

XMLRequest.open("POST", url, true);

XMLRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');

XMLRequest.send("username=" + escape(UserName)+"&password="+escape(Password));

如果需要在send里传递参数则setRequestHeder是必须的

需要注意的是根据提交方式的不同，两种提交方式分别调用后台的doGet方法和doPost方法。

 

3 指定回调函数

request.onreadystatechange = updatePage();

现在我们已经看到如何告诉服务器完成后应该做什么：将 XMLHttpRequest 对象的 onreadystatechange 属性设置为要运行的函数名。这样，当服务器处理完请求后就会自动调用该函数。（接收返回文本或者XML，并进行相应的处理操作）

 

4 向服务器发送请求

request.send(null);

5. 回调函数

清单 13. 检查 HTTP 就绪状态

   function updatePage() {
     if (request.readyState == 4)
             alert("Server is done!");
   }

 

HTTP 就绪状态

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

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

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

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

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

 

HTTP 状态码

　　虽然 清单 13 中的代码看起来似乎不错，但是还有一个问题 —— 如果服务器响应请求并完成了处理但是报告了一个错误怎么办？要知道，服务器端代码应该明白它是由 Ajax、JSP、普通 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!");
       else if (request.status == 404)
         alert("Request URL does not exist");
       else
         alert("Error: status code is " + request.status);
   }

 

附：状态码

        // Number: Description   
        // 100:Continue 
         // 101:Switching protocols 
         // 200:OK 
         // 201:Created 
         // 202:Accepted 
         // 203:Non-Authoritative Information 
         // 204:No Content 
         // 205:Reset Content 
         // 206:Partial Content 
         // 300:Multiple Choices 
         // 301:Moved Permanently 
         // 302:Found 
         // 303:See Other 
         // 304:Not Modified 
         // 305:Use Proxy 
         // 307:Temporary Redirect 
         // 400:Bad Request 
         // 401:Unauthorized 
         // 402:Payment Required 
         // 403:Forbidden 
         // 404:Not Found 
         // 405:Method Not Allowed 
         // 406:Not Acceptable 
         // 407:Proxy Authentication Required 
         // 408:Request Timeout 
         // 409:Conflict 
         // 410:Gone 
         // 411:Length Required 
         // 412:Precondition Failed 
         // 413:Request Entity Too Large 
         // 414:Request-URI Too Long 
         // 415:Unsupported Media Type 
         // 416:Requested Range Not Suitable 
         // 417:Expectation Failed 
         // 500:Internal Server Error 
         // 501:Not Implemented 
         // 502:Bad Gateway 
         // 503:Service Unavailable 
         // 504:Gateway Timeout 
         // 505:HTTP Version Not Supported

statusText属性
　　这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

 

 

5 读取响应文本

 

这个responseText属性包含客户端接收到的HTTP响应的文本内容。

当readyState值为0、1或2时，responseText包含一个空字符串。

当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。

当readyState为4(已加载)时，该responseText包含完整的响应信息。

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

 

5 读取响应XML

XMLHttpRequest 的另一个重要属性 responseXML。如果服务器选择使用 XML 响应则该属性包含XML 响应。处理 XML 响应和处理普通文本有很大不同，涉及到解析、文档对象模型（DOM）和其他一些问题。对于很多简单的 Ajax 应用程序 responseText 就够了，但是您很快就会看到通过 Ajax 应用程序也能很好地处理 XML。

 

AJAX技术小结以及需要注意问题

 

1.  Ajax（Asynchronous JavaScript and XML）是一个结合了Java技术、XML、以及JavaScript的编程技术，可以让你构建基于Java技术的Web应用，并打破了使用页面重载的惯例。

使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。

 

2. 对于Mozilla﹑Netscape﹑Safari、Firefox等浏览器，创建XMLHttpRequest 方法如下:

XMLRequest = new XMLHttpRequest();

 

3. IE等创建XMLHttpRequest 方法如下：

XMLRequest= new ActiveXObject("Msxml2.XMLHTTP")

或XMLRequest = new ActiveXObject("Microsoft.XMLHTTP");

5. XMLRequest.open ('GET', URL, true);

XMLRequest.send (null);

6. open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。

7. 使用XML传输数据—虽然也能使用HTML或者其他的格式在客户端和服务器之间传递数据，不过XML显然是标准的做法，并且使用XML容易结构化和层次化数据。

 

8. 灵活运用，但不可滥用；

要尽力减少客户和服务器之间的通信量。如果应用得当，Ajax会使你的应用响应更快，但是如果每次用户从一个域移到另一个域时你都来回传递超量的数据，用户肯定不会满意。

利用Ajax，胖客户与瘦客户之间的界限不再分明，真正的赢家则是你的用户。

 

 

实现Ajax时最重要的问题是要力求简单，完全从用户出发，要尽量“傻瓜化”。要把用户放在心上，不要去做“简历驱动的设计”。

有一点很重要，使用Ajax不要过度。记住，JavaScript会在客户端的浏览器上运行，如果有数千行JavaScript代码，可能会让用户感觉速度太慢。如果脚本编写不当，就会很快失去控制，特别是当通信量增加时。

 

9. 浏览器问题

其次，惟一会影响你应用Ajax的就是浏览器问题。如果大量用户（或者特别重要的用户）还在使用比较旧的浏览器，如IE 5、Safari 1.2或Mozilla 1.0之前的版本，Ajax技术就不能奏效。

 

 

10. 安全问题

我们后面还会更多地谈到安全，但是这里需要先说明一点，Ajax有一些安全考虑。记住，可以在浏览器中查看源代码，这说明任何人都能知道你是怎么创建小部件的。建立XHR对象时必须包含统一资源定位符（uniform resource locators，URL），所以可能会有恶意用户修改你的网站，运行他们自己的代码。谨慎地使用Ajax可以降低这种风险。

 

 

11. 不需要整个浏览器刷新：有变化时如何向用户提供可视化的提示；

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

 

 

Ajax技术应用：

1. 会员注册窗体验证

2. 仿Google搜索建议列表