Ajax高级笔记 JavaScript高级程序设计笔记

Ajax通信与数据格式无关，从服务器获取的数据不一定是XML数据。

Ajax的核心：XMLHttpRequest对象(简称XHR)

在XHR对象之前，Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架。

XHR对象为向服务器发送信息和解析服务器响应提供了流畅的接口。

1.XMLHttpRequest对象

IE5是第一款引进XHR对象的浏览器，通过MSXML库中的ActiveX对象实现(有3个版本)。

　　兼容所有浏览器，创建XHR对象：

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

之后就能在所有浏览器创建XHR对象：var xhr = createrXHR();

2.原生XHR对象 (支持的浏览器: IE7+、FF、Chrome、Opera、Safari)

通过XMLHttpRequest构建函数，创建XHR对象：

var xhr = new XMLHttpRequest();

3.XHR用法

3-1.open()

open() 3个参数: 发送的类型、请求的URL、表是否异步的布尔值

xhr.open("get","example.php", false);

①URl为相对于执行代码的当前页，或绝对地址；

②false为同步，JavaScript代码会在服务器响应后再继续执行；

③调用open()只是启动一个请求以备发送，还没真正发送；

④只能在同个域中使用相同端口和协议的URL发送请求。

3-2.send()

send() 1个参数: 请求主体发送的数据，不需要通过请求主体发送数据则传入null。

调用send()后，请求被分派到服务器。

xhr.open("get","example.php", false) ;xhr.send(null);

3-3. 收到响应后，响应数据会自动填充XHR对象的属性：

responseText：作为响应的主体被返回的文本；

responseXML：若响应的内容类型”text/xml”或”application/xml”，此属性保存响应数据XML DOM文档

status：响应的HTTP状态；

statusText：HTTP状态的说明。

☆：无论什么内容类型，响应主体的内容都会保存在responseText属性中。对于非XML数据，responseXML属性值为null。
3-4.status属性确认响应是否成功返回

HTTP状态代码：

200：响应有效，responseText属性已就绪，内容类型正确下的responseXML也可访问。

304：响应有效，只是请求的资源并为修改，可直接使用浏览器中缓存的版本。