jQuery(八)、ajax

博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》

1、jQuery.ajax(url[, settings])

　　通过HTTP请求加载远程数据。

　　注意：所有的settings选择都可以通过$.ajaxSetup()函数来全局指定。

　　回调函数

　　在实际开发中，当我们需要处理$.ajax() 得到的数据，就需要使用到回调函数。

　　(1) beforeSend：在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。

　　(2) error：在发送请求出差时调用。传入 XMLHttpRequest 对象、描述错误类型的字符串以及一个异常对象。

　　(3) dataFilter：在请求成功之后调用。传入返回的数据以及 'dataType'参数的值。并且必须返回新的数据传递给success回调函数。

　　(4) success：请求发送成功，后台返回数据调用。

　　(5) complete：在请求完成之后调用，无论成功或失败。出入 XMLHttpRequest 对象，以及包含成功或失败代码的字符串。

　　settings选项

　　1 async　　　　Boolean

　　默认为true，表示所有请求均为异步请求。如果要发送同步请求，将该属性设置为false。

　　2 beforeSend(XHR)　　　　function

function (XMLHttpRequest) {
    this; // 调用本次AJAX请求时传递的options参数
}

　　3 cache　　　　Boolean

　　默认为true，dataType为script和jsonp时默认为false，jQuery1.2新功能，设置为false将不缓存此页面。

　　4 complete(XHT, TS)　　　　function

function (XMLHttpRequest, textStatus) {
    this; // 调用本次AJAX请求时传递的options参数
}

　　5 contents　　　　Map

　　一个以"{字符串:正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定内容类型。

　　6 contentType　　String

　　默认为"application/x-www-form-urlencoded"，发送信息至服务器时的内容编码类型。

　　7 context　　　　Object

　　这个对象用于设置ajax相关回调函数的上下文。即让回调函数内的 this 关键字指向这个对象(如果不设置这个参数，this将指向本次ajax请求时传递的options参数)。比如指定一个DOM元素作为context参数，回调函数的this 就指向这个 DOM元素。

　　8 converters　　　　Map

　　默认为  {"* text":window.String, "text html":true, "text json":jQuery.parseJSON, "text xml":jQuery.parseXML}，表示对一个数据类型进行转换。每个转换器的值是一个函数，返回相应的转化值。

　　9 crossDomain　　　　Map

　　默认false，表示同域请求。如你想强制跨域请求(如JSONP形式)，设置为false，是服务端重定向到另一域。

　　10 data　　　　Object, String

　　发送到服务器的数据。将自动转换为请求字符串格式。可以为字符串，如"&key1=val1&key2=val2"，也可以是一个json对象。

　　11 dataFilter　　　　function

　　给ajax返回的原始数据进行相应的处理。提供data和type两个参数：data是返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。

function (data, type) {
    // 对Ajax返回的原始数据进行预处理
    return data  // 返回处理后的数据
}

　　12 dataType　　　　String

　　设置服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，比如XML MIME就被识别为XML。可用值：

　　xml：返回XML文档。

　　html：返回纯文本HTML信息。

　　script：返回纯文本JavaScript代码。不会自动缓存结果，除非设置了cache参数。

　　json：返回JSON格式数据。

　　jsonp：返回JSONP格式。

　　text：返回纯文本字符串。

　　13 error　　　　function

function (XMLHttpRequest, textStatus, errorThrown) {
    // 通常 textStatus 和 errorThrown 之中只有一个会包含信息
    this; // 调用本次AJAX请求时传递的options参数
}

　　14 global　　　　function

　　默认为true，触发全局ajax时间。如果设置为false，将不会触发全局ajax时间，如ajaxStart 或 ajaxStop可用于控制不用的 ajax事件。

　　15 headers　　　　Map

　　默认为 {} 。以 key:value 的形式设置请求头信息。

　　16 mimeType　　　　　　String

　　一个mime类型，用来覆盖XMLHttpRquest 的 MIME类型。

　　17 password　　　　　　String

　　用于响应HTTP访问认证请求的密码。

　　18 processData　　　　　　Boolean

　　默认为true，表示通过data选项传递进来的数据，如果是一个对象，都会转换成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送DOM 树信息或其他不希望转换的信息(如使用ajax上传文件)，请设置为false。

　　19 statusCode　　　　Map

　　默认为 {} ，一组数字的HTTP代码和函数对象，当相应时调用了相应的代码。

// 如果响应状态是404，将触发以下警报：
$.ajax({
  statusCode: {404: function() {
    alert('page not found');
  }
});

　　20 success(data, textStatus)

　　21 timeout　　　　Number

　　设置请求超时时间(毫秒)。此设置会覆盖全局设置$/ajaxSetup()

　　22 type　　　　　　String

　　请求方式，默认为GET

　　23 url　　　　　　String

　　发送请求的地址。

　　24 username　　　　　　String

　　用于响应HTTP访问认证请求的用户名。

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

　　载入远程HTML文件代码并插入至DOM中。

　　默认使用GET繁琐，传递data参数自动转换为POST方式。

　　参数：

　　(1) url：带装入HTML网页地址。

　　(2) data：发送至服务器的key/value数据。

　　(3) callback：载入成功时回调函数。

3、jQuery.get(url[, data][, callback][, type])

　　通过远程HTTP GET 请求载入信息。

　　这是这个简单的GET请求功能以取代复杂 $.ajax。请求成功时可回调函数，如果需要咋出错时执行函数，请使用$.ajax。

　　参数：

　　(1) type：返回内容格式，xml、html、script、json、text、_default。

4、jQuery.getJSON(url[, data][, callback])

　　通过HTTP GET请求载入JSON数据。

5、jQuery.getScript(url[, callback])

　　通过HTTP GET请求载入并执行一个JavaScript文件。

　　参数：

　　(1) url：带装入js文件地址。

　　(2) callback：载入成功时回调函数。

6、jQuery.post(url[, data][, callback][, type])

　　通过远程HTTP POST请求载入信息。

　　这是这个简单的POST请求功能以取代复杂 $.ajax。请求成功时可回调函数，如果需要咋出错时执行函数，请使用$.ajax。

　　参数：

　　(1) type：返回内容格式，xml、html、script、json、text、_default。

7、jQuery.ajaxSetup([options])

　　设置全局AJAX默认选项。参数参考'$.ajax'  settings。

$.ajaxSetup({
  url: "/xxx",
  type: "POST"
});
$.ajax({ data: myData });

8、serializeArray()

　　序列化表格元素返回JSON数据结构数据。

　　返回JSON数组对象，其中每个对象包含一个或两个名值对——name参数和value参数。如：

[
     {name: 'firstname', value: 'Hello'},
     {name: 'lastname', value: 'World'},
     {name: 'alias'}, // this one was empty
  ]