从Ajax到JQuery Ajax学习

Ajax篇

XMLDocument和XMLHttpRequest对象

第一：创建XMLHttpRequest请求对象

复制代码 代码如下:

function getXMLHttpRequest() { var xRequest=null; if(window.XMLHttpRequest) { xRequest=new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ xRequest=new ActiveXObject("Microsoft.XMLHTTP"); } return xRequest; }

或者：

复制代码 代码如下:

var request=null; function createRequest() { try { request=new XMLHttpRequest(); //非Microsoft IE浏览器 } catch (trymicrosoft) { //Microsoft IE try { request=new ActiveXObject(“Msxml2.XMLHTTP”); } catch (othermicrosoft) { try { request=new ActiveXObject(“Microsoft.XMLHTTP”); } catch (failed) { request=null; } } } if (request==null) alert(“Error creating request object!”); } [code] 这个独立的创建XMLHttpRequest请求对象的函数就可以被调用了。 注意：XMlHTTP对象不是W3C标准，因此在创建时要分别考虑不同浏览器环境的支持。 XMLHTTP对象一共就6个方法8个属性，支持两种执行模式：同步和异步。 XMLHTTP对象的属性和方法列表(来自IXMLHTTPRequest接口)： 属性名 类型 描述 onreadystatechange N/A 指定当就绪状态发生改变时调用的事件处理函数，仅用于异步操作 readyState Long 异步操作的状态：未初始化(0)，正在加载(1)，已加载(2)，交互(3)，已完成(4) responseBody Variant 将响应信息正文作为unsigned byte数组返回 responseStream Variant 将响应信息正文作为一个ADO Stream对象返回 responseText String 将响应信息正文作为一个文本字符串返回 responseXML Object 通过XMLDom将响应信息正文解析为XMLDocument对象 status Long 服务器返回的HTTP状态码 statusText String 服务器HTTP响应行状态 方法名 描述 abort 取消当前 HTTP 请求 getAllResponseHeaders 从响应信息中检索所有的首部字段 getResponseHeader 从响应信息正文中获得一个 HTTP 首部字段值 open(method,url,boolAsync,bstrUser,bstrPassword) 打开一个与 HTTP 服务器的连接 send(varBody) 向HTTP服务器发送请求。可包含正文。 setRequestHeader(bstrHeader, bstrValue) 设定一个请求的首部字段 第二：向服务器发送请求 通过XMLHttpRequest对象向服务器发送请求是非常简单，只需要给它传递一个服务器页面的URL，这个页面将生成数据。 [code] function sendRequest(url,params,HttpMethod) { if(!HttpMethod){ HttpMethod="POST"; } var req=getXMLHttpRequest(); if(req){ req.open(HttpMethod,url,true); req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); req.send(params); } }

通过以上代码对请求进行设置后，会立即将控制权返回给我们，与此同时网络和服务器则忙着执行它们自己的任务。

第三：使用回调函数监视请求

通过XMLHttpRequest对象我们向服务器发送了异步请求，那我们怎样才能知道请求已经完成了呢？因此处理异步通信的第二个部分是在代码中设置一个入口点，以便在调用结束的时候可以获取结果信息。这通常是通过分配一个回调函数来实现的。

回调函数非常适合用于大多数现代UI工具箱中的事件驱动的编程方法。

以下我们重写sendRequest()函数，如下：

复制代码 代码如下:

var req=null; //声明一个全局变量 function sendRequest(url,params,HttpMethod) { if(!HttpMethod){ HttpMethod="GET"; } req=getXMLHttpRequest(); if(req){ req.onreadystatechange=onReadyStateChange; //注意这就是onreadystatechange回调函数用来监视请求。具体是通过自定义的Javascript函数onReadyStateChange()来进行事件处理。 req.open(HttpMethod,url,true); req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); req.send(params); } }

以下的回调函数onReadyStateChange就是用来处理从服务器得到的响应信息。

view sourceprint?01 function onReadyStateChange(){

02 var data=null;

03 if (req.readyState==4){

04

05 if (req.status==200) {

06 data=req.responseText;

07 } else {

08 data="loading.....["+req.readState+"]";

09 }

10

11 }

12 .....在这可以做一些与此返回信息有关的操作，比如输出信息等。

13 }

上述代码中使用了XMLHttpRequest对象的responseText属性，以文本字符串的形式获取响应中的数据。对于简单的数据来说这是有用的。当我们需要服务器返回更大的结构化的数据集，就可以使用responseXML属性。如果已经将响应的MIME类型正确设置为text/xml，这个属性就会返回一个DOM文档，因此我们可以使用DOM的属性和函数（例如getElementById()和childNodes)来对它进行处理。

JQuery Ajax篇

jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

jQuery 的底层 AJAX 实现。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。$.ajax() 只有一个选项参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。 参数名

类型

描述

url

String

(默认: 当前页地址) 发送请求的地址。

type

String

(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

timeout

Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

async

Boolean

(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend

Function

发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

function (XMLHttpRequest) {

this; // the options for this ajax request

}

cache

Boolean

(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。

complete

Function

请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。

function (XMLHttpRequest, textStatus) {

this; // the options for this ajax request

}

contentType

String

(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

data

Object,

String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如：

{foo:["bar1", "bar2"]}转换为 '&foo=bar1&foo=bar2'。

dataType

String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据HTTP 包 MIME 信息返回responseXML 或 responseText，并作为回调函数参数传递，可用值：

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

error

Function

(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。

function (XMLHttpRequest, textStatus, errorThrown) {

// 通常情况下textStatus和errorThown只有其中一个有值

this; // the options for this ajax request

}

global

Boolean

(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件

ifModified

Boolean

(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData

Boolean

(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

success

Function

请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态

function (data, textStatus) {

// data could be xmlDoc, jsonObj, html, text, etc...

this; // the options for this ajax request

}

这里Ajax事件里面的 this 都是指向Ajax请求的选项信息的。

jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。

如：设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。其示例代码：

$.ajaxSetup({

url: "/xmlhttp/",

global: false,

type: "POST"

});

$.ajax({ data: myData });

serialize() 与 serializeArray()

serialize() : 序列表表格内容为字符串。

serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

以上JQuery Ajax的底层实现，我们一般很少用到，JQuery对jQuery.ajax()进行了封装，使我们能够更加简便的使用Ajax异步调用。

1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

2. jQuery.get( url, [data], [callback] ) ：使用GET方式来进行异步请求

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会作为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

如果你设置了请求的格式为"json"， 此时你没有设置Response回来的ContentType 为：Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件。