jQuery中的AJAX

一、什么是 AJAX？

AJAX 并非编程语言，简短地说，AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，通过后台加载数据，实现了对部分网页的更新。

和常规的 AJAX 代码不同，jQuery为我们将原生AJAX进行了封装，现在我们只需要一行简单的代码，就能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

二、jQuery 底层 AJAX 请求

底层ajax请求使用ajax({settings}) 方法，该方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax({settings}) 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

语法：$.ajax({settings}) 或jQuery.ajax({settings})

参数	描述
settings	可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值。

settings选项：

1.url

类型：String

默认值: 当前页地址。发送请求的地址。

2.type

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

3.data

类型：String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

4.dataType

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

• "xml": 返回 XML 文档，可用 jQuery 处理。
• "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
• "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
• "json": 返回 JSON 数据 。
• "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
• "text": 返回纯文本字符串

5.success

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

这是一个 Ajax 事件。

6.error

在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）

更多参数请参考jQuery 参考手册 - Ajax

 实例：

$.ajax({
      url:'',    //请求地址
      method:'',  //请求方式
      data:{},     //传参  无参可不写
      success:function(res){
        //请求成功的回调函数
      },
      error:function(err){
        //请求失败的回调函数
      }，
    })

三、get()

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

语法

$(selector).get(url,data,success(response,status,xhr),dataType)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。 默认地，jQuery 将智能判断。 可能的类型： "xml" "html" "text" "script" "json" "jsonp"

 实例：

 $.get('http://xxx',{
          page:0,
          pageSize:10
    },function(res){
      console.log(res);
    })

四、post()

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

语法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数	描述
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。

 实例：

$("input").keyup(function(){
  txt=$("input").val();
  $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
    $("span").html(result);
  });
});

五、AJAX 事件（部分）

.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。

用法

1.ajaxComplete() 方法在 AJAX 请求完成时执行函数。它是一个 Ajax 事件。

与 ajaxSuccess() 不同，通过 ajaxComplete() 方法规定的函数会在请求完成时运行，即使请求并未成功。

ajaxComplete() 语法

.jQueryajaxComplete(function(event,xhr,options))

参数	描述
function(event,xhr,options)	必需。规定当请求完成时运行的函数。 额外的参数： event - 包含 event 对象 xhr - 包含 XMLHttpRequest 对象 options - 包含 AJAX 请求中使用的选项

 例子：

$("#msg").ajaxComplete(function(event,request, settings){
   $(this).append("<li>请求完成.</li>");
 });

2.ajaxError() 方法在 AJAX 请求发生错误时执行函数。它是一个 Ajax 事件。

ajaxError()语法

.ajaxError(function(event,xhr,options,exc))

参数	描述
function(event,xhr,options,exc)	必需。规定当请求失败时运行的函数。 额外的参数： event - 包含 event 对象 xhr - 包含 XMLHttpRequest 对象 options - 包含 AJAX 请求中使用的选项 exc - 包含 JavaScript exception

$("#msg").ajaxError(function(event,request, settings){
     $(this).append("<li>出错页面:" + settings.url + "</li>");
});

 3.ajaxSend() 方法在 AJAX 请求开始时执行函数。它是一个 Ajax 事件。

ajaxSend() 语法

.ajaxSend([function(event,xhr,options)])

参数	描述
function(event,xhr,options)	必需。规定当请求开始时执行函数。 额外的参数： event - 包含 event 对象 xhr - 包含 XMLHttpRequest 对象 options - 包含 AJAX 请求中使用的选项

 $("#msg").ajaxSend(function(evt, request, settings){
   $(this).append("<li>开始请求: " + settings.url + "</li>");
 });

 4.ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。

ajaxStart()详细说明

无论在何时发送 Ajax 请求，jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStart 事件。在此时，由 .ajaxStart() 方法注册的任何函数都会被执行。

ajaxStart()语法

.ajaxStart(function())

参数	描述
function()	规定当 AJAX 请求开始时运行的函数。

$("#loading").ajaxStart(function(){
   $(this).show();
 });

 5.ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。

ajaxStop()详细说明

无论 Ajax 请求在何时完成 ，jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStop 事件。在此时，由 .ajaxStop() 方法注册的任何函数都会被执行。

ajaxStop()语法

.ajaxStop(function())

参数	描述
function()	规定当 AJAX 请求完成时运行的函数。

$("#loading").ajaxStop(function(){
   $(this).hide();
 });

 6.ajaxSuccess() 方法在 AJAX 请求成功时执行函数。它是一个 Ajax 事件。

.ajaxSuccess()详细说明

XMLHttpRequest 对象和设置作为参数传递给回调函数。

无论 Ajax 请求在何时成功完成 ，jQuery 都会触发该 ajaxSuccess 事件。在此时，由 .ajaxSuccess() 方法注册的任何函数都会被执行。

.ajaxSuccess()语法

.ajaxSuccess(function(event,xhr,options))

参数	描述
function(event,xhr,options)	必需。规定当请求成功时运行的函数。 额外的参数： event - 包含 event 对象 xhr - 包含 XMLHttpRequest 对象 options - 包含 AJAX 请求中使用的选项

$("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<li>请求成功!</li>");
 });

 六、其他

jQuery.ajaxSetup() 方法

该方法设置全局 AJAX 默认选项。

jQuery.ajaxSetup()语法

jQuery.ajaxSetup(name:value, name:value, ...)

实例：

设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

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

接口的常见参数格式

1.查询字符串 key1=val&key2=val2

2.json字符串 '{"key1":"val","key2":"val2"}'

一般多个参数时用对象形式传参

对象转为json（需要JSON.stringify( )）

对象转为查询字符串（在jQuery中自动）

如何利用$.ajax向后台发送json字符串数据？

1.将参数转换为json字符串

JSON.stringify( )

2.将请求头设为json格式

contentType = 'application/json'

注意：对jquery的ajax来说 请求头默认为 contentType='application/x-www-form-urlencoded'

了解更多jQuery-AJAX请移步jQuery在线手册-jQuery API手册,jQuery参考手册,jQuery API手册,jQuery中文API手册