Java程序员之JS(一) 之 JQuery.ajax

背景：紧着现在项目的需要，先从JQuery.ajax出发，主要需求是通过 js 调用Java 代码，从而适应现在的项目。

先从几个概念开始讲解：

一. 什么是Deferred 

　　Deferred 对象是由.Deferred构造的， .Deferred被实现为简单工厂模式。它是用来解决JS中的异步编程，遵循 Common Promise/A规范，实现此规范的还有when.js 和 dojo.　

　　Deferred 对象在 JQuery 1.5被引入，用来解决 Ajax 异步优化问题，正是由于 Deferred 的 引入，Ajax 相关代码可读性大大提高，替代了回调函数的概念。

　　详细讲解请查看转载文: 读jQuery之二十（Deferred对象）--(转)

二. 什么是 Promise (中文“承诺”) 

　　Promise 是规范； Promise 规范的代码只有100多行，实际 Promise 只有100行代码；现如今高版本的浏览器已经原生实现了 Promise。

　　下面是 Promise/A++规范：

　　1. 一个Promise可能有三种状态：等待(pengding)、已完成(fulled)、已拒绝(rejected);

　　2. 一个Promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转化，同时“完成”态和“拒绝”态不能相互转换；

　　3. promise 必须实现 then 方法(可以说then就是promise的核心)，而且then 必须返回一个promise, 同一个promise 的then可以调用多次，并且毁掉的执行顺序和他们被调用的顺序一致；

　　4. then 方法接受两个参数，第一个参数是成功时的毁掉，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用。同时，then可以接受另一个 promise 传入，也接受一个“类then”的对象或方法，即thenable对象；

　　详细讲解请查看转载文: JavaScript Promise启示录--（转）

三. jQuery.ajax() 函数详解 

　　jQuery.ajax() 用于通过后台HTTP请求加载远程数据；

　　jQuery.ajax() 函数是 jQuery封装的 AJAX技术，通过该函数我们无需刷新当前页面即可获取远程服务器上的数据；

　　jQuery.ajax() 函数属于全局的Ajax 函数(也可以理解为静态函数)；

　  语法

　 jQuery 1.0 新增该静态函数。jQuery.ajax()函数有以下两种用法：

　　用法一：jQuery.ajax( [ settings ] ] )

　　用法二：jQuery.ajax( url [, settings ] ] )。jQuery 1.5 新增支持该用法

　　用法二是用法一的变体，它只是将参数对象settings中的可选属性url单独提取出来作为一个独立的参数。

　　参数

　　settings： 可选/Object类型一个Object对象，其中的每个属性用来指定发送请求所需的额外参数设置。
　　　　　　　　参数settings是一个对象，jQuery.ajax()可以识别该对象的以下属性(它们都是可选的)：

1 $.ajax({
2     url: "my.php" ,
3     headers: {
4         "Referer": "http://www.365mini.com" // 有些浏览器不允许修改该请求头
5         ,"User-Agent": "newLine" // 有些浏览器不允许修改该请求头
6         ,"X-Power": "newLine"
7         ,"Accept-Language": "en-US"
8     }
9 });

 1 $.ajax({
 2     url: a_not_found_url ,
 3     statusCode: {  // 当响应对应的状态码时，执行对应的回调函数
 4         404: function() {
 5             alert( "找不到页面" );
 6         },
 7         200: function(){
 8             alert("请求成功");
 9         }
10     }
11 });

1 $.ajax({
2    url: a_cross_domain_url,
3    xhrFields: { // 将XHR对象的withCredentials设为true
4       withCredentials: true
5    }
6 });

注意：
1、如果你的所有AJAX请求都需要设置settings中某些参数，你可以使用jQuery.ajaxSetup()函数进行全局设置，而无需在每次执行jQuery.ajax()时分别设置。
2、在jQuery 1.4(含)之前，选项参数complete、succes、error等Ajax事件的回调函数的第3个参数不是经过jQuery封装的jqXHR对象，而是原生的XMLHttpRequest对象。

　　返回值

　　事例 & 说明

