jQuery中的Ajax技巧与方法

发表时间: 2024-04-24 07:00

1 jQuery Ajax

1.1 jQuery.ajax

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post, $.getJSON, $getScript。使用该方法进行异步数据通讯可以很灵活地设置请求的各个参数。常用参数和说明：

参数	描述
url	发送请求的地址
data	发送到服务器的数据。将自动转换为请求字符串格式。
type	请求方式 ("POST" 或 "GET")，默认为 "GET"
dataType	预期服务器返回的数据类型。可用值: xml,html,script,json,jsonp,text
success	请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据
error	默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"
async	默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行

示例：

$.ajax({

type: "POST",

url: "testServlet",

data: {"name":"itcast","location":"guangzhou"},

success: function(msg){

alert( "Data Saved: " + msg );

}

});

1.2 jQuery.get

$.get(url, [data], [callback], [type]) 通过远程 HTTP GET 请求载入信息；这是$.ajax的一个高级实现。

参数	描述
url	发送请求的地址
data	待发送 Key/value 参数
type	返回内容格式，xml, html, script, json, text, _default
callback	请求成功后的回调函数。参数：由服务器返回，并根据type参数进行处理后的数据

示例：

$.get("testServlet", { name: "John", time: "2pm" },

function(data){

alert("Data Loaded: " + data);

});

1.3 jQuery.post

$.post(url, [data], [callback], [type]) 通过远程 HTTP POST 请求载入信息；这是$.ajax的一个高级实现。

参数	描述
url	发送请求的地址
data	待发送 Key/value 参数
type	返回内容格式，xml, html, script, json, text, _default
callback	请求成功后的回调函数。参数：由服务器返回，并根据type参数进行处理后的数据

示例：

$.post("testServlet", { name: "John", time: "2pm" },

function(data){

alert("Data Loaded: " + data);

});

1.4 jQuery.getJSON

$.getJSON(url, [data], [callback]) 通过远程 HTTP GET 请求载入json信息；这是$.ajax的一个高级实现。

参数	描述
url	发送请求的地址
data	待发送 Key/value 参数
callback	请求成功后的回调函数。

示例：

$.getJSON("testServlet", { name: "John", time: "2pm" }, function(json){

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

});

1.5 jQuery.getScript

$.getScript(url, [callback]) 通过远程 HTTP GET 请求载入并执行一个 JavaScript 文件。

参数

描述

url

待载入 JS 文件地址。

callback

请求成功后的回调函数。

示例：

$.getScript("test.js", function(){

alert("Script loaded and executed.");

});

1.6 load

load(url, [data], [callback]) 载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

参数	描述
url	待装入 HTML 网页网址
data	待发送 Key/value 参数
callback	请求成功后的回调函数。

示例：

$("#divID").load("feeds.jsp", {limit: 25}, function(){

alert("The last 25 entries in the feed have been loaded");

});