zoukankan      html  css  js  c++  java
  • 第六章(jQuery 与 Ajax 的应用)(6.5 jQuery 中的 Ajax)

    jQuery 对 Ajax 操作进行了封装,在 jQuery 中 $.ajax() 方法属于最底层的方法,第二层是 load() / $.get()  /  $.post() 方法,第三层是 $.getScript() 和 $.getJSON() 方法

    6.5.1 load() 方法

    1 载入 HTML 文档

    load() 方法是 jQuery 中最简单和常用的 Ajax 方法,能载入远程 HTML 代码并插入 DOM中,结构为:

    load(url [,data] [, callback]);

    参数详解:

    参数名称

    类型

    说明

    url

    String

    请求HTML 页面的URL地址

    Data(可选)

    Object

    发送至服务器的 key/value 数据

    Callback(可选)

    Function

    请求完成时的回调函数,无论请求成功或失败

    首先构建一个被 load() 方法加载并追加到页面中的 HTML 文件,名字为 test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="comment">
             <h6>张三:</h6>
             <p class="para">沙发.</p>
        </div>
        <div class="comment">
             <h6>李四:</h6>
             <p class="para">板凳.</p>
        </div>
        <div class="comment">
             <h6>王五:</h6>
             <p class="para">地板.</p>
        </div>
    </body>
    </html>

    新建空白页面,添加一个 <button> 按钮用来触发 Ajax 事件,id 为“resTest” 的元素用来显示追加的 HTML 内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            * { margin:0; padding:0;}
            body { font-size:12px;}
            .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
            .comment h6 { font-weight:700; font-size:14px;}
            .para { margin-top:5px; text-indent:2em;background:#DDD;}
        </style>
    </head>
    <body>
        <input type="button" id="sent" value="Ajax获取" name="">
    
        <div class="comment">
            已有评论:
        </div>
        <div id="resText"></div>
    </body>
    </html>

    接下来编写 jQ 代码,等DOM元素加载完毕后,通过单击 id 为“send”的按钮来调用 load() 方法,然后将test.html 的内容加载到 id 为“resText” 的元素中

        <script type="text/javascript">
            $(function(){
                $("#send").click(function(){
                    $("#resText").load("test.html");
                })
            })
        </script>

    将HTML文档和 text.html 文档放在同一目录下

    效果:点击 Ajax 按钮弹出 text.html 文档的内容

     总结:

    开发人员使用 jQuery 选择器为HTML片段指定目标位置,然后将要加载的文件的 URL 作为参数传递给 load() 方法即可,当单击按钮后, test.html 页面的 HTML 内容会被加载到主页面

    test.html 并没有添加样式,但是却有样式,是因为主页面中添加了样式,主页面中相应的样式会立即应用到新加载的内容上。

     2 筛选载入的 HTML 文档

     上述示例是将 test.html 页面内容都加载到 id 为“resText” 的元素里,如果只需加载 test.html 页面内的某些元素,那么可以使用 load() 方法的 URL 参数来实现,通过为 URL 参数指定选择符,就可以从加载过来的 HTML 文档里筛选出所需内容

    load() 方法的 URL 参数语法结构为:"url selector" 需要注意,URL 和选择器之间有一个空格

    $("#resText").load("test.html .para");

    修改后实现效果:

    加强版,返回各种相关数据:

    <script language="javascript" type="text/javascript">
      $(function(){
          $("#send").click(function(){
                  $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
                             alert( $(this).html() );    //在这里this指向的是当前的DOM对象,即 $("#iptText")[0]
                             alert(responseText);       //请求返回的内容
                             alert(textStatus);            //请求状态:success,error
                             alert(XMLHttpRequest);     //XMLHttpRequest对象
                });
          })
      })
    </script>

    3 传递方式

    load() 方法的传递方式根据参数 data 来自动指定,如果没有参数传递,则采用 GET 方式传递,反之,则会自动转换为 POST 方式。

            // 无参数传递,则是 GET 方式
            $("#resText").load("test.php",function(){
                //.....
            });
            // 有参数传递,则是 POST 方式
            $("resText").load("test.php",function(responseText,textStatus,XMLHttpRequest){
                //.....
            })

    4 回调参数

    对于必须加载完成后才能继续的操作,load() 方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容,请求状态和 XMLHttpRequest 对象

    $("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
        // responseText   请求返回的内容
        // textStatus     请求状态 success/error/notmodified/timeout
        // XMLHttpRequest XMLHttpRequest对象
    })

    6.5.2 $.get()方法和 $.post()方法

    1. $.get() 方法

    $.get() 方法可以使用 GET 方式来进行异步请求

    结构为:

    $.get(url [, data] [, callback] [, type]);

    参数名称

    类型

    说明

    url

    String

    请求的HTML页的URL地址

    Data(可选)

    Object

    发送至服务器的key/value数据会作为QueryString附加到请求的URL中

    Callback(可选)

    Function

    载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法

    Type(可选)

    string

    服务器端返回内容的格式,包括xml/html/script/json/text/_default

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            * { margin:0px; padding:5px;}
            body { font-size:16px;}
            .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
            .comment h6 { font-weight:700; font-size:14px;}
            .para { margin-top:5px; text-indent:2em;background:#DDD;}
        </style>
    
        </style>
        <script src="jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <form action="#" id="form1">
            <p>评论:</p>
            <p>姓名:<input type="text" name="username" id="username"></p>
            <p>内容:<textarea name="content" id="content" cols="20" rows="2"></textarea></p>
            <p><input type="button" id="send" value="提交"></p>
        </form>
    
        <div class="comment">已有评论:</div>
            <div id="resText"></div>

    ① 使用参数

    首先,需要确定请求页面的 URL 地址

    $("#send").click(function(){
        $.get('get1.php'  data参数,回调函数);
    })

    然后,在提交之前,需要获取“姓名”和“内容”的值作为 data 参数传递给后台

    $("#send").click(function(){
        $.get('get1.php' ,{
            username:$("#username").val(),
            content :$("content").val()
        }, 回调函数);
    })

    如果服务器端接收到传递的 data 数据并成功返回,那么就可以通过回调函数将返回的数据显示到页面上

    $.get() 方法的回调函数只有两个参数

    function (data , textStatus){
        // data   返回的内容,可以是 xml/html/json等
        // textStatus  请求状态  success/error/notmodified/timeout
    }

    data 参数代表请求返回的内容,textStatus参数代表请求状态,而且回调函数只有当数据成功返回(success)后才被调用,这点与 load() 方法不一样。

    ② 数据格式

    服务器返回的数据格式可以有多种,它们都可以完成同样的任务

    HTML 片段

    由于服务器端返回的数据格式是 HTML 片段,因此并不需要经过处理就可以将新的HTML数据插入到主页面中

        $(function(){
           $("#send").click(function(){
                $.get("get1.php", { 
                            username :  $("#username").val() , 
                            content :  $("#content").val()  
                        }, function (data, textStatus){
                            $("#resText").html(data); // 把返回的数据添加到页面上
                        }
                );
           })
        })

    XML 文档

    由于服务器返回的数据格式是 XML 文档,因此需要对返回的数据进行处理,处理 XML 文档与处理 HTML 文档一样,也可以使用常规的 attr() / find() / filter() 以及其他方法

        $(function(){
           $("#send").click(function(){
                $.get("get2.php", { 
                            username :  $("#username").val() , 
                            content :  $("#content").val()  
                        }, function (data, textStatus){
                            var username = $(data).find("comment").attr("username");
                            var content = $(data).find("comment content").text();
                            var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                            $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                        });
           })
        })

    返回数据格式为 XML 文档的过程实现起来比 HTML 片段要稍微复杂些,但XML 文档的可移植性非常好,因此以这种格式提供的数据的重用性将极大提高。不过,XML 文档体积相对较大,与其他文件格式想比,解析和操作它们的速度要慢一些。

    JSON 文件

    之所以会出现JSON格式的文件,是因为 XML 文档体积大和难以解析, JSON 和 XML 一样,也可以方便的被重用,而且,JSON 文件非常简洁,也容易阅读

    由于服务器端返回的数据格式是 JSON 文件,因此需要对数据进行处理后,才可以将新的HTML 数据添加到主页面中

        $(function(){
           $("#send").click(function(){
                $.get("get3.php", { 
                            username :  $("#username").val() , 
                            content :  $("#content").val()  
                        }, function (data, textStatus){
                            var username = data.username;
                            var content = data.content;
                            var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                            $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                        },"json");
           })
        })

    将上述$.get() 方法的第四个参数(type)设置为“json”来代表期待服务器端返回的数据格式

    HTML / XML / JSON 三种数据格式都可以达到上述效果。进行优缺点分析

    不需要与其他应用程序共享数据的时候,使用HTML 片段来提供返回数据是最简单的

    如果数据需要重用,那么可以选择JSON,其性能和文件大小方面都有优势

    当远程应用程序未知时,使用XML 文档最好,它是WEB服务领域的“世界语”,通用。

    2 $.post() 方法

    与 $.get() 方法的结构和使用方式都相同,不过也是有区别:

    ①GET 请求会将参数跟在URL 后进行传递,而 POST 请求则是作为 HTTP 消息的实体内容发送给 WEB 服务器,当然,在 Ajax 请求中,这种区别对用户是不可见的。

    ②GET 方式对传输的数据大小有限制(通常不能大于 2KB),而使用 POST 方式传递的数据量要比 GET 方式大很多(理论上不受限制)

    ③GET 方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史纪录中读取到这些数据,例如账号密码等,在某种情况下,GET 方式会带来严重的安全问题,而POST 方式相对来说就可以避免这些问题

    ④GET 方式和POST 方式传递的数据在服务器端的获取也不相同。在PHP 中,GET方式的数据可以用 $_GET[] 获取,而POST 方式可以用 $_POST[] 来获取,但是两种方式都可以用 $_REQUEST[] 来获取。

    由于POST 和GET 方式提交的所有数据都可以通过 $_REQUEST[] 来获取,因此只需要改变 jQuery 函数,就可以将程序在 GET 和 POST 请求之间切换。

        $(function(){
           $("#send").click(function(){
                $.post("post1.php", { 
                            username :  $("#username").val() , 
                            content :  $("#content").val()  
                        }, function (data, textStatus){
                            $("#resText").html(data); // 把返回的数据添加到页面上
                        }
                );
           })
        })

    当load() 方法带有参数时,会使用 POST 方法发送请求,因此也可以使用 load()方法来完成同样的功能

        $(function(){
           $("#send").click(function(){
                  $("#resText").load("post1.php",{ 
                            username :  $("#username").val() , 
                            content :  $("#content").val()  
                  })
           })
        })

    6.5.3 $.getScript() 方法和 $.getJson() 方法1.

    1. $getScript()

    有时候,在页面初次加载时就取得所需的全部 Javascript 文件是完全没有必要的,虽然可以在需要哪个javascript文件时,动态地创建 <script>标签。如下代码:

    $(document.createElement("script")).attr("src","test.js").appendTo("head");
    
    //或者
    
    $("<script type='text/javascript' src='test.js'>").appendTo("head");

    但是这种方式并不理想,所以,jQ 提供了 $.getScritp() 方法来直接加载 js 文件,与加载 HTML 片段一样方便,并且不需要对 javascript 文件进行处理,javascript 文件会自动执行

    $(function(){
       $('#send').click(function(){
             $.getScript('test.js'); 
        }) 
    })

    创建test.js 文件

    var comments = [
      {
        "username": "张三",
        "content": "沙发."
      },
      {
        "username": "李四",
        "content": "板凳."
      },
      {
        "username": "王五",
        "content": "地板."
      }
    ];
    
      var html = '';
      $.each( comments , function(commentIndex, comment) {
          html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
      })
    
      $('#resText').html(html);

    将test.js加载到 HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            * { margin:0px; padding:5px;}
            body { font-size:16px;}
            .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        </style>
    
        </style>
        <script src="jquery-3.2.1.min.js"></script>
    </head>
    <body>
         <br/>
         <p>
             <input type="button" id="send" value="加载"/>
         </p>
    
        <div  class="comment">已有评论:</div>
         <div id="resText" >
            
         </div>
        <script>
            $(function(){
                $("#send").click(function(){
                    $.getScript('test.js');
                })
            })
        </script>
    </body>
    </html>

    效果如图,点击加载,会加载出 test.js 文件内容。

    与其他Ajax方法一样,$.getScript() 方法也有回调函数,它会在 javascript 文件成功载入后运行,例如想载入 jQ 官方颜色动画插件(jQuery.coloc.js),成功后给元素绑定颜色变化动画,就可以用到 $.getScript() 方法的回调函数

    将 jQuery.js 和 jQuery.coloc.js 和 HTML 文件放在同以文件夹下

    HTML代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            * { margin:0; padding:0;}
            body { font-size:12px; margin-top: 50px;margin-left: 50px;}
            .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
            .comment h6 { font-weight:700; font-size:14px;}
            .para { margin-top:5px; text-indent:2em;background:#DDD;}
            .block{width:80px;height:80px;background:#DDD;}
        </style>
    
        </style>
        <script src="jquery-3.2.1.min.js"></script>
    </head>
    <body>
    <button id="go">运行</button><br/><br/>
    <div class="block"></div> 
        <script>
            $(function(){
                $.getScript('jquery.color.js',function(){
                    $("<p>加载JavaScript完毕</p>").appendTo("body");
                    $("#go").click(function(){
                        $(".block").animate( {backgroundColor: 'pink'},1000)
                                    .animate({backgroundColor: 'blue'},1000)
                    });
                });
            })
        </script>
    </body>
    </html>

     

    当 jquery.color.js 动画插件加载完毕后,单击 id 为 “go” 的按钮时,class 为 block 的元素就有了颜色动画变化,从无色变为粉色,再变为蓝色。

    2 $.getJSON()

    $.getJSON() 方法用于加载 JSON 文件,与 $.getScript() 方法的用法相同

    $(function(){
        $('#send').click(function(){
             $.getJSON("test.json");
        })
    })    

    HTML结构为

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            * { margin:0; padding:0;}
            body { font-size:12px;}
            .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
            .comment h6 { font-weight:700; font-size:14px;}
            .para { margin-top:5px; text-indent:2em;background:#DDD;}
        </style>
    
        </style>
        <script src="jquery-3.2.1.min.js"></script>
    </head>
    <body>
     <br/>
     <p>
         <input type="button" id="send" value="加载"/>
     </p>
    
    <div  class="comment">已有评论:</div>
     <div id="resText" >
        
     </div>
    
    </body>
    </html>

    test.json 的JSON 结构为

    [
      {
        "username": "张三",
        "content": "沙发."
      },
      {
        "username": "李四",
        "content": "板凳."
      },
      {
        "username": "王五",
        "content": "地板."
      }
    ]

    当单击“加载”按钮后,网页上看不到任何效果,虽然函数加载了 JSON 文件,但是并没有告诉 javascript 对返回的数据如何处理,为此,jQ提供了回调函数,在回调函数里处理返回的数据

        <script>
            $(function(){
                $('#send').click(function(){
                    $.getJSON('test.json',function(data){
                        //  data: 返回的数据
                    });
                });
            })
        </script>

    可以在函数中通过 data 变量来遍历相应的数据,也可以使用迭代方式为每个项构建相应的 HTML 代码,虽然在这里可以使用传统的 for 循环来实现,在 jQ 中提供了一个通用的遍历方法 $.each() ,可以用于遍历对象和数组。

    $.each()函数不同于 JQ对象的 each() 方法 ,它是一个全局函数,不操作 jQ 对象,而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数,回调函数拥有两个参数,第一个为对象的成员或者数组的索引,第二个为对应变量或内容

            $(function(){
                $('#send').click(function(){
                    $.getJSON('test.json',function(data){
                        //  data: 返回的数据
                        $('#resText').empty();
                        var html = '';
                        $.each(data , function(commentIndex,comment){
                            html += '<div class= "comment"><h6>'
                                    + comment['username']+ ':</h6><p class="para">'
                                    + comment['content']+ '</p></div>'
                        });
                        $('#resText').html(html);
                    });
                });
            })

    上述代码,当返回数据成功后,首先清空 id 为“resText”的元素内容,以便重新构造新的HTML,然后通过 $.each() 循环函数一次遍历每个项,并将遍历出来的内容构建成HTML 代码拼接起来,最后将构建好的 html 添加到 ID 为 “resText” 的元素中。

    效果:

    点击加载同样能显示 test.json 文件的内容。

    6.5.4 $.ajax() 方法

    $.ajax() 方法是 jQuery 最底层的 Ajax 实现,其结构为:

    $.ajax(options);

    该方法只有一个参数,但在这个对象里包含了 $.ajax() 方法所需要的请求设置以及回调函数等信息,参数以 key/value 的形式存在,所有参数都是可选的。

    $.ajax() 方法常用参数解释

    参数名称

    类型

    说明

    url

    String

    (默认为当前页地址)发送请求的地址

    type

    String

    请求方式(POST或GET)默认为 GET,注意其他 HTTP 请求方法,例如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持

    timeout

    Number

    设置请求超时时间(毫秒),此设置将覆盖$.ajaxSetup() 方法的全局设置

    data

    Object或string

    发送到服务器的数据,如果已经不是字符串,将自动转换为字符串格式,GET 请求中将附加在 URP后,防止这种自动转换,可以查看processData选项,对象必须为key/value格式,例如({fool:’bar1’,foo2:’bar2’}转换为&foo1 = bar1 &foo2 = bar2.如果是数组,jQ将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为 &foo=bar1&foo=bar2)

    dataType

    String

    预期服务器返回的数据类型,如果不指定它,jQ 将自动根据HTTP包MIME信息返回responseXML 或 responseText,并作为回调函数参数传递。

    可用类型如下:

    Xml:返回XML 文档,可用jQ处理

    Hmtl:返回纯文本HTML 信息,包含的script标签会在插入DOM时执行。

    Script:返回纯文本javascript代码,不会自动缓存结果,除非设置了cache 参数,注意在远程请求时(不在同一个域下),所有POST请求都将转为GET请求

    Json:返回JSON数据。

    Jsonp:JSONP格式,使用SONP形式调用函数时,例如 myurl?callback=?,jQuery 将自动替换后一个“?”为正确的函数名,以执行回调函数

    beforeSend

    function

    发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP 头,在beforeSend中如果返回false可以取消本次Ajax请求,XMLHttpRequest对象是唯一的参数

    function(XMLHttpRequest){

       this;// 调用本次Ajax请求时传递的options参数

    }

    complete

    function

    请求完成后调用的回调函数(请求成功或失败时均调用)

    参数:XMLHttpRequest对象和一个描述成功请求类型的字符串

    function(XMLHttpRequest){

       this;//调用本次Ajax请求时传递的options参数

    }

    success

    function

    请求成功后调用的回调函数,有2个参数

    ①由服务器返回,并根据dataType参数进行处理后的数据

    ②描述状态的字符串

    function(data,textStatus){

         //data 可能是xmlDoc/jsonObj/html/text等等

         this;//调用本次Ajax请求时传递的options参数

    }

    error

    function

    请求失败时被调用的函数,该函数有3个参数,即

    XMLHttpRequest对象/错误信息/捕获的错误对象(可选)

    Ajax事件函数如下:

    function(XMLHttpRequest,textStatus,errorThrown){

    //通常情况下 textStatus和errorThown只有其中一个包含信息

    this;//调用本次Ajax请求时传递的options参数

    }

    global

    boolean

    默认为true。表示是否触发全局Ajax事件,设置为false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件

    之前所用到的 $.load() / $.get() / $.post() / $.getScript() / $.getJSON() 这些方法,都是基于$.ajax() 方法构建的。$.ajax() 方法是 jQuery 最底层的 Ajax实现,因此可以用它来代替前面的所有方法

    例如:

    用$.ajax() 方法来代替 $.getJSON() 方法

    $.getJSON() 方法

            $(function(){
                $('#send').click(function(){
                    $.getJSON('test.json',function(data){
                        //  data: 返回的数据
                        $('#resText').empty();
                        var html = '';
                        $.each(data , function(commentIndex,comment){
                            html += '<div class= "comment"><h6>'
                                    + comment['username']+ ':</h6><p class="para">'
                                    + comment['content']+ '</p></div>'
                        });
                        $('#resText').html(html);
                    });
                });
            })

    $.ajax() 方法

            $(function(){
                $('#send').click(function(){
                    $.ajax({
                        type:"GET",
                        url :"test.json",
                        dataType:"json",
                        success: function(data){
                        $('#resText').empty();
                        var html = '';
                        $.each(data , function(commentIndex,comment){
                            html += '<div class= "comment"><h6>'
                                    + comment['username']+ ':</h6><p class="para">'
                                    + comment['content']+ '</p></div>'
                        });
                        $('#resText').html(html);
                        }
                    });
                });
            })
  • 相关阅读:
    [Leetcode]-Palindrome Number
    timesten升级
    C++的for循环细节,必看!
    web desktop在线演示
    定制流程
    西服定制 服装在线定制 GIMIWEAR高级定制
    Roseonly:互联网轻奢品牌之路-搜狐IT
    妊娠纹_百度百科
    ARPU_百度百科
    工商管理硕士(MBA)-北大国际MBA
  • 原文地址:https://www.cnblogs.com/cimuly/p/7215255.html
Copyright © 2011-2022 走看看