jQuery學習筆記（Ajax）

時間  2019-12-14
標籤 jquery 學習 筆記 ajax 欄目 JQuery 简体版
原文   原文鏈接

jQuery對Ajax操做進行了封裝，在jQuery中$.ajax方法屬於最底層的方法，第2層是$.load()、$.get()、$.post()方法，第3層是$.getScript()和$.getJSON()方法。html

1. $.load(url [,data] [,callback])方法，載入HTML文檔

- url (String) : 請求HTML頁面的URL地址
- data (Object) : (可選) 發送至服務器的 key/value 對
- callback (Function) : (可選) 請求完成時的回調函數（成功、失敗都調用）java

簡單示範：ajax

  $(function(){
      $("#send").click(function(){
          $("#resText").load("test.html");
      })
  })

同時，load()方法能夠篩選載入的HTML文檔，URL參數語法結構爲：「url selector「。示範：json

  $(function(){
      $("#send").click(function(){
             $("#resText").load("http://www.cnblogs.com/nayitian/archive/2013/01/18/2866667.html .post");
      })
  })

load()方法的傳遞方式根據參數data自動指定。若是沒有參數傳遞，則採用get方式傳遞；反之，則會自動轉換爲post方式。api

回調函數必須在加載完成後才能繼續操做。示範以下：跨域

$(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對象
        });
    })
})

2. $.get(url [,data] [,callback] [,type])方法

- url (String) : 請求HTML頁面的URL地址
- data (Object) : (可選) 發送至服務器的 key/value 對，做爲QueryString附加到請求URL中
- callback (Function) : (可選)載入成功時回調函數（只有當Reponse的返回狀態是success才調用），自動將請求結果和狀態傳遞給該方法
- type (String) : (可選) 服務器端返回內容的格式，包括：xml/html/script/json/text/_default數組

2.1 示範一，返回HTML格式的數據（後臺代碼略）

$(function(){
    $("#send").click(function(){
        $.get("get1.jsp", { 
            username :  encodeURI( $("#username").val() ) , 
            content :   encodeURI( $("#content").val() ) 
        }, function (data, textStatus){
            $("#resText").html(  decodeURI(data) ); // 把返回的數據添加到頁面上
        }
        );
    })
})

2.2 示範二，返回XML格式數據

調用頁面：瀏覽器

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

後臺JSP頁面（注意最好別留換行符，不然前臺可能不能正常解析）：緩存

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
  String username = request.getParameter("username");
  String content = request.getParameter("content");
  response.setContentType("text/xml");
  out.println("<?xml version='1.0' encoding='UTF-8'?>");
  out.println("<comments>");
  out.println("<comment username='"+username+"'>");
  out.println("<content>"+content+"</content>");
  out.println("</comment>");
  out.println("</comments>");
%>

2.3 示範三，返回JSON格式數據

調用頁面：安全

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

後臺JSP頁面（JSON串必須用雙引號，不打引號或用單引號都有問題）：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
  String username = request.getParameter("username");
  String content = request.getParameter("content");
  // 必須用雙引號，不打引號或用單引號都有問題
  out.println("{\"username\":\""+username+"\",\"content\":\""+content+"\"}");
%>

3. $.post(url [,data] [,callback] [,type])方法

它與$.get()方法的結構和使用方式都相同，存在以下區別：

  • get請求會將參數緊跟在URL後進行傳遞，而post請求則是做爲HTTP消息的實體內容發送給Web服務器。
  • get方式對傳輸在數據有大小限制（一般不以大於2kb），而使用post方式傳遞數據理論上不受限制。
  • get方式請求的數據會被遊覽器緩存起來，有可能帶來安全性問題，而post不存在此問題。
  • get與post服務器端獲取也有些差異（用request獲取例外）。

4. $.getScript()方法與$.getJSON()方法

jQuery提供了$.getScript()方法來直接加載.js文件，與加載一個HTML片斷同樣簡單方便，而且不須要對JavaScript進行處理，JavaScript文件會自動執行。

jQuery 1.2版本以前，getScript()只能調用同域 JS文件。 1.2以後，能夠跨域調用JavaScript文件。

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

$.getJSON()方法用於加載JSON文件，與$.getScript()方法的用法相同。

$(function(){
    $('#send').click(function() {
        $.getJSON('test.json', 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);
        })
    })
})

5. $.ajax()方法

$.ajax()方法是jQuery最底層的Ajax實現，結構：$.ajax(options)，該方法只有一個參數，但在這個對象裏包含了$.ajax()方法所須要的請求設置以及回調函數等信息，參數以key/value的形式存在 ，全部參數都是可選的。

前面用到的$.load()、$.get()、$.post()、$.getScript()、$.getJSON()這些方法，都是基於$.ajax()方法構建的。

經常使用參數以下表：

參數名

類型

描述

url

String

(默認: 當前頁地址) 發送請求的地址。

type

String

請求方式 ("POST" 或 "GET")， 默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 Delete 也可使用，但僅部分瀏覽器支持。

timeout

Number

設置請求超時時間（毫秒）。此設置將覆蓋全局設置。

async

Boolean

(默認: true) 默認設置下，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲 false。注意，同步請求將鎖住瀏覽器，用戶其它操做必須等待請求完成才能夠執行。

beforeSend

Function

發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是惟一的參數。

function (XMLHttpRequest) {  

    this; // 調用本次Ajax請求時傳遞的options參數

}

cache

Boolean

(默認: true) jQuery 1.2 新功能，設置爲 false 將不會從瀏覽器緩存中加載請求信息。

