AJAX学习笔记(1)_AJAX简介

AJAX

参考文档：http://www.ibm.com/developerworks/cn/views/xml/libraryview.jsp?sort_by=&show_abstract=true&show_all=&search_flag=&contentarea_by=XML&search_by=%E6%8E%8C%E6%8F%A1+Ajax&topic_by=-1&type_by=%E6%89%80%E6%9C%89%E7%B1%BB%E5%88%AB&ibm-search=%E6%90%9C%E7%B4%A2
目前，编写应用程序时有两种基本的选择：
·桌面应用程序：运行桌面应用程序的代码在桌面计算机上。
·Web 应用程序：Web 应用程序运行在某处的 Web 服务器上 ，即要通过 Web 浏览器访问这种应用程序。

在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本，脚本执行完成后再发送回全新的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新加载。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。

AJAX（Asynchronous JavaScript and XML），它并不是一种新的编程语言，而是一种新的方法（使用现有标准），在不加载整个页面的情况下，改变页面的内容。
Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器。而JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。JavaScript 代码在幕后发送请求。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应，可以继续使用。它可以根据需要自行与服务器进行交互。JavaScript可以使多种任务仅在用户端就可以完成而不需要网络和服务器的参与，从而支持分布式的运算和处理。

可以分为以下要点：
·获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。 
·修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。 （即时修改表单）
·解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM（请参阅 下一节），处理 HTML 表单服务器返回的 XML 数据的结构。 （处理服务器返回的XML数据）

创建XMLHttpRequest对象（兼容性）
在 Microsoft 浏览器上创建 XMLHttpRequest 对象

          <script language="javascript" type="text/javascript">
            var request = false;//用于之后的if条件
            try {
              request = new XMLHttpRequest();//非IE浏览器创建XMLHTTPRequest对象
            } catch (trymicrosoft) {
              try {
                request = new ActiveXObject("Msxml2.XMLHTTP");//较新版本的IE Msxml2.XMLHTTP
              } catch (othermicrosoft) {
                try {
                  request = new ActiveXObject("Microsoft.XMLHTTP");//较老版本的IE则使用 Microsoft.XMLHTTP
                } catch (failed) {
                  request = false;
                }
              }
            }//Try {成功时，运行……} catch(注释) {错误时，运行……} 类似if……else

            if (!request)
              alert("Error initializing XMLHttpRequest!");
            </script>
/*if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {xmlHttp = new XMLHttpRequest();}
最后这段也可以写成如上形式，如果request存在(被创建) 则 !request==false；由于XMLHttpRequest对象在IE下是由ActiveXObject对象引入 而在ff下直接就能引入(默认被初始化)，typeof XMLHttpRequest != 'undefined' 即XMLHttpRequest的类型并不是为定义的 这也可以间接判断当前浏览器是不是IE。就是说如果 request对象不存在 并且 XMLHttpRequest对象已经定义(存在)*/

像这种不放到方法或函数体中的 JavaScript 代码称为静态 JavaScript。就是说代码是在页面显示给用户之前的某个时候运行。这也是多数 Ajax 程序员创建 XMLHttpRequest 对象的一般方式。若写在方法中，绑定于某个标签如input之类，会在输入完并提交后才提示他无法使用ajax，让人窝火。这样还不如一开始就告诉他不能使用ajax。

Ajax 世界中的请求/响应
为了让这个已经创立好的XMLHTTPRequest对象产生作用。首先需要一个 Web 页面能够调用的 JavaScript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是AJAX应用程序的基本流程：
1. 从 Web 表单中获取需要的数据。 
2. 建立要连接的 URL。
3. 打开到服务器的连接。
4. 设置服务器在完成后要运行的函数。 
5. 发送请求。
1、发出请求
function callServer() {
  //从web表单获取需要的数据
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  //当这两个值为空或不存在时，退出该函数
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  //建立要连接的URL，设置一个PHP脚本为链接目标
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  //打开到服务器的链接，指定连接方法get，最后一个参数代表异步链接（asynchronous），指向url，
  xmlHttp.open("GET", url, true);

  //设置回调函数,XMLHttpRequest的 onreadystatechange 属性可以告诉服务器在运行完成后做什么。
  xmlHttp.onreadystatechange = updatePage;

  //发送请求,因为已经在请求 URL 中添加了要发送给服务器的数据，所以为null
  xmlHttp.send(null);
}

2、处理响应

现在要面对服务器的响应了。现在只要知道两点：
·什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。（就绪状态）
·服务器将把响应填充到 xmlHttp.responseText 属性中。 

function updatePage() {
//如果是就绪状态，则使用服务器返回的值（这里是用户输入的城市和州的 ZIP 编码）设置另一个表单字段的值。
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
  //zipCode 是一个普通的文本字段。一旦服务器返回 ZIP 编码，updatePage() 方法就用城市/州的 ZIP 编码设置那个字段的值，用户就可以改写该值。这样做有两个原因：保持例子简单，说明有时候可能希望 用户能够修改服务器返回的数据
}

3、连接 Web 表单

一个 JavaScript 方法捕捉用户输入表单的信息并将其发送到服务器，另一个 JavaScript 方法监听和处理响应，并在响应返回时设置字段的值。所有这些实际上都依赖于调用 第一个 JavaScript 方法，它启动了整个过程。最简单的是用一个button绑定，但也可以绑定一个onchange事件监听器之类的。

<form>
<p>City: <input type="text" name="city" id="city" size="25" 
       onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25" 
       onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>