　　jQuery.ajax()函数的settings对象中，常用的属性有：url、type、async、data、dataType、success、error、complete、beforeSend、timeout等。

　　请参考下面这段初始HTML代码：

1 <div id="content"></div>

　以下是与jQuery.ajax()函数相关的jQuery示例代码，以演示jQuery.ajax()函数的具体用法：

$.ajax({
     url: "jquery_ajax.php"
    , type: "POST"
    , data: "name=codeplayer&age=18"
    , success: function( data, textStatus, jqXHR ){
        // data 是返回的数据
        // textStatus 可能为"success"、"notmodified"等
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        alert("返回的数据" + data);
    }
});

$.ajax({
     url: "jquery_ajax.php?page=1&id=3"
    , type: "POST"
    // jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
    , data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
    // 请求成功时执行
    , success: function( data, textStatus, jqXHR ){
        alert("返回的数据" + data);
    }
    // 请求失败时执行
    , error: function(jqXHR, textStatus, errorMsg){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为： "Not Found"、"Internal Server Error"等
        alert("请求失败：" + errorMsg);
    }
});

// 将url单独提取出来作为第一个参数(jQuery 1.5+才支持)
$.ajax("jquery_ajax.php?action=type&id=3", {
     dataType: "json" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "name": "CodePlayer", age: 20 }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
        alert( data.name ); // CodePlayer
    }
});

$.ajax( {
    // 注意这里有个参数callback=?
     url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21"
    , async: false // 同步请求，发送请求后浏览器将被锁定，只有等到该请求完成(无论成功或失败)后，用户才能操作，js代码才会继续执行
    , dataType: "jsonp" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "site_name": "CodePlayer", "site_desc": "专注于编程开发技术分享" }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
        alert( data.site_desc ); // 专注于编程开发技术分享
    }
});

$.ajax( {
    // 加载指定的js文件到当前文档中
     url: "http://code.jquery.com/jquery-1.8.3.min.js"
    , dataType: "script"
});

　　以上jQuery.ajax()部分参考：http://www.365mini.com/page/jquery_ajax.htm

四. 将 Deferred  和 Promise 运用在jQuery.ajax()应用实例 

　　jQuery 发送的所有 Ajax 请求，内部都会通过 $.ajax() 函数来实现。通常没有必要直接调用这个函数，可以使用已经封装好的几个简便方法，如 .load()、$.get() 、getJSON()、getScript()和post()  。如果你需要用到那些不常用的选项，那么， $.ajax()使用起来更灵活。

　　概念说明

　　从 jQuery 1.5 开始， $.ajax() 返回的 jqXHR 对象实现了 Promise接口，使它拥有了Promise 的所有属性，方法和行为，为了让回调函数的名称统一，便于在 $.ajax() 中使用。jqXHR 也提供 .error()、.success() 和 .complete() 方法。这些方法都带有一个参数，改参数是一个函数，此函数在 $.ajax() 请求结束时被调用，并且这个函数接收的参数，与调用 $.ajax() 函数时的参数是一致的。这将允许你在一次请求时，对多个回调函数进行赋值，甚至允许你在请求已经完成后，对回调函数进行赋值(如果该请求已经完成，则回调函数会被立刻调用).

• jqXHR.done(function(data, textStatus, jqXHR){});

　　一个可供选择的 success 回调选项的构造函数， .done() 方法取代了jqXHR.success()方法。

• jqXHR.fail(function(jqXHR, textStatus, errorThrown){});

　　一种可供选择的 error 回调选项的构造函数， .fail() 方法取代了.error()方法。

• jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThown){});

　　一种可供选择的 complete 回调选项的构造函数， .always() 方法取代 .complete()方法。

　　在响应一个成功的请求后，改函数的参数和.done的参数是相同的：data, textStatus, 和 jqXHR 对象。对于失败的请求，参数和 .fail() 的参数是相同的：jqXHR对象，textStatus, 和 errorThown。

• jqXHR.then(function(data, textStatus, jqXHR){}, function(jqXHR, textStatus, errorThown){})；

　　包含了 .done() 和 .fail() 方法的功能，(从jQuery1.8开始)允许底层被操作。

