Ajax原理

　　Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写，Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。

　　Ajax的目的：Ajax 尝试建立桌面应用程序的功能和交互性，与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在 Web 应用程序中。 

　　 Ajax 应用程序所用到的基本技术：

1. HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
2. JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
3. DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
4. 文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

　接下来我们将讨论一个非常重要的对象：XMLHttpRequest　（这是一个 JavaScript 对象）异步的数据请求是通过这个对象来实现的

　创建XmlHttpRequest对象

< script language = " javascript "  type = " text/javascript " >
var  xmlHttp  =   new  XMLHttpRequest();
</ script >

 　　一般的Web程序实现过程：用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本，脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。

　　Ajax的Web应用程序过程：JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。

　　当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。

   然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。

 

　　看看JavaScript能帮助我们做什么?

1. 获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。注：我们可以通过得到的XMLHttpRequest名柄将JavaScript得到的表单数据从后台异步提交给服务器。
2.  修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。
3. 解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM，处理 HTML 表单服务器返回的 XML 数据的结构。     

　　getElementById()方法可以帮助我们实现前两条：

//  Get the value of the "phone" field and stuff it in a variable called phone
var  phone  =  document.getElementById( " phone " ).value;
//  Set some values on a form using an array called response
document.getElementById( " order " ).value  =  response[ 0 ];
document.getElementById( " address " ).value  =  response[ 1 ];

　

　　在不同的浏览器中如何获得XMLHttpRequest对象？

　　 以支持多种浏览器的方式创建 XMLHttpRequest 对象：　　

/* Create a new XMLHttpRequest object to talk to the Web server */
var  xmlHttp  =   false ;
/*@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 @*/
if  ( ! xmlHttp  &&   typeof  XMLHttpRequest  !=   ' undefined ' )  ... {
  xmlHttp = new XMLHttpRequest();
}

上面的代码分为三步：

　１．建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。

　２．尝试在 Microsoft 浏览器中创建该对象：

　　　尝试使用 Msxml2.XMLHTTP 对象创建它。

　　　如果失败，再尝试 Microsoft.XMLHTTP 对象。

　３．如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。

Ajax 世界中的请求/响应

发出请求:

  您已经有了一个崭新的 XMLHttpRequest 对象，现在让它干点活儿吧。首先需要一个 Web 页面能够调用的 JavaScript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有 Ajax 应用程序中基本都雷同的流程:

1. 从 Web 表单中获取需要的数据。
2. 建立要连接的 URL。
3. 打开到服务器的连接。
4. 设置服务器在完成后要运行的函数。
5. 发送请求。

示例 Ajax 方法就是按照这个顺序组织的：

 

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
  xmlHttp.open("GET", url, true);
  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  xmlHttp.send(null);
}

 

处理响应：

现在要面对服务器的响应了。现在只要知道两点：

• 什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。
• 服务器将把响应填充到 xmlHttp.responseText 属性中。

function  updatePage()  ... {
  if (xmlHttp.readyState == 4) ...{
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}