1. 程式人生 > >Ajax和jQuery的ajax方法

Ajax和jQuery的ajax方法

Ajax

  • Asynchronous Javascript And XML(非同步 JavaScript 和 XML),是指一種建立互動式網頁應用的網頁開發技術
  • AJAX 不是新的程式語言,而是一種使用現有標準的新方法。
  • AJAX 最大的優點是在不重新載入整個頁面的情況下,可以與伺服器交換資料並更新部分網頁內容。
  • AJAX 不需要任何瀏覽器外掛,但需要使用者允許JavaScript在瀏覽器上執行。
XMLHttpRequest

XMLHttpRequest 是 AJAX 的基礎
- open(method,url,async)
規定請求的型別、URL 以及是否非同步處理請求。
- method:請求的型別;GET 或 POST
- url:檔案在伺服器上的位置
- async:true(非同步)或 false(同步)
- setRequestHeader(header,value)
向請求新增 HTTP 頭。
- header: 規定頭的名稱
- value: 規定頭的值
- send(string)
string:僅用於 POST 請求

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
responseText 獲得字串形式的響應資料。
responseXML 獲得 XML 形式的響應資料。
onreadystatechange 事件
  • onreadystatechange
    儲存函式(或函式名),每當 readyState 屬性改變時,就會呼叫該函式。
  • readyState
    存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
    0: 請求未初始化
    1: 伺服器連線已建立
    2: 請求已接收
    3: 請求處理中
    4: 請求已完成,且響應已就緒
  • status
    200: “OK”
    404: 未找到頁面

jQuery ajax

jQuery 提供多個與 AJAX 有關的方法。

編寫常規的 AJAX 程式碼並不容易,因為不同的瀏覽器對 AJAX 的實現並不相同。這意味著您必須編寫額外的程式碼對瀏覽器進行測試。不過,jQuery 團隊為我們解決了這個難題,我們只需要一行簡單的程式碼,就可以實現 AJAX 功能。

  • load() 方法從伺服器載入資料,並把返回的資料放入被選元素中。
    $(selector).load(URL,data,callback);
    • URL (必需的) 引數規定您希望載入的 URL。
    • data (可選的) 引數規定與請求一同傳送的查詢字串鍵/值對集合。
    • callback (可選的) 引數是 load() 方法完成後所執行的函式名稱。
  • get() 從指定的資源請求資料
    • $.get(URL,callback);
    • URL (必需的) 引數規定您希望請求的 URL。
    • callback (可選的) 引數是請求成功後所執行的函式名。
      • 第一個回撥引數存有被請求頁面的內容,第二個回撥引數存有請求的狀態。
  • post() 向指定的資源提交要處理的資料 POST 方法不會快取資料
    • $.post(URL,data,callback);
    • URL (必需的 引數規定您希望請求的 URL。
    • data (可選的) 引數規定連同請求傳送的資料。
    • callback (可選的) 引數是請求成功後所執行的函式名。
      • 第一個回撥引數存有被請求頁面的內容,而第二個引數存有請求的狀態。
  • getJSON()
    非同步載入JSON格式資料
    • $.getJSON(url,[data],[callback])
  • getScript()
    非同步載入並執行js檔案
    • $.getScript(url,[callback])
  • ajax()
    • 最底層、功能最強大的請求伺服器資料的方法
    • $.ajax([settings])
      • 引數settings 為傳送ajax請求時的配置物件,在該物件中:
      • url表示伺服器請求的路徑,
      • data為請求時傳遞的資料,
      • dataType為伺服器返回的資料型別,
      • success為請求成功的執行的回撥函式,
      • type為傳送資料請求的方式,預設為get。
  • ajaxSetup()

    設定全域性Ajax預設選項,使用ajaxSetup()方法可以設定Ajax請求的一些全域性性選項值,設定完成後,後面的Ajax請求將不需要再新增這些選項值

    • $.ajaxSetup([options])
      $.ajaxSetup({
          type:"POST",
          dataType:"json",
          success:function(data){
              console.log(data);
          }
      });
      $.ajax({
          url: "/book/list",
       });
  • ajaxStart()和ajaxStop()
    ajaxStart()和ajaxStop()方法是繫結Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函式,ajaxStop()方法用於在Ajax請求完成後觸發函式。
    • (selector).ajaxStart(function()) (selector).ajaxStop(function())