本文共 2646 字,大约阅读时间需要 8 分钟。
1. load()方法
load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中,它的结构为:
load(url[, data][, callback])
url参数表示请求HTML页面的URL地址,data参数表示发送至服务器的key/value数据,callback参数表示请求完成时的回调函数,例如:
$(function(){ $("#send").click(function(){ $("#resText").load("test.html"); });});
load()方法的URL参数的语法结构为"url selector",比如只需加载test.html页面中class为"para"的内容,例如:
$("#resText").load("test.html .para");
load()方法的传递方式根据参数data来自动指定,如果没有参数传递,则采用GET方式,反之则自动转换为POST方式,例如:
$("#resText").load("test.php", {name:"rain", age:"22"}, function(){});
load()方法的回调函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象,例如:
$("#resText").load("test.html", function( responseText, textStatus, XMLHttpRequest)) {}
2. $.get()方法和$.post()方法
load()方法通常用来从Web服务器上获取静态的数据文件,如果需要传递一些参数给服务器上的页面,那么可以使用$.get()或$.post()方法。
$.get()方法使用GET方式来进行异步请求,它的结构为:
$.get(url[, data][, callback][, type])
url参数代表请求的HTML页的URL地址,data参数代表发送至服务器的key/value数据会作为QueryString附加到请求URL中,callback参数代表载入成功时回调函数,type参数代表服务器端返回内容的格式,包括xml、html、script、josn、text和_default,例如:
$("#send").click(function(){ $.get("get1.php", { username: $("#username").val(), content: $("#content").val() }, callback);});
$.get()方法的回调函数只有两个参数,例如:
function(data, textStatus) {}
data参数代表请求返回的内容,textStatus参数代表请求状态,而且回调函数只有当数据成功返回后才被调用,这与load()方法不同。
$.post()方法与$.get()方法的结构和使用方法相同。
3. $.getScript()方法和$.getJson()方法
有时候在页面初次加载时获取所需的全部JavaScript文件是没有必要的,jQuery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方法,例如:
$(function(){ $("#send").click(function(){ $.getScript("test.js"); });});
与其他Ajax方法一样,$.getScript()方法也有回调函数,它会在JavaScript文件成功载入后运行。
$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同,例如:
$(function(){ $("#send").click(function(){ $.getJSON("test.josn"); });});
4. $.ajax()方法
$.ajax()方法是jQuery最底层的Ajax实现,它的结构为:
$.ajax(options)
该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的,常见的参数如下:
参数名称 | 类型 | 说明 |
---|---|---|
url | String | 发送请求的地址。 |
type | String | 请求方式(GET或POST),默认为GET。 |
timeout | Number | 设置请求超时时间(毫秒)。 |
data | Object或String | 发送到服务器的数据。 |
dataType | String | 预期服务器返回的数据类型。 |
beforeSend | Function | 发送请求前可以修改XMLHttpRequest对象的函数。 |
complete | Function | 请求完成后调用的回调函数。 |
success | Function | 请求成功后调用的回调函数。 |
error | Function | 请求失败时被调用的函数。 |
global | Boolean | 默认为true,表示是否触发全局Ajax事件。 |
5. Ajax全局事件
通过jQuery提供的一些自定义全局函数,能够为各种 与Ajax相关的事件注册回调函数。例如当Ajax请求开始时,会触发ajaxStart()方法的回调函数,当Ajax请求结束时,会触发ajaxStop()方法的回调函数,这些方法都是全局方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们,例如:
$("#loading").ajaxStart(function(){ $(this).show();});$("#loading").ajaxStop(function(){ $(this).hide();});
jQuery的Ajax全局事件还有几个方法,也可以在使用Ajax方法的过程中为其带来方便,如下表:
说明 | 说明 |
---|---|
ajaxComplete(callback) | Ajax请求完成时执行的函数。 |
ajaxError(callback) | Ajax请求发生错误时执行的函数。 |
ajaxSend(callback) | Ajax请求发送前执行的函数。 |
ajaxSuccess(callback) | Ajax请求成功时执行的函数。 |
转载地址:http://wpppx.baihongyu.com/