html Ajax和XMLHttpRequest

Ajax：Asynchronous Javascript and XML（异步的Javascript和XML），是基于Javascript和Http请求的
功能是快速创建动态网页，即在不重新载入整个页面的情况下，对网页的某部分进行更新。

Ajax的基础是XMLHttpRequest，步骤如下：
1. 首先创建一个XMLHttpRequest对象
2. 然后利用该对象向服务器发送请求”（在此时可以通过参数传递的方式向服务器端发送数据），读取服务器端的文件（xml、asp、php等）
3. 最后根据读取的文件内容来更新当前页面的部分区域的内容

1.创建一个XMLHttpRequest对象
在IE中： 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
Firefox等其他浏览器中：
xmlhttp = new XMLHttpRequest()

2.利用该对象向服务器发送请求"（在此时可以通过参数传递的方式向服务器端发送数据），读取服务器端的文件（xml、asp、php等）
XMLHttpRequest对象有两个相关方法：
1. open()用于初始化HTTP请求参数，但并不发送；
语法：
open(method, url, async, username, password)

下面来看看每个参数代表的含义：
1）method：取值可为GET、POST和HEAD。
2）url：指定了请求的目标文件地址。
3）async：取值为true或者false。指定了请求模式是同步（false）还是异步（true）。

    当async为true时，表示为异步请求。即请求之后，不等待响应，继续执行之后的代码。此时需要规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。
    当async为false时，表示为同步请求。即请求之后，要等待完全响应才能继续执行之后的代码。（此种模式容易造成堵塞，因此推荐使用异步请求模式）
2. send()用于发送HTTP请求。
使用open()方法中指定的参数，向服务器发送请求。

 XMLHttpRequest对象与发送请求相关的属性：readyState、status、statueText

1. readyState属性表示的是HTTP请求的状态，当一个XMLHttpRequest对象被创建时，这个属性值从0开始，直到接受到完整的HTTP响应，这个值增加到4。
0：Uninitialized 初始化状态。XMLHttpRequest对象已被创建或已被abort()方法重置；
1：Open open()方法已调用，但send()方法还没被调用，请求尚未发送
2：Sent send()方法已调用，HTTP请求已发送到服务器，但还没有收到响应
3：Receiving 所有响应头部已经收到。响应体开始接收但尚未完成
4：Loaded HTTP响应已经完全接收。

readyState属性值不会递减，除非当一个请求在处理过程中调用了open()或abort()方法。
每次这个属性值增加时，都会触发onreadystatechange事件句柄。

2. status属性是由服务器返回的HTTP代码状态。只能在readyState的值大于或等于3的时候读取，否则会出错。
status的值为200时，表示读取成功；而404表示"Not Found"错误。

3. statusText属性与status参数代表的含义相同，只是该参数使用字符串而不是数字来表示当前状态。

    status为200时对应的statusText的值为"OK"；
    status为404时对应的statusText的值为"Not Found"。

响应的内容
XMLHttpRequest对象有两个属性来存储响应的内容（应该就是读取的目标文件的内容）：responseText和responseXML

1. responseText属性：目前为止从服务器端接收到的响应体（不包括头部），如果还没有接收到数据（例如readyState<3），则是一个空字符串。

注：如果响应包含了为响应体指定编码的头部，则使用该编码。否则，使用Unicode UTF-8。

2. responseXML属性：对请求的响应，解析为XML并作为Document对象返回。

例子如下：

<script type="text/javascript">
var xmlhttp;

// 函数主体
function loadXMLDoc(url)
{
  xmlhttp=null;

  // 初始化XMLHttpRequest对象
  if (window.XMLHttpRequest)
  {
    // Firefox等现代浏览器中的XMLHttpRequest对象创建
    xmlhttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    // IE中的XMLHttpRequest对象创建
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  // 若创建成功，则开始解析目标XML文件
  if (xmlhttp!=null)
  {
    xmlhttp.onreadystatechange=state_Change; // 指定onreadystatechange事件句柄对应的函数
    xmlhttp.open("GET",url,true); // 初始化HTTP请求参数，GET方式，异步请求
    xmlhttp.send(null); // 发送请求
  }
  else
  {
    alert("Your browser does not support XMLHTTP.");
  }
}

// readyState递增时的监测函数，当"readyState==4"且"status=200"时，执行相应操作
function state_Change()
{
  if (xmlhttp.readyState==4) // 4 = "loaded"
  {
    if (xmlhttp.status==200) // 200 = "OK"
    {
      // responseText属性值是响应体的文本
      document.getElementByIdx_x('T1').innerHTML=xmlhttp.responseText;
    }
    else
    {
      alert("Problem retrieving data:" + xmlhttp.statusText);
    }
  }
}
</script>