ajax

http://www.cnblogs.com/Garden-blog/archive/2011/03/11/1981778.html

http://blog.csdn.net/liujiahan629629/article/details/22229669

　　ajax(Asynchronous JavaScript and XML)是实现web页面实现异步刷新，避免将整个页面提交给服务器，造成的数据交互性差用户等待时间长的问题。ajax可以实现将很少的数据提交给服务器并且得到服务器的相应返回到页面，实现页面部分刷新，达到快速更新部分页面。

　　ajax是web开发必不可少的一门技术。XMLHttprequest是ajax的核心。

　　用js创建XMLHttprequest对象：（由于一些浏览器的内核不同，其中的js技术版本也不同，所以创建XMLHttprequest对象的方式也不同）

　　IE浏览器：

　　xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 或

　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

　　非IE的浏览器：

　　xmlHttp = new XMLHttpRequest();

　　发出 Ajax 请求：

function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  
  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // Open a connection to the server
  //第三个参数：false：同步，代码发出请求后将等待服务器返回的响应。true：异步，服务器在后台处理请求的时候用户仍可以使用表单（甚至调用其他 JavaScript 方法）。
  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);
}

　　处理服务器响应

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

　　启动一个 Ajax 过程

<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>

以上是一个非常简单的例子：用户填入city和state，然后出发callServer()方法，发送ajax请求，然后通过updatePage监听响应，然后更新局部页面。

　　web 2.0的时代：web2.0配合ajax技术，使得页面的ajax请求和响应转到后台，用户在页面几乎看不带，而且页面也不会有闪烁和异动。

　　XMLHttpRequest的部分属性和方法：

　　　　·open()：建立到服务器的新请求。
　　　　·send()：向服务器发送请求。（一般用url发送请求之后，就不用send发送了，这时可以传参null：例：send(null)）
　　　　·abort()：退出当前请求。
　　　　·readyState：提供当前 HTML 的就绪状态。
　　　　·responseText：服务器返回的请求响应文本。
　　　　·responseXML：服务器返回的请求响应XML。

　　readyState相应的5中状态：

　　　　·0：请求没有发出（在调用 open() 之前）。
　　　　·1：请求已经建立但还没有发出（调用 send() 之前）。
　　　　·2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
　　　　·3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
　　　　·4：响应已完成，可以访问服务器响应并使用它

　　　　可以根据服务器响应返回的就绪状态码设置数据相应的进度，1=25%。。。4=100%，这样会使得界面更加的友好。

　 Http的状态码（request.status）：

　　　　当ajax发送请求，也得到了相应，而且相应完成这时 HTNL的就绪状态readyState=4，但是可能在服务器响应的时候出现错误。例如：常见的404，这是访问的页面不存在，可能是由于url写错了得原因。这种状态码就是HTTP的状态码。HTTP的状态码有很多比较常见的：

　　　　404：访问的页面不存在

　　　　401：禁止访问

　　　　200：正确返回，顺利访问

　　open(method,url,boolean):

　　　　open()方法的请求方式：get,post,head

　　　　head请求：head请求可以用来查看内容的长度和类型

　　　　想要获取请求内容的长度可以用：request.getResponseHearder("Content-Length");

　　　　想要获取请求内容的类型可以用：request.getResponseHearder("Content-Type");

　　　　用getAllRespoonseHearders()的方法可以获取返回的header（响应头）的全部内容。

DOM(document object model) DOM树，对象树，节点对象树