Ajax入门

web2.0的宠儿-Ajax入门
Ajax(Asynchronous JavaScript + XML)

What is Ajax?
Ajax不是一门新的技术,只是运用几门技术组装成一个强大的功能,包含的是技术有:
HTML:用于建立 Web 表单并确定应用程序其他部分使用的字段。
JavaScript:是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
DHTML:DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
DOM:文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。
……
JavaScript 对象:XMLHttpRequest(处理所有服务器通信的对象)
支持多种浏览器的方式创建 XMLHttpRequest 对象步骤:
建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。
尝试在 Microsoft 浏览器中创建该对象： 尝试使用 Msxml2.XMLHTTP 对象创建它。如果失败，再尝试 Microsoft.XMLHTTP 对象。
如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。
代码片断:
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*IE客户端*/
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/
/*非IE客户端*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}
1)发出请求
从 Web 表单中获取需要的数据。
建立要连接的 URL。
打开到服务器的连接。
设置服务器在完成后要运行的函数。
发送请求。
代码片断:
function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Only go on if there are values for both fields
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;
  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
  // Open a connection to the server
  //指定了连接方法（GET）和要连接的 URL。
  //最后一个参数如果设为 true，那么将请求一个异步连接（这就是 Ajax 的由来）。
  //如果使用 false，那么代码发出请求后将等待服务器返回的响应。
  //如果设为 true，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 JavaScript 方法）。
  xmlHttp.open("GET", url, true);
  // Setup a function for the server to run when it's done
  //onreadystatechange 属性可以告诉服务器在运行完成 后（可能要用五分钟或者五个小时）做什么
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  //已经在请求 URL 中添加了要发送给服务器的数据（city 和 state），
  //所以请求中不需要发送任何数据。这样就发出了请求，服务器按照您的要求工作。
 
  xmlHttp.send(null);
}
2)处理响应
什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。
服务器将把响应填充到 xmlHttp.responseText 属性中。
代码片断:
function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}
本文来源于Jacken.zone(http://www.jacken.com.cn),原文地址: http://www.jacken.com.cn/web20-pets-ajax-starting.yy/