　　推荐使用的注意事项：jqXHR.success(), jqXHR.error() 和 jqXHR.complete() 回调从 jQuery 1.8开始被弃用。他们讲最终被取消，您的代码应做好准备，使用 jqXHR.done()、 jqXHR.fail() 和jqXHR.always() 代替。　　

 1 // Assign handlers immediately after making the request,
 2 // and remember the jqxhr object for this request
 3 var jqxhr = $.ajax( "example.php" )
 4     .done(function() { alert("success"); })
 5     .fail(function() { alert("error"); })
 6     .always(function() { alert("complete"); });
 7
 8 // perform other work here ...
 9
10 // Set another completion function for the request above
11 jqxhr.always(function() { alert("second complete"); });

　　this 在所有的回调中的引用，是这个对象在传递给.ajax的设置中上下文，如果没有指定 context (上下文)，this 引用的是 Ajax 设置的本身。

　　为了向后兼容 XMLHttpRequest， 一jqXHR 对象将公开下列属性和方法：

• readyState
• status
• statusText
• responseXML and/or responseText 当底层的请求分别作出 XML和/或文本响应
• setRequestHeader(name, value) 从标准出发，通过替换旧的值为新的值，而不是替换的新值到旧值
• getAllResponseHeaders()
• getReponseHeader()
• abort()

　　事例 & 说明

• url: 待装入 HTML 网页网址(必填参数)；
• data: 发送至服务器的 key/value数据(在jquery 1.3中也可以接受一个字符串)(可选参数)；
• callback: 载入成功时回调函数(可选参数)；

　　默认情况使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。　　

1 //一个参数 默认为"GET"方式
2 $("#links").load("/Main_Page #p-Getting-Started li");
3
4 //data有数据之后，变为"SET"方式
5  $("#feeds").load("feeds.php", {limit: 25}, function(){
6     alert("The last 25 entries in the feed have been loaded");
7  });

　　2). jQuery.get(url, [data], [callback], [type]) -- 返回值XMLHttpRequest: 通过远程 HTTP GET请求载入信息。

• URL: 待载入页面的URL地址(必填参数)；
• data: 待发送 key/value 参数(可选参数)；
• callback: 载入成功时回调函数(可选参数)；
• type: 返回内容格式， xml、html、script、json、text、_default(可选参数)。

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

 1 //一个参数(请求 text.php页面, 忽略返回值)
 2 $.get("test.php");
 3
 4 //两个参数(请求 text.php页面, 忽略返回值)
 5 $.get("test.php", { name: "John", time: "2pm" } );
 6
 7 $.get("test.php", function(data){
 8   alert("Data Loaded: " + data);
 9 });
10
11 //三个参数(显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数)
12 $.get("test.cgi", { name: "John", time: "2pm" },
13   function(data){
14     alert("Data Loaded: " + data);
15 });

　　3). jQuery.getJSON(url, [data], [callback]) -- 返回XMLHttpRequest: 通过HTTP Get 载入Json 数据。

• url: 发送请求地址(必填参数)；
• data: 待发送 Key/value 参数(可选参数)；
• callback: 载入成功时回调函数(可选参数)；

　　在 jQuery 1.2 中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 注意：此行以后的代码将在这个回调函数执行前执行。

•  1 //从 Flickr JSONP API 载入 4 张最新的关于猫的图片。
   2 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
   3   $.each(data.items, function(i,item){
   4     $("<img/>").attr("src", item.media.m).appendTo("#images");
   5     if ( i == 3 ) return false;
   6   });
   7 });
   8
   9 //从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据
  10 $.getJSON("test.js", function(json){
  11   alert("JSON Data: " + json.users[3].name);
  12 });
  13
  14 //从 test.js 载入 JSON 数据，附加参数，显示 JSON 数据中一个 name 字段数据。
  15 $.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  16   alert("JSON Data: " + json.users[3].name);
  17 });

　　4). jQuery.getScript(url, [callback]) -- 返回XMLHttpRequest：通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

• url: 待载入 JS 文件地址。
• callback: 成功载入后回调函数。

