jQuery的Ajax详解
1.Load( url, [data], [callback] )
作用:
载入远程HTML文件代码并插入至DOM中.
参数:
url (String):请求的HTML页的URL地址.
data (Map):(可选参数)发送至服务器的 key/value 数据.
callback (Callback):(可选参数)请求完成时(不需要是success的)的回调函数.
说明:
这个方法默认使用GET方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的.
讲解:
load是最简单的Ajax函数,但是使用具有局限性:
它主要用于直接返回HTML的Ajax接口
load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中,即使设置了回调函数也还是会加载.
2.jQuery.get( url, [data], [callback], [type] )
作用:
使用GET方式来进行异步请求.
参数:
url (String):发送请求的URL地址.
data (Map):(可选)要发送给服务器的数据,以key/value的键值对形式表示,会做为QueryString附加到请求URL中.
callback (Function):(可选)载入成功时回调函数(只有当Response的返回状态是success才是调用该方法).
type参数是指data数据的类型,可能的值有"xml","html","script","json","jsonp"和"text",默认为"html".
jQuery.getJSON( url, [data], [callback] )方法就相当于 jQuery.get(url, [data], [callback], "json")
说明:
通过远程HTTP GET 请求载入信息.这个简单的GET请求功能以取代复杂$.ajax.请求成功时可调用回调函数.
讲解:
此函数发送Get请求, 参数可以直接在url中拼接,比如
$.get("AjaxGetMethod.aspx?param=btnAjaxGet_click");
或者通过data参数传递:
$.get("AjaxGetMethod.aspx", { "param": "btnAjaxGet_click" });
两种方式效果相同,data参数会自动添加到请求的url中.
3.jQuery.getJSON( url, [data], [callback] )
作用:
通过HTTP GET请求载入JSON数据,与jQuery.get( url, [data], [callback], "json")这种方式等价.
说明:
通过HTTP GET 请求载入JSON数据.
讲解:
getJSON函数仅仅将get函数的type参数设置为"JSON"而已.
4.jQuery.getScript( url, [callback] )
作用:
通过GET方式请求载入并执行一个JavaScript文件.
参数:
url (String) : 待载入JS文件地址.
callback (Function) :(可选)成功载入后回调函数.
说明:
jQuery 1.4版本之前, getScript只能调用同域 JS 文件.在jQuery 1.4中, 你可以跨域调用 JavaScript文件.
讲解:
首先了解此函数的jQuery内部实现,仍然使用get函数,jQuery所有的Ajax函数包括get最后都是用的是jQuery.ajax().
5.jQuery.post( url, [data], [callback], [type] )
作用:
使用POST方式来进行异步请求
参数:
url (String): 发送请求的URL地址
data (Map): (可选) 要发送给服务器的数据,以key/value 的键值对形式表示.
callback (Function): (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法).
type (String): (可选) 官方的说明是: Type of data to be sent. 其实应该为客户端请求的类型(JOSN,XML,等等)
说明:
通过远程HTTP POST 请求载入信息.这个简单的POST请求功能以取代复杂$.ajax.请求成功时可调用回调函数.
讲解:
具体用法和get相同,只是提交方式由"GET"改为"POST".
6.jQuery.ajax( options )
作用:
通过HTTP请求加载远程数据
说明:
通过HTTP请求加载远程数据.jQuery底层AJAX实现.简单易用的高层实现为$.get,$.post等.
$.ajax() 返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求.
$.ajax() 只有一个参数: 参数 key/value 对象, 包含各配置及回调函数信息.
讲解:
这是jQuery中Ajax的核心函数,上面所有的发送Ajax请求的函数内部最后都会调用此函数.options参数支持很多参数,使用这些参数可以完全控制ajax请求.
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址. |
| type | String | (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为"GET".其它HTTP请求方法,如PUT 和 DELETE 也可以使用, 但仅部分浏览器支持. |
| timeout | Number | 设置请求超时时间(毫秒).此设置将覆盖全局设置. |
| async | Boolean |
(默认: true) 默认设置下, 所有请求均为异步请求. 如果需要发送同步请求, 请将此选项设置为false.注意, 同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. |
| beforeSend | Function | 发送请求前可修改XMLHttpRequest对象的函数,如添加自定义HTTP头.XMLHttpRequest 对象是唯一的参数. |
| cache | Boolean | (默认: true) jQuery 1.4 新功能,设置为false 将不会从浏览器缓存中加载请求信息. |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用). 参数: XMLHttpRequest 对象,成功信息字符串. |
| contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型.默认值适合大多数应用场合. |
| data |
Object, String |
发送到服务器的数据.将自动转换为请求字符串格式.GET请求中将附加在URL 后.查看processDate 选项说明以禁止此自动转换. 必须为Key/Value格式.如果为数组,jQuery将自动为不同值对应同一个名称. |
| dataType | String |
预期服务器返回的数据类型.如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML 或 responseText, 并作为回调函数参数 传递,可用值: "xml":返回XML文档,可用jQuery处理. "html":返回纯文本HTML信息:包含script元素. "script":返回纯文本JavaScript代码.不会自动缓存结果. "json":返回JSON数据. "jsonp":JSONP格式. |
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法.这个方法有三个参数:XMLHttpRequest对象,错误信息,(可能)捕捉的错误对象. |
| global | Boolean | (默认: true) 是否触发全局 AJAX事件.设置为false将不会触发全局AJAX事件,如ajaxStart或ajaxStop.可用于控制不同的Ajax事件. |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据.使用HTTP包Last-Modified头信息判断. |
| processData | Boolean |
(默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded". 如果要发送DOM树信息或其它不希望转换的信息,请设置为false. |
| success | Function | 请求成功回调函数. |
jQuery 的Ajax相关函数
1.jQuery.ajax( options)
说明:
设置全局AJAX默认选项.
讲解:
有时我们希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项,此后所有的Ajax请求的默认options将被更改.
2.全局Ajax事件
在jQuery.ajaxSetup(options)中的options参数属性中,有一个global属性.详细如下:
类型: 布尔值
默认值: true
说明: 是否触发全局的Ajax事件
这个属性用来设置是否触发全局的Ajax事件,全局Ajax事件是一系列伴随Ajax请求发生的事件.主要事件如下:
| 名称 | 说明 |
| ajaxComplete( callback ) | AJAX 请求完成时执行函数 |
| ajaxError( callback ) | AJAX 请求发生错误时执行函数 |
| ajaxSend( callback ) | AJAX 请求发送前执行函数 |
| ajaxStart( callback ) | AJAX 请求开始时执行函数 |
| ajaxStop( callback ) | AJAX 请求结束时执行函数 |
| ajaxSuccess( callback ) | AJAX 请求成功时执行函数 |