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请求.

options参数列表
参数名 类型 描述
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 请求成功时执行函数