jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。
load()方法
①载入HTML文档
load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。
参数名称 | 类型 | 说明 |
url | String | 请求HTML页面的URL地址 |
data(可选) | Object | 发送至服务器的key/value数据 |
callback(可选) | Function | 请求完成时的回调函数,无论请求失败或者成功 |
②筛选载入的HTML文档
③传递方式
load()方法的传递方式根据参数data来自动指定。如果没有参数传递,则采用GET方式传递,反之,则会自动转换为POST方式。
④回调参数:
对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象
$.get()方法和$.post()方法
在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()方法或者$.post()方法(或者$ajax()方法)
$.get()方法和$.post()方法是jQuery中的全局函数,而在此之前讲的jQuery方法都是对jquery对象进行操作的。
$.get()方法
$.get()方法使用GET方式来进行异步请求
参数名称 | 类型 | 说明 |
url | String | 请求HTML页面的URL地址 |
data(可选) | Object | 发送至服务器的key/value数据会作为QueryString附加到请求URL中 |
callback(可选) | Function |
载入成功时回调函数(只有当Response的返回状态success才调用 该方法)自动将请求结果和状态传递给该方法。 |
type(可选) | String | 服务器端返回内容的格式,包括xml、html、script、json、text和_default |
$.get()方法的回调函数只有两个参数,代码如下:
数据格式:服务器返回的数据格式可以有很多种,它们都可以完成同样的任务。
html:
XML:
XML文档的可移植性是其他数据格式无法比拟的,因此以这种格式提供的数据的重用性将极大提高。XML文档的体积相对较大,与其他文件格式相比,解析和操作它们的速度要慢一些。
JOSN文件:
之所以会出现这种数据格式的文件,很大程度上是因为XML文件体积大和难以解析。JOSN文件和XML文档一样,也可以方便的被重用。而且,JSON文件非常简洁,也容易阅读。
$post()方法
与$get()方法的结构和使用方式都相同,不过仍有区别
①GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给web服务器。当然在Ajax请求中,这种区别对用户是不可见的。
②GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)
③GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性的问题,而POST方式相对来说就可以避免这些问题。
④GET方式和POST方式传递的数据在服务器端的获取也不相同,在PHP中,GET方式的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。
$.getScript()方法和$.getJson()方法
$.getScript()
jQuery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样方便简单,并且不需要对JavaScript文件进行处理,JavaScript文件会自动执行。
$(function(){
$('#send').click(function(){
$.getScript('test.js');
});
})
与Ajax方法一样,$.getScript()方法也有回调函数,它会在JavaScript文件载入后运行。
$(function(){
$.getScript('jquery.color.js',function(){
$("#go").click(functin(){
$(".block").animate({backgroundColor:'pink'},1000)
.animate({backgroundColor:'blue'},1000);
});
});
})
当jquery.color.js动画插件加载完成后,单击id为go的按钮时,class为block的元素就有了颜色动画变化
$.getJSON()
$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同。
$(function(){
$('#send').click(function(){
$.getJSON('test.json');
});
})
jQuery提供了回调函数,在回调函数里处理返回的数据
$(function(){
$('#send').click(function(){
//data:返回的数据
});
})
可以在函数中通过data变量来遍历相应的数据,也可以使用迭代方式为每个项构建响应的HTML代码。虽然在这里可以使用传统的for循环来实现。
jQuery中提供了一个通用的遍历方法$.each(),可以用于遍历对象和数组。
$.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。
$.ajax()方法
$.ajax()方法是jQuery最底层的Ajax实现。
$.ajax(options)
该方法只有一个参数,但是在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有的参数都是可选的。
可以用$.ajax()方法来代替前面的方法
$(function(){
$('#send').click(function(){
$.ajax({
type:"GET",
url:"test.js",
dataType:"script"
});
});
})//代替$.getScript()方法
序列化元素
1.serialize()方法:使用Ajax技术能够异步地提交表单,并将服务器返回的数据显示在当前的页面中。
serialize()方法作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。
$("#send").click(function(){
$.get("get1.php",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
});
});
2.serializeArray()方法
该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。
3.$.param()方法
它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化
比如讲一个普通的对象序列化:
jQuery中的Ajax全局事件
jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面,而且还体现在对调用Ajax方法的过程中的HTTP请求的控制。
用css控制元素隐藏,当Ajax请求开始的时候,将此元素显示,用来提示用户Ajax请求正在进行。当Ajax请求结束后,将此元素隐藏。
如果在此页面中的其他地方也使用Ajax,该提示信息仍然有效,因为它是全局的。