jQuery之Ajax步骤

2012-10-07

jQuery之Ajax方法1 . jQuery帮助之Ajax请求（一）jQuery.ajax(options) 2 . jQuery帮助之Ajax请求（二）jQuery

jQuery之Ajax方法

1 . jQuery帮助之Ajax请求（一）jQuery.ajax(options)

2 . jQuery帮助之Ajax请求（二）jQuery.get(url,[data],[callback]
3 . jQuery帮助之Ajax请求（三）jQuery.getJSON
4 . jQuery帮助之Ajax请求（四）jQuery.getScript(url,[callback])
5 . jQuery帮助之Ajax请求（五）jQuery.post
6 . jQuery帮助之Ajax请求（六）load(url,[data],[callback])
7 . jQuery帮助之Ajax其它（一）jQuery.ajaxSetup(options)
8 . jQuery帮助之Ajax其它（二）serialize()
9 . jQuery帮助之Ajax其它（三）serializeArray()

1 . jQuery帮助之Ajax请求（一）jQuery.ajax(options)

引自:http://www.flywe.net/article/javascript/jQuery_ajax.html

?????????????jQuery.ajax(options)

??????通过 HTTP 请求加载远程数据。

??????jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

??????$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

??????$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。

??????注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。

??????注意：如果dataType设置为"script"，那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载)

??????jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。

??????返回值：XMLHttpRequest

??????参数：options (可选) : AJAX 请求设置。所有选项都是可选的。

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

??????beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。Ajax 事件。?

?程序代码

"text": 返回纯文本字符串

??????error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。Ajax 事件。

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

??????username (String) : 用于响应HTTP访问认证请求的用户名。

??????示例：

??????加载并执行一个 JS 文件。
??????jQuery代码：

?? }
});

??????装入一个 HTML 网页最新版本。
??????jQuery代码：

??????显示 test.php 返回值(HTML 或 XML，取决于返回值)。
??????jQuery代码：

});

??????显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。
??????jQuery代码：

??function(data){
????alert("Data Loaded: " + data);
??}); });

??????从 test.js 载入 JSON 数据，附加参数，显示 JSON 数据中一个 name 字段数据。
??????jQuery代码：

??alert("JSON Data: " + json.users[3].name);
});

4 . jQuery帮助之Ajax请求（四）jQuery.getScript(url,[callback])

??jQuery.getScript(url,[callback])

??????通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

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

??????返回值：XMLHttpRequest

??????参数：
??????url (String) : 待载入 JS 文件地址。
??????callback (Function) : (可选)成功载入后回调函数。

??????示例：
??????载入 jQuery 官方颜色动画插件成功后绑定颜色变化动画。
??????HTML 代码：

jQuery

??????代码：

????????function (data, textStatus){
????????????// data 可以是 xmlDoc, jsonObj, html, text, 等等.
????????????//this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
????????????alert(data.result);
????????}, "json");

这里设置了请求的格式为"json"：
jQuery之Ajax步骤

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

注意一下，alert(data.result); 由于设置了Accept报头为“json”，这里返回的data就是一个对象，并不需要用eval()来转换为对象。

6 . jQuery帮助之Ajax请求（六）load(url,[data],[callback])

?load(url,[data],[callback])

??????载入远程 HTML 文件代码并插入至 DOM 中。

??????默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。

??????返回值：jQuery

??????参数：
??????url (String) : 待装入 HTML 网页网址。
??????data (Map) : (可选)发送至服务器的 key/value 数据。
??????callback (Callback) : (可选) 载入成功时回调函数。

??????示例：
??????加载文章侧边栏导航部分至一个无序列表。
??????HTML 代码:
??????

????<option selected="selected">Multiple</option>
????<option>Multiple2</option>
????<option selected="selected">Multiple3</option>
??</select><br/>
??<input type="checkbox" name="check" value="check1"/> check1
??<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
??<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
??<input type="radio" name="radio" value="radio2"/> radio2
</form>

??????jQuery 代码:
??????

9 . jQuery帮助之Ajax其它（三）serializeArray()

serializeArray()

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

??????返回值：jQuery

??????示例：
??????取得表单内容并插入到网页中。
??????HTML 代码:
??????

??????jQuery 代码:
??????

});

热点排行