1 AJAX
jQuery对Ajax操作进行封装,在jQuery中$.ajax()
方法属于最低层的方法,第二层是$.get()
,$.post()
和load()
方法。
1.1 load()
方法
load()
方法用于提取远程HTML代码并插入DOM中。它的结构为:
load(url,[,data],[,callback])
url
(string)参数表示请求HTML页面的URL地址,这个参数的结构语法是"url selector"
,即它还可以引入选择器,从而获取HTML文档中的某一部分。data
(object[可选])参数表示用于发送至服务器的key/value
数据,如果有这个参数,即load()
方法使用的是POST
传递方式,没有就是使用GET
传递方式。callback
(Function[可选]),请求完成的回调函数,无论成功或失败,该函数接受三个参数,responseText
和textStatus
,XMLHttpRequest
。
如:
$('#restext').load('test.html');
//id为restext的节点元素中插入了test.html文档内容
1.2 $.get()
和$.post()
$.get()
与$.post()
方法是jQuery的全局函数,之前的方法都是对jQuery对象进行操作的
1.2.1 $.get()
方法
$.get()
方法使用GET
方式进行异步请求,它的结构为:
$.get(url [, data] [, callback] [, type])
其中:
- 回调函数:只有在
Response
的返回状态时success
才会调用,接受两个参数,分别是data
(返回内容如XML文档,JSON文件,HTML判断等)以及textStatus
(请求状态:success,error,notmodified,timeout四种) type
表示服务器端返回内容的格式,包括xml,html,script,json,text和_default- data:发送至服务器的
key/value
数据会作为QueryString
附加到请求URL中
如:
$.get('get1.php',
{usename:$('#usename').val()},
function(data,textStatus){
$('#restext').append(data);//假如返回的是HTML
})
1.2.2 $.post()
方法
$.post()
方法与$.get()
方法使用操作一样,只是传递的方式不同。
1.3 $.ajax()
方法
$.ajax()
方法是jQuery最底层的Ajax实现,该方法只有一个参数,这个参数是一个对象,里面包含了一些参数key/value
值对:
- url(string)
- type(string):请求方式,默认为
GET
- timeout(number):设置请求超时时间
- data(object或string)
- dataType(string):预期服务器返回的数据类型
- contentType:上传的数据类型,默认为
application/x-www-form-urlencoded
- beforeSend(function):XMLHttpResquest是唯一一个参数,发送请求前可以修改XMLHttpResquest对象的函数,如果
return false
可以取消Ajax请求 - complete(function):请求完成调用的回调函数,无论成功与否,参数是
XMLHttpResquest
以及textStatus
- success(functon):请求成功后调用的回调函数,参数为
- 由服务器返回,根据dataType参数进行处理后的数据
- textStatus
- error(function):请求失败时调用的函数,参数有
XMLHttpResquest
,textStatus
以及errorThrown
(错误信息)
另外,在拼接URL的时候还可能会使用encodeURIComponent()
函数或$.param()
方法,二者都可把字符串作为 URI 组件进行编码,$.param()
作用于对象,encodeURIComponent()
则是这个字符串进行转义,如:url = encodeURIComponent(a)
2 $.getJSON()
使用$.getJSON()
方法可以用于加载JSON文件,它的结构如下:
$.getJSON(url [, callback]);
该函数是简写的 Ajax 函数,等价于:
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});