jQuery总结4（Ajax）

jQuery学习4（Ajax）
一、什么是ajax
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
jQuery在全局对象jQuery（也就是$）绑定了ajax()函数，可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象，常用的选项如下：
async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；
contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；
data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
headers：发送的额外的HTTP头，必须是一个object；

dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type确定。

var configObj = {
       method   //数据的提交方式：get和post
       url   //数据的提交路劲
       async   //是否支持异步刷新，默认是true
       data    //需要提交的数据
       dataType   //服务器返回数据的类型，例如xml,String,Json等
       success    //请求成功后的回调函数
       error   //请求失败后的回调函数
    }
 
$.ajax(configObj);//通过$.ajax函数进行调用。

下面的例子发送一个GET请求，并返回一个JSON格式的数据：

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
});

看一个进行异步删除的例子：

$.ajax({  
           type : "POST",  //提交方式  
           url : "${pageContext.request.contextPath}/org/doDelete.action",//路径  
           data : {  
                   "org.id" : "${org.id}"  
                   },//数据，这里使用的是Json格式进行传输  
           success : function(result) {//返回数据根据结果进行相应的处理  
           if ( result.success ) {  
                $("#tipMsg").text("删除数据成功");  
           tree.deleteItem("${org.id}", true);  
           } else {  
                $("#tipMsg").text("删除数据失败");  
            }  
            }  
});

不过，如何用回调函数处理返回的数据和出错时的响应呢？
jQuery的jqXHR对象类似一个Promise对象，我们可以用链式写法来处理各种回调：

function ajaxLog(s) {
    var txt = $('#test-response-text');
    txt.val(txt.val() + '\n' + s);
}
$('#test-response-text').val('');
var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
}).done(function (data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});

二、常用方法
1、load()
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$(selector).load(URL,data,callback);
URL：必需，参数规定了加载的 URL。
data：可选，参数规定与请求一同发送的查询字符串键/值对集合。
callback：可选，参数是 load() 方法完成后所执行的函数名称。
这是示例文件（"demo_test.txt"）的内容：

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：
示例
$("#div1").load("demo_test.txt");
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
实例
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：
实例

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

2、$.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
URL：必需，参数规定请求的 URL。
callback：可选，参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例

var jqxhr = $.get('/path/to/resource', {
    name: 'kang chen',
    check: 1
});

第二个参数如果是object，jQuery自动把它变成query string然后加到URL后面，实际的URL是：
/path/to/resource?name=kang%20chen&check=1
这样我们就不用关心如何用URL编码并构造一个query string了。

3、jQuery $.post() 方法

$.post，这个函数其实就是对$.ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。在满足这些情况下，我们可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，我们不可以改变的。

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：
$.post(URL,data,callback);
URL：必需，参数规定您希望请求的 URL。
data：可选 参数规定连同请求发送的数据。
callback：可选 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
实例

post()和get()类似，但是传入的第二个参数默认被序列化为application/x-www-form-urlencoded：
var jqxhr = $.post('/path/to/resource', {
    name: 'kang chen',
    check: 1
});

实际构造的数据name=kang%20chen&check=1作为POST的body被发送。


4、jQuery $.getJSON() 方法
由于JSON用得越来越普遍，所以jQuery也提供了getJSON()方法来快速通过GET获取一个JSON对象：

var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // data已经被解析为JSON对象了
});

5、安全限制
jQuery的AJAX完全封装的是JavaScript的AJAX操作，所以它的安全限制和前面讲的用JavaScript写AJAX完全一样。如果需要使用JSONP，可以在ajax()中设置jsonp: 'callback'，让jQuery实现JSONP跨域加载数据。

三、数据封装

这里还有一个问题，比较麻烦，就是如果页面数据量比较大，该怎么办呢？在常规表单的处理中，我们使用框架Struts2可以通过域驱动模式进行自动获取封装，那么通过ajax,如何进行封装呢？这里JQuery有一个插件，Jquery Form，通过引入此js文件，我们可以模仿表单Form来支持Struts2的域驱动模式，进行自动数据的封装。用法和$.ajax类似，看一下实际的例子，这里写一个保存用户的前台代码：

$(function(){  
        var options = {  
            beforeSubmit : function() {//处理以前需要做的功能  
                $("tipMsg").text("数据正在保存，请稍候...");  
                $("#insertBtn").attr("disabled", true);  
            },  
            success : function(result) {//返回成功以后需要的回调函数  
                if ( result.success ) {  
                    $("#tipMsg").text("机构保存成功");  
                                      
                                       //这里是对应的一棵树，后边会介绍到，  
                    // 控制树形组件，增加新的节点  
                    var tree = window.parent.treeFrame.tree;  
                    tree.insertNewChild("${org.id}", result.id, result.name);  
                } else {  
                    $("#tipMsg").text("机构保存失败");  
                }  
                // 启用保存按钮  
                $("#insertBtn").attr("disabled", false);  
            },  
            clearForm : true  
        };  
      
        $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交  
    });  

这样我们就不用再进行数据data的封装处理，大大简化了我们ajax的操作这样异步刷新的操作。综上为JQuery中ajax的操作，感觉使用多了，和form表单的处理还是非常相似的，只不过实现的功能不一样罢了。学习编程，其实就是学习对数据的流转处理，如何从前台获取，传输到服务器进行相应的处理，然后返回，进行相关的显示，把这个流程通过一些技术实现，就完成了软件的开发。