Ajax
Ajax 的核心是什么
XMLHttpRequst 对象:通过该对象向服务器发送请求。
Ajax 的特点
局部刷新、提高用户体验度、数据从服务器上加载
ajax 的技术组成
- ajax 是之前技术的整合
- 包括的技术:javaScript,XML,CSS,XMLHttpRequest
- 异步:发送请求以后,获得返回结果,更行页面
定义和用法
ajax()
方法通过 HTTP 请求加载远程数据。
简单易用的高层实现见$.get
, $.post
等。$.ajax()
返回其创建的 XMLHttpRequest 对象。
*注意:*所有的选项都可以通过 $.ajaxSetup()
函数来全局设置
jQuery.ajax([settings])
参数
options(Object)
- ajax 请求设置。所有选项都是可选的。
cache(Boolean)
- 默认值:
true
,dataType 为 script 和 jsonp 时默认为false
- 设置为
false
将不缓存此页面。
async(Boolean)
- 默认值:
true
。默认设置下,所有请求均为异步请求 - 如果需要发送同步请求,请将此选项设置为
false
beforeSend(function)
- 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头
- XMLHttpRequest 对象是唯一的参数
- 这是一个 Ajax 事件。如果返回
false
可以取消本次 ajax 请求
complete(function)
- 请求完成后回调函数 (请求成功或失败之后均调用)
contentType(string)
- 发送信息至服务器时内容编码类型。
- 如果你明确地传递了一个
content-type
给$.ajax()
那么它必定会发送给服务器(即使没有数据要发送)
context(object)
- 用于设置 Ajax 相关回调函数的上下文
- 让回调函数内
this
指向这个对象(如果不设定这个参数,那么this
就指向调用本次 AJAX 请求时传递的options
参数) - 比如指定一个
DOM
元素作为context
参数,这样就设置了success
回调函数的上下文为这个DOM
元素。
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
data(string)
- 送到服务器的数据。将自动转换为请求字符串格式
- GET 请求中将附加在 URL 后。查看
processData
选项说明以禁止此自动转换 - 必须为
Key/Value
格式 - 如果为数组,jQuery 将自动为不同值对应同一个名称。如
{foo:["bar1", "bar2"]}
转换为'&foo=bar1&foo=bar2'
dataFilter(function)
- 给 Ajax 返回的原始数据的进行预处理的函数
- 提供
data
和type
两个参数:data
是 Ajax 返回的原始数据,type
是调用jQuery.ajax
时提供的dataType
参数
dataType(string)
- 预期服务器返回的数据类型
- 如果不指定,
Query
将自动根据HTTP
包MIME
信息来智能判断 json
: 返回JSON
数据jsonp
:JSONP
格式。使用JSONP
形式调用函数时,如myurl?callback=?"jQuery
将自动替换?
为正确的函数名,以执行回调函数。ext
返回纯文本字符串
success(function)
- 请求成功后的回调函数
- 参数:由服务器返回,并根据 dataType 参数进行处理后的数据
- 描述状态的字符串。
timeou(number)
- 设置请求超时时间(毫秒)。此设置将覆盖全局设置
type(string)
- 默认值:
get
, 求方式 (POST
或GET
) , 默认为GET
- ** 注意 **:其它
HTTP
请求方法,如put
和delete
也可以使用,但仅部分浏览器支持
url(string)
- 当前页地址。发送请求的地址
username(string)
- 用于响应 HTTP 访问认证请求的用户名。
password(string)
- 用于响应 HTTP 访问认证请求的密码
回调函数
如果要处理$.ajax()
得到的数据,则需要使用回调函数:beforeSend
、error
、dataFilter
、success
、complete
。
beforeSend
在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。
error
在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)
dataFilter
在请求成功之后调用。传入返回的数据以及 “dataType” 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。
success
当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
complete
当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。