掌握 Ajax

lastwinner · 发表于 2006-6-26 22:46

应付 Microsoft
看起来似乎一切良好，至少在用 Internet Explorer 试验这些代码之前是这样的。如果这样试验的话，就会看到图 1 所示的糟糕情形。
图 1. Internet Explorer 报告错误

——————————————————————————————————————————
Microsoft 参与了吗？
关于 Ajax 和 Microsoft 对该领域不断增长的兴趣和参与已经有很多文章进行了介绍。事实上，据说 Microsoft 最新版本的 Internet Explorer —— version 7.0，将在 2006 年下半年推出 —— 将开始直接支持 XMLHttpRequest，让您使用 new 关键字代替所有的 Msxml2.XMLHTTP 创建代码。但不要太激动，仍然需要支持旧的浏览器，因此跨浏览器代码不会很快消失。

lastwinner · 发表于 2006-6-26 22:46

显然有什么地方不对劲，而 Internet Explorer 很难说是一种过时的浏览器，因为全世界有 70% 在使用 Internet Explorer。换句话说，如果不支持 Microsoft 和 Internet Explorer 就不会受到 Web 世界的欢迎！因此我们需要采用不同的方法处理 Microsoft 浏览器。

经验证发现 Microsoft 支持 Ajax，但是其 XMLHttpRequest 版本有不同的称呼。事实上，它将其称为几种不同的东西。如果使用较新版本的 Internet Explorer，则需要使用对象 Msxml2.XMLHTTP，而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP。我们需要支持这两种对象类型（同时还要支持非 Microsoft 浏览器）。请看看清单 4，它在前述代码的基础上增加了对 Microsoft 的支持。

lastwinner · 发表于 2006-6-26 22:49

清单 4. 增加对 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>
很容易被这些花括号迷住了眼睛，因此下面分别介绍每一步：

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

lastwinner · 发表于 2006-6-26 22:50

这样修改代码之后再使用 Internet Explorer 试验，就应该看到已经创建的表单（没有错误消息）。我实验的结果如图 2 所示。
图 2. Internet Explorer 正常工作

lastwinner · 发表于 2006-6-26 22:52

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

lastwinner · 发表于 2006-6-26 22:54

如果按照这种方式编写代码，那么在处理 Ajax 之前需要调用该方法。因此还需要清单 6 这样的代码。
清单 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>
此代码惟一的问题是推迟了错误通知，这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的表单有 10 或 15 个字段、选择框等，当用户在第 14 个字段（按照表单顺序从上到下）输入文本时要激活某些 Ajax 代码。这时候运行 getCustomerInfo() 尝试创建一个 XMLHttpRequest 对象，但（对于本例来说）失败了。然后向用户显示一条警告，明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据！这是非常令人讨厌的，而讨厌显然不会吸引用户再次访问您的网站。
如果使用静态 JavaScript，用户在点击页面的时候很快就会看到错误信息。这样也很烦人，是不是？可能令用户错误地认为您的 Web 应用程序不能在他的浏览器上运行。不过，当然要比他们花费了 10 分钟输入信息之后再显示同样的错误要好。因此，我建议编写静态的代码，让用户尽可能早地发现问题。

lastwinner · 发表于 2006-6-26 22:56

用 XMLHttpRequest 发送请求
得到请求对象之后就可以进入请求/响应循环了。记住，XMLHttpRequest 惟一的目的是让您发送请求和接收响应。其他一切都是 JavaScript、CSS 或页面中其他代码的工作：改变用户界面、切换图像、解释服务器返回的数据。准备好 XMLHttpRequest 之后，就可以向服务器发送请求了。
欢迎使用沙箱
Ajax 采用一种沙箱安全模型。因此，Ajax 代码（具体来说就是 XMLHttpRequest 对象）只能对所在的同一个域发送请求。以后的文章中将进一步介绍安全和 Ajax，现在只要知道在本地机器上运行的代码只能对本地机器上的服务器端脚本发送请求。如果让 Ajax 代码在 www.breakneckpizza.com 上运行，则必须 www.breakneck.com 中运行的脚本发送请求。

lastwinner · 发表于 2006-6-26 22:57

设置服务器 URL
首先要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求，但仍然是建立连接所必需的，显然现在您应该知道如何构造 URL 了。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该 URL。比如，清单 7 中的 JavaScript 代码获取电话号码字段的值并用其构造 URL。
清单 7. 建立请求 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;
   }
   }
}
if (!request)
   alert("Error initializing XMLHttpRequest!"

;
function getCustomerInfo() {
var phone = document.getElementById("phone".value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
}
</script>

lastwinner · 发表于 2006-6-26 22:58

这里没有难懂的地方。首先，代码创建了一个新变量 phone，并把 ID 为 “phone” 的表单字段的值赋给它。清单 8 展示了这个表单的 XHTML，其中可以看到 phone 字段及其 id 属性。
清单 8. Break Neck Pizza 表单

<body>
  <p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>
  <form action="POST">
<p>Enter your phone number:
<input type="text" size="14" name="phone" id="phone"
         onChange="getCustomerInfo();" />
</p>
<p>Your order will be delivered to:</p>
<div id="address"></div>
<p>Type your order in here:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="Order Pizza" id="submit" /></p>
  </form>
</body>

还要注意，当用户输入电话号码或者改变电话号码时，将触发清单 8 所示的 getCustomerInfo() 方法。该方法取得电话号码并构造存储在 url 变量中的 URL 字符串。记住，由于 Ajax 代码是沙箱型的，因而只能连接到同一个域，实际上 URL 中不需要域名。该例中的脚本名为 /cgi-local/lookupCustomer.php。最后，电话号码作为 GET 参数附加到该脚本中："phone=" + escape(phone)。
如果以前没用见过 escape() 方法，它用于转义不能用明文正确发送的任何字符。比如，电话号码中的空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。
可以根据需要添加任意多个参数。比如，如果需要增加另一个参数，只需要将其附加到 URL 中并用 “与”（&）字符分开 [第一个参数用问号（?）和脚本名分开]。

lastwinner · 发表于 2006-6-26 23:14

打开请求

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

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

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

[转载] 掌握 Ajax