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树，对象树，节点对象树