jQuery Ajax应用

来源:互联网 时间:1970-01-01

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

请求成功回调函数.

options参数列表

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 请求成功时执行函数

主要事件

相关阅读:
Top