ajax java对象返回前台少了属性_Ajax完整详细教程（二）

Web 2.0 一瞥

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

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

XMLHttpRequest 简介

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

open()：建立到服务器的新请求。

send()：向服务器发送请求。

abort()：退出当前请求。

readyState：提供当前 HTML 的就绪状态。

responseText：服务器返回的请求响应文本。

用 XMLHttpRequest 做什么?

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

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

清单 1. 创建新的 XMLHttpRequest 对象

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

清单 2. 创建 XMLHttpRequest 的 Java 伪代码

XMLHttpRequest request = new XMLHttpRequest();

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

错误处理

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

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

一定要理解这些步骤：

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 浏览器的支持

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

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 试验，就应该看到已经创建的表单(没有错误消息)。

静态与动态

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

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

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

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

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

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

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

用 XMLHttpRequest 发送请求

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

欢迎使用沙箱

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

设置服务器 URL

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

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

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

清单 8. Break Neck Pizza 表单

Enter your phone number:

onChange="getCustomerInfo();" />

你的订单会被发送到:

你的订单类型:

还要注意，当用户输入电话号码或者改变电话号码时，将触发 清单 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