complete

Function

請求完成後回調函數 (請求成功或失敗時均調用)。參數： XMLHttpRequest 對象，成功信息字符串。

function (XMLHttpRequest, textStatus) {  

    this; // 調用本次Ajax請求時傳遞的options參數

}

contentType

String

(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。

data

Object, String

發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲 Key/Value 格式。若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。

dataType

String

預期服務器返回的數據類型。若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText，並做爲回調函數參數傳遞，可用值:

"xml": 返回 XML 文檔，可用 jQuery 處理。

"html": 返回純文本 HTML 信息；包含 script 元素。

"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。

"json": 返回 JSON 數據 。

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。

error

Function

(默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。這個方法有三個參數：XMLHttpRequest 對象，錯誤信息，（可能）捕獲的錯誤對象。

function (XMLHttpRequest, textStatus, errorThrown) {  

    // 一般狀況下textStatus和errorThown只有其中一個有值  

    this; //調用本次Ajax請求時傳遞的options參數

}

global

Boolean

(默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用於控制不一樣的Ajax事件

ifModified

Boolean

(默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。

processData

Boolean

(默認: true) 默認狀況下，發送的數據將被轉換爲對象(技術上講並不是字符串) 以配合默認內容類型 "application/x-www-form-urlencoded"。若是要發送 DOM 樹信息或其它不但願轉換的信息，請設置爲 false。

success

Function

請求成功後回調函數。這個方法有兩個參數：服務器返回數據，返回狀態

function (data, textStatus) {  

    // data could be xmlDoc, jsonObj, html, text, etc...    

    this; // 調用本次Ajax請求時傳遞的options參數

}

 5.1 下述代碼取代$.getScript()方法

   $(function(){
        $('#send').click(function() {
            $.ajax({
              type: "GET",
              url: "test.js",
              dataType: "script"
            }); 
        });
   })

5.2 下述代碼取代$.getJSON()方法

   $(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);
              }
            }); 
        });
   })

5.3 跨域調用示範

$(function(){
    $('#send').click(function() {
        $.ajax({
          type: "GET",
          url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
          dataType: "jsonp",
          success : function(data){
              $.each(data.items, function( i,item ){
                    $("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
                    if ( i == 3 ) { 
                        return false;
                    }
              });
          }
        }); 
    });
})

6. serialize()方法、serializeArray()方法、param()方法

6.1 serialize()方法

serialize()方法可以將DOM元素內容序列化爲字符串，用於Ajax請求，此方法還能夠自動編碼，以免編碼帶來的問題。示範：

$(function(){
   $("#send").click(function(){
        $.post("get1.jsp", $("#form1").serialize() , function (data, textStatus){
                $("#resText").html(data); // 把返回的數據添加到頁面上
            }
        );
   })
})

serialize()方法能夠表單進行過濾，如：

$(function(){
   $("#send").click(function(){
        var $data =  $(":checkbox,:radio").serialize();
        alert( $data );
   })
})

6.2 serializeArray()方法

serializeArray()方法不是返回字符串，而是將DOM對象序列化後，返回JSON格式的數據，示範：

$(function(){
     var fields = $(":checkbox,:radio").serializeArray();
     console.log(fields);// Firebug輸出
     $.each( fields, function(i, field){
        $("#results").append(field.value + " , ");
    }); 
})

6.3 param()方法

它是serialize()方法的核心，用來對一個數組或對象按照key/value進行序列化。

$(function(){
    var obj={a:1,b:2,c:3};
    var  k  = $.param(obj);
    alert(k)        // 輸出  a=1&b=2&c=3
})

7. Ajax事件

jQuery簡化Ajax操做不只體如今調用Ajax方法和處理響應方面，並且還體如今對調用Ajax方法的過程當中的HTTP請求的控制。經過jQuery提供的一些自定義全局函數，可以爲各類Ajax相關的事件註冊回調函數。

在jQuery這裏有兩種Ajax事件：「局部事件」和「全局事件」。

局部事件就是在每次的Ajax請求時在方法內定義的，好比：

$.ajax({
    beforeSend: function(){
        // Handle the beforeSend event
    },
    complete: function(){
        // Handle the complete event
    }
    // ...
});

全局事件是每次的Ajax請求都會觸發的，它會向DOM中的全部元素廣播，好比，裝載一個頁面時，在開始裝載提示「加載中...「；裝載完畢，提示消失；以增長用戶體驗。示範：

<div id="loading">加載中...</div>
   $("#loading").ajaxStart(function(){
      $(this).show();
   });
   $("#loading").ajaxStop(function(){
      $(this).hide();
   });

咱們能夠在特定的請求將全局事件禁用，只要設置下 global 選項就能夠了：

 $.ajax({
    url: "test.html",
    global: false,// 禁用全局Ajax事件.
    // ...
});

下面是jQuery官方給出的完整的Ajax事件列表：

  • ajaxStart (Global Event) This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
  • beforeSend (Local Event)      This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)     
  • ajaxSend (Global Event)      This global event is also triggered before the request is run.     
  • success (Local Event)      This event is only called if the request was successful (no errors from the server, no errors with the data).     
  • ajaxSuccess (Global Event)      This event is also only called if the request was successful.     
  • error (Local Event)      This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).     
  • ajaxError (Global Event)      This global event behaves the same as the local error event.     
  • complete (Local Event)      This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.     
  • ajaxComplete (Global Event)      This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
  • ajaxStop (Global Event) This global event is triggered if there are no more Ajax requests being processed.
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程