jquery 学习笔记20120710

本章开始学习使用Ajax与服务器通信

知识点一：

Ajax请求的生命周期

从客户端向服务器端发送请求，然后再从服务器端返回。

1. 创建并设置XHR实例  2. 将请求发送到服务器  服务器  3.将响应返回到客户端  4. 计算响应主体（客户端浏览器）

知识点二：

创建XHR实例

实例：

var xhr;

if(window.ActiveXObject)

{

　　xhr = new ActiveXObject("Microsoft.XMLHTTP");      测试ActiveX是否存在

}

else if(window.XMLHttpRequest)

{

　　xhr = new XMLHttpRequest();         测试XHR是否已经被定义

}

else

{

　　throw new Error("Ajax is not supported by this browser");      如果不支持Ajax则抛出错误

}

XMLHttpRequest(XHR)方法和属性见8-1图表

知识点三

发起请求

在向服务器发出请求之前，需要执行如下的设置步骤

1）指定HTTP方法，如（POST或GET）;

2）提供要接触的服务器端资源的URL;

3)告诉XHR实例如何通报进度；

4）为POST请求提供任何主体内容

第一步，第二步：xhr.open('GET','/some/resource/url');

第三步：xhr.send(null);

第四步：xhr.send('a=1&b=2&c=3')

知识点四：

保持跟踪进度

xhr.onreadystatechange = function()

{

　　if(this.readyState == 4)

　　{

　　　　if(this.status >= 200 && this.status < 300)

　　　　{

　　　　　　//执行成功

　　　　}

　　　　else

　　　　{

　　　　　　//出错

　　　　}

　　}

}

* HTTP规范定义所有位于200 - 299 区间内的代码状态为成功。

知识点五：

获取响应

无论响应主体的格式如何，都可以通过XHR实例的resoponseText属性来获取响应主体

如果返回JSON，必须转换为与其运行时等价的形式

如果返回HTML，必须被加载到合适的目标元素中

使用Ajax需要注意的：

1）实例化XHR对象需要特定浏览器的代码

2）就绪处理器需要处理很多乏味的状态改变

3）需要使用多种方式来处理响应主体，处理的方式取决于其格式

知识点六：

使用jquery 加载内容

load(url,parameters,callback)

向指定的URL发起带有可选请求参数的Ajax请求。

serialize()

根据包装集中所有成功的表单元素或者包装集的表单中所有成功的表单元素，创建正确格式化和编码的查询字符串，无返回参数。

serializeArray()

把所有成功的表单控件的值收集到包含控件名称和值的对象数组中。返回由表单数据组成的数组。