掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 - The Diigo Meta page

• 17 Sep 07
  

  samuel tao
  • Web 2.0（在很大程度上）消除了这种看得见的往复交互。比如访问 Google Maps 或 Flickr 这样的站点（到这些支持 Web 2.0 和 Ajax 站点的链接请参阅 参考资料）。比如在 Google Maps 上，您可以拖动地图，放大和缩小，只有很少的重绘操作。当然这里仍然有请求和响应，只不过都藏到了幕后。作为用户，体验更加舒适，感觉很像桌面应用程序。这种新的感受和范型就是当有人提到 Web 2.0 时您所体会到的。
  • XMLHttpRequest 简介
  • • open()：建立到服务器的新请求。
     
    • send()：向服务器发送请求。
     
    • abort()：退出当前请求。
     
    • readyState：提供当前 HTML 的就绪状态。
     
    • responseText：服务器返回的请求响应文本
  • 清单 6. 使用 XMLHttpRequest 的创建方法
    

    <script language="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 initializing XMLHttpRequest!"); } function getCustomerInfo() {  createRequest();  // Do something with the request variable } </script>
  • 欢迎使用沙箱

  • 打开请求

     

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

     

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

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

    通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “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);  }

  • 如果需要发送安全信息或 XML，可能要考虑使用 send() 发送内容（本系列的后续文章中将讨论安全数据和 XML 消息）。如果不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可。因此您会发现在本文中的例子中只需要这样发送请求（参见 清单 10）。

     
    清单 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);  }
  • onreadystatechange 属性该登场了
  • 事实上，每当 HTTP 就绪状态改变时它都会调用该方法。这意味着什么呢？首先必须理解 HTTP 就绪状态。
  • if (request.status == 200)  alert("Server is done!");
  • responseText 中的文本内容，比如格式和长度，有意保持含糊。这样服务器就可以将文本设置成任何内容。比方说，一种脚本可能返回逗号分隔的值，另一种则使用管道符（即 | 字符）分隔的值，还有一种则返回长文本字符串。何去何从由服务器决定。
  • 如果服务器选择使用 XML 响应则该属性包含（也许您已经猜到）XML 响应。处理 XML 响应和处理普通文本有很大不同，涉及到解析、文档对象模型（DOM）和其他一些问题。后面的文章中将进一步介绍 XML。

  10 more annotations...

• 13 Nov 06
  

  Dagang Wei

  web_dev

• 30 Jul 06
  

  zaoliu

  javascript

• 17 Jul 06
  

  Jin Lu

  ajax tutorial

• 19 Mar 06
  

  Steven Yu

  来自IBM网站

  Ajax XMLHttpRequest

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.