JavaScript Ajax编程 应用篇

一、Ajax  (Asynchronous JavaScript + XML)  能够像服务器请求额外的数据而无需卸载页面，即局部刷新技术
二、创建一个XHR对象

 function createXHR () { if (typeof XMLHttpRequest != "undefined") {  return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { // < Ie7   if (typeof arguments.callee.activeXString != "string") {  var version = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],   i, len;  for ( i = 0, len = version.length; i < len; i++) {   try {    new ActiveXObject(version[i]);   arguments.callee.activeXString = version[i];   break;   } catch (ex) {}  }  }  return new ActiveXObject(arguments.callee.activeXString); } else {  throw new Error("No Support For XHR"); } } var xhr = createXHR(); alert(xhr); // [object XMLHttpRequest]

三、用法    注意：本节的实例都应用于服务器端
    1.调用open()方法。它接受3 个参数：要发送的请求的类型（"get"、"post"等）、请求的URL 和表示是否异步发送请求的布尔值。
    2.要发送请求，调用send（）方法，接受一个参数，即要作为请求发送的主体。如果不需要，则为null
    3.返回的数据会自动填充到XHR对象的属性中。   

 var xhr = createXHR(); // GET方式同步打开example.txt文件 // 同步：javascript代码会等待服务器响应后执行 xhr.open("get", "example.txt", false); xhr.send(null); // status代表响应的http状态 // 200代表ok，304表示缓存 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){  alert(xhr.responseText); // 返回响应的文本，123456 } else {  alert("Request was unsuccessful: " + xhr.status); }

    4.example.text文件内容为字符串： 123456

四、前面的使用的同步的方式，当然不会存在问题，所有我们要挑战一个异步的方法。   

 var xhr = createXHR();
 // xhr.readyState表示请求/响应的当前状态，4代表已经接受了全部的响应数据 // 另外只要xhr.readyState的值发生了改变，那么xhr.onreadystatechange事件就会触发 xhr.onreadystatechange = function(){ if (xhr.readyState == 4){  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){  alert(xhr.responseText);  } else {  alert("Request was unsuccessful: " + xhr.status);  } } }; xhr.open("get", "example.txt", true); xhr.send(null);

五、每个HTTP 请求和响应都会带有相应的头部信息
    1.默认情况下，在发送XHR 请求的同时，还会发送下列头部信息。
        ①Accept：浏览器能够处理的内容类型。
        ②Accept-Charset：浏览器能够显示的字符集。