　　jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

 1 //载入 <a title="http://jquery.com/plugins/project/color" class="external text" href="http://jquery.com/plugins/project/color">jQuery 官方颜色动画插件</a> 成功后绑定颜色变化动画。
 2
 3 HTML 代码:
 4 <button id="go">» Run</button>
 5 <div class="block"></div>
 6
 7 jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
 8   $("#go").click(function(){
 9     $(".block").animate( { backgroundColor: ‘pink‘ }, 1000)
10       .animate( { backgroundColor: ‘blue‘ }, 1000);
11   });
12 });
13
14
15 //加载并执行 test.js
16 $.getScript("test.js");
17
18 //加载并执行 test.js ，成功后显示信息。
19 $.getScript("test.js", function(){
20   alert("Script loaded and executed.");
21 });

　　5). jQuery.post(url, [data], [callback], [type]) -- 返回XMLHttpRequest：通过远程 HTTP POST 请求载入信息。

• url:发送请求地址。
• data:待发送 Key/value 参数。
• callback:发送成功时回调函数。
• type:返回内容格式，xml, html, script, json, text, _default。

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

 1 //请求 test.php 网页，忽略返回值
 2 $.post("test.php");
 3
 4 //请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：
 5 $.post("test.php", { name: "John", time: "2pm" } );
 6
 7 //向服务器传递数据数组（同时仍然忽略返回值）：
 8 $.post("test.php", { ‘choices[]‘: ["Jon", "Susan"] });
 9
10 //使用 ajax 请求发送表单数据：
11 $.post("test.php", $("#testform").serialize());
12
13 //输出来自请求页面 test.php 的结果（HTML 或 XML，取决于所返回的内容）：
14 $.post("test.php", function(data){
15    alert("Data Loaded: " + data);
16 });
17
18 //向页面 test.php 发送数据，并输出结果（HTML 或 XML，取决于所返回的内容）：
19 $.post("test.php", { name: "John", time: "2pm" },
20    function(data){
21      alert("Data Loaded: " + data);
22 });
23
24 //获得 test.php 页面的内容，并存储为 XMLHttpResponse 对象，并通过 process() 这个 JavaScript 函数进行处理：
25 $.post("test.php", { name: "John", time: "2pm" },
26    function(data){
27      process(data);
28 }, "xml");
29
30
31 //获得 test.php 页面返回的 json 格式的内容:
32 $.post("test.php", { "func": "getNameAndTime" },
33    function(data){
34      alert(data.name); // John
35      console.log(data.time); //  2pm
36    }, "json");

　　6. jQuery.ajax(url,[settings]) -- 返回值XMLHttpRequest --通过 HTTP 请求加载远程数据

　　jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

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

　　注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。

 1 //保存数据到服务器，成功时显示信息。
 2 $.ajax({
 3   method: "POST",
 4   url: "some.php",
 5   data: { name: "John", location: "Boston" }
 6 }).done(function( msg ) {
 7   alert( "Data Saved: " + msg );
 8 });
 9
10 //装入一个 HTML 网页最新版本。
11 $.ajax({
12   url: "test.html",
13   cache: false
14 }).done(function( html ) {
15   $("#results").append(html);
16 });
17
18 //发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式
19 var xmlDocument = [create xml document];
20 var xmlRequest = $.ajax({
21   url: "page.php",
22   processData: false,
23   data: xmlDocument
24 });
25
26 xmlRequest.done(handleResponse);
27
28 //发送id作为数据发送到服务器， 保存一些数据到服务器上， 并通一旦它的完成知用户。  如果请求失败，则提醒用户。
29 var menuId = $("ul.nav").first().attr("id");
30 var request = $.ajax({
31   url: "script.php",
32   method: "POST",
33   data: {id : menuId},
34   dataType: "html"
35 });
36
37 request.done(function(msg) {
38   $("#log").html( msg );
39 });
40
41 request.fail(function(jqXHR, textStatus) {
42   alert( "Request failed: " + textStatus );
43 });
44
45 //载入并执行一个JavaScript文件.
46 $.ajax({
47   method: "GET",
48   url: "test.js",
49   dataType: "script"
50 });