【jQuery】jQuery中的Ajax

加载异步（静态）数据

load()  - 加载html格式数据

语法格式为：

load(url, [data], [callback])

参数url为被加载的页面地址，可选项[data]参数表示发送到服务器的数据，其格式为 key / value ，另一个可选项 [callback] 表示参数加载成功后，返回至加载页的回调函数。

全局函数 - getJSON() - 加载json格式数据

用于调用JSON格式的数据，其调用的语法格式为：

$.getJSON(url, [data], [callback])

参数url表示请求的地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value，可选项[callback]参数表示加载成功时执行的回调函数。

例如：

$("#Button1").click(function(){
    $.getJSON("userinfo.json", function(data){
        $("#divTip").empty();
        var strHTML = "";
        $.each(data, function(InfoIndex, Info){
            strHTML += "姓名" + Info["name"]  + "";
            strHTML += "性别" + Info["sex"]   + "";
            strHTML += "邮箱" + Info["email"] + "";
        })

        $("#divTip").html(strHTML);
    })
})

userinfo.json:

{
  {
     "name": "1",
     "sex":"2",
     "email":"3"
  },
  {
    "name":"4",
    "sex":"5",
    "email":"6"
  }
}

全局函数 - getScript() - 加载js格式数据

用于获取.js文件的内容。在jQuery中，通过全局函数getScript()加载.js文件后，不仅可以像加载页面片段一样轻松地注入脚本，而且所注入的脚本自动执行。

其调用格式如下：

$.getScript(url, [callback])

url参数为等待加载的JS文件地址，可选项[callback]参数表示加载成功时执行的回调函数。

例如：

$("Button1").click(function(){
    $.getScript("userinfo.js");
})

userinfo.js

var data = [
  {
    "name":"1",
    "sex":"2",
    "email":"3"
  },
  {
    "name":"4",
    "sex":"5",
    "email"：“6”
  }
];

var strHTML = "";
$.each(data, function(){
    strHTML += "姓名" + this["name"]  + "";
    strHTML += "性别" + this["sex"]   + "";
    strHTML += "邮箱" + this["email"] + "";
})

$("#divTip").html(strHTML);

全局函数 - get() - 加载html, xml, js, json, text等格式数据

调用的语法格式为：

$.get(url, [data], [callback], [type])

参数url表示等待加载的数据地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value，可选项[callback]参数表示加载成功时执行的回调函数，可选项[type]参数表示返回数据的格式，如html, xml, js, json, text等

请求服务器（动态）数据

$.get()请求数据

客户端向服务器传递参数时，使用的格式是{key0:value0, key1:value1, ... ... }，如果参数的值是中文格式，必须通过使用encodeURL()来进行转码，在客户端接受时，使用decodeURL进行解码即可。

函数格式参见上一节。

$.post()请求数据

$.post()也是带参数向服务器发出数据请求。全局函数$.post()与$.get()在本质上没有太大的区别，所不同的是，GET方式不适合传递数据量较大的数据，同时，其请求的历史信息会保存在浏览器的缓存中。

$.post()函数调用的语法格式如下：

$.post(url, [data], [callback], [type])

serialize()序列化表单

该方法的功能将所选择的DOM元素转换成能随AJAX传递的字符串，即序列化所选的DOM元素。

例如：

$.post("userinfo.aspx", 
       $("#frmuserinfo").serialize(),
       function(data){... ...})

serialize()方法自身有很多的不足，如表单中有多项被选中时，该方法只能传递一项的值，因此，在选择传递参数时，须慎重考虑。

$.ajax()方法

$.ajax()的基本概念

在jQuery中，$.ajax()方法是最底层的方法，也是功能最强的方法。

其调用的语法格式为：

$.ajax([options])

可选项参数[options]为$.ajax()方法中的请求设置，其格式为 key / value ，即包含发送请求的参数，也含有服务器响应后回调的数据。

$.ajax()方法中的参数列表：

参数名	类型	描述
url	String	发送请求的地址（默认为当前页面）
type	String	数据请求的方式（post 或 get），默认为get
data	String或Object	发送到服务器的数据，如果不是字符串则自动转换成字符串格式，如果是get请求方式，那么，该字符串将附在url的后面
dataType	String	服务器返回的数据类型，如果没有指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断的结果进行解析，传递给回调函数，其可用类型为： html：返回纯文本的HTML信息，包含的Script标记会在插入页面时被执行 script：返回纯文本JavaScript代码 text：返回纯文本的字符串 xml：返回可被jQuery处理的XML文档 json：返回JSON格式的数据
beforeSend	Function	该函数用于发送请求前修改XMLHttpRequest对象，其中的参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件
complete	Function	请求完成后调用的函数，该函数无论数据发送成功或失败都会调用，其中有两个参数，一个是XMLHttpRequest对象，另外一个是strStatus，用于描述成功请求类型的字符串
success	Function	请求成功后返回的回调函数，该函数有两个函数，一个是根据参数datType处理后服务器返回的数据，另外一个是strStatus，用于描述状态的字符串
error	Function	请求失败后调用的函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject
timeout	Number	请求超时的时间（毫秒）
global	Boolean	是否响应全局事件，默认是true，表示响应，如果设置成false，表示是不响应
async	Boolean	是否为异步请求，默认为true，表示是异步，如果设置成false，表示是同步请求
cache	Boolean	是否进行页面缓存，true表示进行缓存，false表示不进行页面缓存

$.ajaxSetup()设置全局Ajax

在jQuery中，可以使用$.ajaxSetup()方法设置全局性的ajax默认选项，一次设置，全局有效。

调用格式为：

$.ajaxSetup([options])

可选参数[options]是一个对象，通过该对象可以设置$.ajax()方法中的参数。

Ajax中的全局事件

jQuery中的 6 个全局Ajax事件如下：

事件名称	参数	功能描述
ajaxComplete(callback)	callback	Ajax请求完成时执行函数
ajaxError(callback)	callback	Ajax请求发送错误时执行函数，其中捕捉到的错误可以作为最后一个参数进行传递
ajaxSend(callback)	callback	Ajax请求发送前执行函数
ajaxStart(callback)	callback	Ajax请求开始时执行函数
ajaxStop(callback)	callback	Ajax请求结束时执行函数
ajaxSuccess(callback)	callback	Ajax请求成功时执行函数

在jQuery中，所有的全局事件都是以XMLHttpRequest对象和设置对象作为参数传递给回调函数。

在事件绑定时，Ajax中的全局事件可以绑定在页面的任何一个元素中。