使用JS和Ajax发出异步请求
本文介绍了如何创建能够适应不同浏览器的XMLHttpRequest实例，建立和发送请求，并响应服务器。您将开始接触最基本和基础性的有关Ajax的全部对象和编程方法：XMLHttpRequest对象。该对象实际上仅仅是一个跨越所有Ajax应用程序的公共线程，您可能已经预料到，只有彻底理解该对象才能充分发挥编程的潜力。 XMLHttpRequest简介 XMLHttpRequest 是JS的一个对象。它是介绍 Web 2.0、Ajax 和大部分其他内容的核心。下面给出该对象的几个方法和属性： 1、open()：建立到服务器的新请求。 2、send()：向服务器发送请求。 3、abort()：退出当前请求。 4、readyState：提供当前 HTML 的就绪状态。 5、responseText：服务器返回的请求响应文本。 用XMLHttpRequest能够做什么呢，值得注意的是这些方法和属性都与发送请求及处理响应有关。事实上，如果看到XMLHttpRequest的所有方法和属性，就会发现它们都与非常简单的请求/响应模型有关。用好该对象可以彻底改变您的应用程序。 创建XMLHttpRequest对象实例 首先需要创建一个新变量并赋给它一个XMLHttpRequest对象实例。这在JS中很简单，只要对该对象名使用new关键字即可.创建新的XMLHttpRequest对象:var request = new XMLHttpRequest(); 创建 XMLHttpRequest的Java伪代码:XMLHttpRequest request = new XMLHttpRequest(); 错误与跨浏览器处理 在实际上各种事情都可能出错，而上面的代码没有提供任何错误处理。较好的办法是创建该对象，并在出现问题时优雅地退出。比如，任何较早的浏览器都不支持 XMLHttpRequest，您需要让这些用户知道有些地方出了问题。下面说明如何创建该对象，以便在出现问题的时候发出 JavaScript 警告。 创建具有错误处理能力的XMLHttpRequest对象 <script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); } catch (failed) { request = false; } if (!request) alert("Error initializing XMLHttpRequest!"); </script> 一定要理解这些步骤： 1、创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件，它表示还没有创建 XMLHttpRequest 对象。 2、增加 try/catch 块： 3、尝试创建 XMLHttpRequest 对象。 4、如果失败（catch (failed)）则保证 request 的值仍然为 false。 5、检查 request 是否仍为 false（如果一切正常就不会是 false）。 6、如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。 现在已经得到了一段带有错误检查的XMLHttpRequest对象创建代码，还可以告诉您哪儿出了问题。 增加对Microsoft浏览器的支持 <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> 下面分别介绍每一步： 1、创建一个新变量 request 并赋值 false。使用 false 作为判断条件，它表示还没有创建 XMLHttpRequest 对象。 2、增加 try/catch 块： 3、尝试创建XMLHttpRequest对象。 4、检查 request 是否仍然为 false（如果一切顺利就不会是 false）。 5、如果出现问题（request 是 false）则使用 JavaScript 警告通知用户出现了问题。 这样修改代码之后再使用InternetExplorer试验，就应该看到已经创建的表单（没有错误消息）。 静态代码与动态代码 代码都直接嵌套在script标记中,不放到方法或函数体中的JS代码称为静态JS。这种情况代码是在页面显示给用户之前的某个时候运行。虽然根据规范不能完全精确地知道这些代码何时运行对浏览器有什么影响，但是可以保证这些代码在用户能够与页面交互之前运行，这也是多数Ajax程序员创建XMLHttpRequest对象的一般方式。 将 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!"); } </script> 如果按照这种方式编写代码，那么在处理 Ajax 之前需要调用该方法。因此还需要使用XMLHttpRequest的创建方法。 function getCustomerInfo() { createRequest(); } 此方式惟一的问题是推迟了错误通知，这也是多数 Ajax 程序员不采用这一方法的原因。如果使用静态JS，用户在点击页面的时候很快就会看到错误信息。这样也很烦人，是不是？可能令用户错误地认为您的Web应用程序不能在他的浏览器上运行。不过，当然要比他们花费了10 分钟输入信息之后再显示同样的错误要好。因此，我建议编写静态的代码，让用户尽可能早地发现问题。 用XMLHttpRequest发送请求 得到请求对象之后就可以进入请求/响应循环了。记住XMLHttpRequest 惟一的目的是让您发送请求和接收响应。其他一切都是JS、CSS 或页面中其他代码的工作。如改变用户界面、切换图像、解释服务器返回的数据。准备好XMLHttpRequest 之后，就可以向服务器发送请求了。Ajax 采用一种沙箱安全模型。因此Ajax 代码（具体来说就是XMLHttpRequest对象）只能对所在的同一个域发送请求。记住：在本地机器上运行的代码只能对本地机器上的服务器端脚本发送请求。如让Ajax代码在www.google.com上运行，则必须在www.google.com中运行的脚本发送请求。 设置服务器URL 首先要确定连接的服务器的 URL。这并不是Ajax的特殊要求，但仍然是建立连接所必需的，显然现在您应该知道如何构造URL了。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该URL。 建立请求URL <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;