读Brett McLaughlin的掌握AJAX系列（1，2）--Ajax 简介&使用 JavaScript 和 Ajax 发出异步请求

一.AJAX的用到的技术：
      1.HTML
      2.JAVASCRIPT，它是运行AJAX应用程序的核心代码，帮助改进与WEB服务器的通信。
      3.DHTML，用于动态更新表单
      4.文档对象模型DOM用于HTML结构和服务器返回的XML

二XmlHttpRequest对象
      这个是用于处理服务器通信的对象。
      传统的WEB应用程序中，用户填写表单字段并发送给服务器，由服务器将它转发给处理表单的脚本或CGI，脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的HTML，也可能上确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。在服务器处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈。
      AJAX基本上就是把JAVASCRIPT技术和XMLHTTPRequest对象放在WEB表单和服务器之间。当用户填写表单时，数据发送给一些JAVASCRIPT代码而不是直接发送给服务器。相反，JAVASCRIPT代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁，消失或延迟。换句话说，JAVASCRIPT代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步的发送的，也就是说JAVASCRIPT（用户）不必等待服务器的响应。因此用户可以继续输入数据，滚动屏幕和使用应用程序。
      服务器将数据返回给JAVASCRIPT代码，后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户却获得了数据。JAVASCIPT代码甚至可以对收到的数据执行某种计算，再发送另个请求，完全不须用户干预。XMLHTTPREQUEST的强大之处，它可以需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。
     1. 在JAVASCRIPT中建立一个XMLHTTPREQUEST对象
      <script language="javascript" type="text/javascript">
      var xmlhttp=new xmlhttpRequest();
      </script>
      2.要熟悉getElementById("xxxbody").value=response[0];
      3.重要的DOM
三合适的创建Request对象的代码
     在编写JAVASCRIPT创建XmlHttpRequet对象的时候，需要考虑不同的浏览器问题，因为这场浏览器之间的斗争至今仍在继续
    var xmlhttp=false;
try
{
 xmlhttp=new ActiveObject("Msxml2.XMLHTTP");
}
catch (E)
{
 try
 {
  xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
 }
 catch (e2)
 {
  xmlhttp=false;
 }
}
//以上是对微软XMLHTTP版本的控制
if(!xmlhttp&&typeof XMLHttpRequest!='#ff0000')
{
 xmlhttp=new XmlHttpRequest();
}
四AJAX的请求和响应模型
（1）.发送请求，大致遵循下面的几个步骤：
   1.从web表单中获取需要的数据
   2.建立要连接的URL
   3.打开到服务器的连接
   4.设置服务器完成后要运行的函数
   5.发送请求
如下面的代码所示：
  var city=document.getElementById("city").value;
var state=document.getElementById("state").value;
//上面是获取表单数据
if((city==null)||(city==""))return;
if((state==null)||state==""))return;
var url="/scripts/getzipcode.php?city="+escape(city)+"&state="+escape(state);
//上面是建立URL
xmlhttp.open("GET",url,true);
//上面是打开到URL的连接
xmlhttp.onreadystatechange=updatepage;
//上面是设置服务器完成后执行的函数
xmlhttp.send(null);
//上面是发送请求

 五.服务器响应
需要了解下面两点：
1.什么也不要做，知道xmlhttp.readyState=4;
2服务器把响应填充到xmlhttp.responseText属性中
第一点是就绪状态
第二点是用responseText属性获得服务器的响应
3.处理服务器的响应
function updatepage()
{
   if(xmlhttp.readyState==4)
      {
         var resonse=xmlhttp.responseText;
         document.getElementById("zipCode").value=response;
      }
}
这段代码等待服务器调用，如果是就绪状态，则使用服务器返回的值设置表单的值，于是包含ZIP编码的zipcode字段突然出现了，而用户没有按下任何按钮，用户还可以更改这个字段的值，因为用户可能要改变服务器返回的数据。
六连接服务器表单
一个JAVASCRIPT代码用于捕捉用户输入的表单信息并发送给服务器，另一个JAVASCRIPT监听并处理服务器响应，并在返回时设置字段的值。实际上都依赖第一个JAVASCIPT方法，它启动了整个过程。如下面代码：
<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>
当用户输入信息是,callserver函数被激发，AJAX开始运行了，由于AJAX是沙箱型的，因而只能连接到一个域，实际上url变量中不需要域名，escape()用于转义不能用明文发送的任何字符。如空格将被转义为%20。
注意到send(null),这里没有用send()来发送数据，而是通过URL发送数据，这要容易的多，当需要发送安全信息或者XML时，我们可以考虑send（）
七：
   web2.0和AJAX的最大的秘密在与XMLHTTPREQUEST的一个简单属性：onreadyStatechange,建立请求并发送请求后，由于是异步的，所以javascript代码不会等待服务器，会继续向下执行，完成后把控制返回给表单。用户可以继续输入信息，应用程序不需要等待服务器；这个会有个问题 ：服务器完成请求后干什么，答案是什么都不会干，显然这样不行，需要在完成XMLHTTPREQUEST给它的请求后告诉接下来怎么做。这就是onreadystatechange的作用所在了，它允许指定一个回调函数；回调允许服务器反向调用WEB页面的代码；它给了服务器一定的控制权，当服务器完成请求后，会查看XMLHTTPREQUEST的onreadystatechange属性，执行该属性执行的方法  

readyState表示HTTP的就绪状态一般有五种：
0：请求没有发出（通常在调用open（）之前）
1：请求已经建立但还没有发出（调用send（））之前
2：请求已发出正在处理中（可以从响应中得到头部）
3：请求已经处理，响应中有部分数据可用，但服务器还没完全完成响应
4：响应已完成，可以访问服务器并使用它
也许我们希望执行循序是0，1，2，3，4，但实际上很少如此，对于 Ajax 编程，需要直接处理的惟一状态就是就绪状态 4，它表示服务器响应已经完成，可以安全地使用响应数据了，即： if(xmlhttp.readyState==4)
但是这还是不合理，在这里，服务器只是履行了请求，但如果没有返回给用户预期的数据，报告了错误，该怎么办？因此我们除了使用就绪状态外，还要检查HTTP状态码，我们期望的状态码是200，它表示一切正常，如： function updatePage() {
     if (request.readyState == 4)
       if (request.status == 200)
         alert("Server is done!");
       else if (request.status == 404)
         alert("Request URL does not exist");
       else
         alert("Error: status code is " + request.status);
   }
这样的错误判断能处理WEB应用程序中80%的问题！
最后，还要介绍 XMLHttpRequest 的另一个重要属性 responseXML。如果服务器选择使用 XML 响应则该属性包含（也许您已经猜到）XML 响应。处理 XML 响应和处理普通文本有很大不同，涉及到解析、文档对象模型（DOM）和其他一些问题。