jQuery总结4（Ajax）

我会带着你远行 2022-06-16 06:53 149阅读 0赞

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对象，我们可以用链式写法来处理各种回调：

二、常用方法  
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表单的处理还是非常相似的，只不过实现的功能不一样罢了。学习编程，其实就是学习对数据的流转处理，如何从前台获取，传输到服务器进行相应的处理，然后返回，进行相关的显示，把这个流程通过一些技术实现，就完成了软件的开发。