Ajax学习（一）

      AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：使用XHTML+CSS来表示信息； 使用Javascript操作Document Object Model进行动态显示及交互； 使用 XML 和 XSLT 进行数据交换及相关操作； 使用 XMLHttpRequest对象与Web服务器进行异步数据交换； 使用 JavaScript 将所有的东西绑定在一起。 

XMLHttpRequest 对象
要了解的一个对象可能对您来说也是最陌生的，即 XMLHttpRequest。这是一个 JavaScript 对象，创建该对象很简单

XMLHttpRequest对象是处理所有服务器通信的对象。通过 XMLHttpRequest 对象与服务器进行对话的是 JavaScript 技术。

      Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。

加入一些 JavaScript                                                                                                                                                                                   得到 XMLHttpRequest 的句柄后，使用 JavaScript 代码完成非常基本的任务：
获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。
修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。
解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM，处理 HTML 表单服务器返回的 XML 数据的结构。

以 DOM 结束
      最后还有 DOM，即文档对象模型。JavaScript 技术中使用 DOM 很容易，也非常直观。按照常规也许应该说明如何使用 DOM，或者至少要给出一些示例代码，但这样做您可能会被误导。即使不理会 DOM，仍然能深入地探讨 Ajax。当需要在 JavaScript 代码和服务器之间传递 XML 和改变 HTML 表单的时候，我们再深入研究 DOM。没有它也能做一些有趣的工作，因此现在就把 DOM 放到一边吧。

 

正式开始完Ajax

获取 Request 对象
     有了上面的基础知识后，获取XMLHttpRequest 对象是很简单的。XMLHttpRequest 是 Ajax 应用程序的核心。  但令人奇怪的是，XMLHttpRequest 成了这场浏览器之间战争的牺牲品之一。因此，针对不同的浏览器获得 XMLHttpRequest 对象可能需要采用不同的方法。

Microsoft 浏览器                                                                                                                                                                  

       Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML（可以通过 参考资料 进一步了解 MSXML）。因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道，那么必须用一种特殊的方式创建对象。但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同，MSXML 实际上有两种不同的版本，因此必须对这两种情况分别编写代码。

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
                   try {
                           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e2) {
                                          xmlHttp = false;
                                          }
              }

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");这两行代码就是尝试使用两个版本的 MSXML 创建对象，如果失败则使用另一个版本创建该对象。如果都不成功，则将 xmlHttp 变量设为 false，告诉您的代码出现了问题。出现这种情况，可能是因为安装了非 Microsoft 浏览器，需要使用不同的代码。

处理 Mozilla 和非 Microsoft 浏览器

var xmlHttp = new XMLHttpRequest object;  这行简单得多的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中，创建了 XMLHttpRequest 对象。

支持所有浏览器
var xmlHttp = false;

try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

这段代码的核心分为三步：
1、建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。
2、尝试在 Microsoft 浏览器中创建该对象：
      1）尝试使用 Msxml2.XMLHTTP 对象创建它。
      2）如果失败，再尝试 Microsoft.XMLHTTP 对象。
3、如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。
最后，xmlHttp 应该引用一个有效的 XMLHttpRequest 对象，无论运行什么样的浏览器。

Ajax请求/响应

发出请求
您已经有了一个崭新的 XMLHttpRequest 对象，现在让它干点活儿吧。首先需要一个 Web 页面能够调用的 JavaScript 方法。接下来就是在所有 Ajax 应用程序中基本都雷同的流程：
1、从 Web 表单中获取需要的数据。
2、建立要连接的 URL。
3、打开到服务器的连接。
4、设置服务器在完成后要运行的函数。
5、发送请求。

function callServer() {
  // 获取ID为city的表单信息
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // 判断都不为空
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;
  // 创建要发送的URl
  var url = "/scripts/getCode.aspx?city=" + escape(city) + "&state=" + escape(state);
  // 打开连接
  xmlHttp.open("GET", url, true);
  // 请求返回执行的函数
  xmlHttp.onreadystatechange = updatePage;
  // 发送请求
  xmlHttp.send(null);
}

开始的代码使用是基本 JavaScript 代码获取几个表单字段的值。然后设置一个 aspx页面 脚本作为链接的目标。要注意脚本 URL 的指定方式，city 和 state（来自表单）使用，简单的 GET 参数附加在 URL 之后。

然后打开一个连接，这是您第一次看到使用 XMLHttpRequest。其中指定了连接方法（GET）和要连接的 URL。最后一个参数如果设为 true，那么将请求一个异步连接。如果使用 false，那么代码发出请求后将等待服务器返回的响应。如果设为 true，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 JavaScript 方法）。

xmlHttp（XMLHttpRequest 对象实例）的 onreadystatechange 属性可以告诉服务器在运行完成后（可能要用五分钟或者五个小时）做什么。因为代码没有等待服务器，必须让服务器知道怎么做以便您能作出响应。在这个示例中，如果服务器处理完了请求，一个特殊的名为 updatePage() 的方法将被触发。

最后，使用值 null 调用 send()。因为已经在请求 URL 中添加了要发送给服务器的数据（city 和 state），所以请求中不需要发送任何数据。这样就发出了请求，服务器按照您的要求工作。

处理响应

什么也不要做，直到 xmlHttp.readyState 属性的值等于4（就绪状态）。
服务器将把响应填充到 xmlHttp.responseText 属性中。 使用xmlHttp.responseText 属性获得服务器的响应。

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