AJAX

2018-01-17 15:44 更新

jQuery - Ajax

AJAX 是一個首字母縮寫，代表異步 JavaScript 和 XML，這一技術幫助我們在沒有瀏覽頁面刷新的情況下從服務器加載數(shù)據(jù)。

如果你對 AJAX 比較陌生，我建議你在學習本教程之前先去瀏覽一下我們的 Ajax 教程。

JQuery 是一個偉大的工具，提供了一組豐富的 AJAX 方法來開發(fā)下一代 web 應用程序。

下載簡單的數(shù)據(jù)

使用 jQuery AJAX 來下載任何靜態(tài)或動態(tài)的數(shù)據(jù)都是非常簡單的。jQuery 提供了 load() 方法來實現(xiàn)這一功能 ——

語法

這是 load() 方法的簡單語法 ——

[selector].load( URL, [data], [callback] );

這是所有參數(shù)的描述 ——

  • URL —— 服務器端 URL 向發(fā)送請求的一端提供資源?？赡苁且粋€ CGI、ASP、JSP、PHP 腳本，能夠動態(tài)生成數(shù)據(jù)或數(shù)據(jù)庫。

  • data —— 這一可選參數(shù)代表了一個對象，它的屬性被序列化到要傳遞給請求端的正確編碼的參數(shù)。如果指定了，那么請求是由 POST 方法實現(xiàn)的。如果省略了，那么請求是由 GET 方法實現(xiàn)的。

  • callback —— callback 函數(shù)在請求數(shù)據(jù)被加載到匹配集合的元素后調(diào)用。向該函數(shù)傳遞的第一個參數(shù)是來自服務器端的響應文本，第二個參數(shù)時狀態(tài)碼。

示例

考慮下面這個帶有一小段 jQuery 編碼的 HTML 文件 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>

   </head>

   <body>

      <p>Click on the button to load /jquery/result.html file ?</p>

      <div id="stage" style="background-color:cc0;">
         STAGE
      </div>

      <input type="button" id="driver" value="Load Data" />

   </body>

</html>

這里 load() 啟動一個 Ajax 請求到指定的 URL /jquery/result.html 文件。加載這個文件后，所有的內(nèi)容將會被填充到 ID 為 stage 的 < div> 標簽內(nèi)。假設，我們的 /jquery/result.html 文件只有一個 HTML 行——

< h1>THIS IS RESULT...</h1>

當點擊給定的按鈕后，result.html 文件開始被加載。

獲取 JSON 數(shù)據(jù)

有可能會出現(xiàn)返回的 JSON 字符串與你的請求不符的情況。jQuery 使用 getJSON() 函數(shù)解析返回 JSON 字符串并使結(jié)果字符串作為第一個參數(shù)以進行后續(xù)的操作對回調(diào)函數(shù)是可用的。

語法

這是 getJSON() 方法的簡單語法 ——

[selector].getJSON( URL, [data], [callback] );

這是所有參數(shù)的描述 ——

  • URL —— 服務器端資源的 URL 通過 GET 方法取得聯(lián)系。

  • data —— 一個對象，它的屬性作為名稱/值對，用于構(gòu)造一個要被附加到 URL 上的字符串，或者預先格式化并編碼的查詢字符串。

  • callback —— 一個函數(shù)，當請求完成時會被調(diào)用。產(chǎn)生于響應體的數(shù)據(jù)值，作為一個 JSON 字符串，要被當作第一個參數(shù)傳遞給這個回調(diào)，第二個參數(shù)時狀態(tài)。

示例

考慮下面的帶有一小段 jQuery 編碼的 HTML 文件 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
            });
         });
      </script>

   </head>

   <body>

      <p>Click on the button to load result.json file ?</p>

      <div id="stage" style="background-color:#eee;">
         STAGE
      </div>

      <input type="button" id="driver" value="Load Data" />

   </body>

</html>

這里 JQuery 使用 getJSON() 方法來啟動一個 Ajax 請求道指定的 URL result.json 文件中。在加載這個文件后，所有的內(nèi)容會被傳遞到回調(diào)函數(shù)，最終會填充到 ID 為 stage 的 < div> 標簽內(nèi)部。假設，我們的 result.json 文件有下述 json 格式的內(nèi)容 ——

{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}

當你點擊給定的按鈕時，result.json 文件就開始加載 ——

傳遞數(shù)據(jù)到服務器

許多情況下，你從客戶端收集輸入并把這些輸入傳遞到服務器端以做進一步處理。JQuery AJAX 使用任何可用的 Ajax 方法的 data 參數(shù)，使得將收集的數(shù)據(jù)傳遞到服務器端變得容易。

示例

這個例子解釋了怎樣將客戶端的輸入傳遞到 web 服務器腳本，它會發(fā)送相同的結(jié)果，然后我們可以輸出它 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>

   </head>

   <body>

      <p>Enter your name and click on the button:</p>
      <input type="input" id="name" size="40" /><br />

      <div id="stage" style="background-color:cc0;">
         STAGE
      </div>

      <input type="button" id="driver" value="Show Result" />

   </body>

</html>

這是在 result.php 腳本上編寫的代碼 ——

<?php
if( $_REQUEST["name"] )
{
   $name = $_REQUEST['name'];
   echo "Welcome ". $name;
}
?>

現(xiàn)在你可以在給定的輸入框中鍵入任何文本，然后點擊"顯示結(jié)果"按鈕來看看你在輸入框中鍵入的內(nèi)容。

JQuery AJAX 方法

你已經(jīng)用 JQuery 了解了基本的 AJAX 概念。下表是所有的 JQuery AJAX 方法，你可以根據(jù)你的編程序要選擇你需要的方法 ——

序號 方法 & 描述
1 jQuery.ajax( options )

使用一個 HTTP 請求加載一個遠程頁面。
2 jQuery.ajaxSetup( options )

為 AJAX 請求設置全局設置。
3 jQuery.get( url, [data], [callback], [type] )

使用一個 HTTP GET 請求加載一個遠程頁面。
4 jQuery.getJSON( url, [data], [callback] )

使用一個 HTTP GET 請求加載 JSON 數(shù)據(jù)。
5 jQuery.getScript( url, [callback] )

使用一個 HTTP GET 請求加載并執(zhí)行一個 JavaScript 文件。
6 jQuery.post( url, [data], [callback], [type] )

使用一個 HTTP POST 請求加載一個遠程頁面。
7 load( url, [data], [callback] )

從遠程文件加載 HTML 并把它注入到 DOM 中。
8 serialize( )

將一組輸入元素序列化一個字符串數(shù)據(jù)中。
9 serializeArray( )

像 .serialize() 方法一樣，序列化所有的表單及表單元素，但是返回 JSON 數(shù)據(jù)結(jié)構(gòu)。

JQuery AJAX 事件

你可以在 AJAX 調(diào)用進程的生命周期中，調(diào)用不同的 JQuery 方法。下述方法是基于不同的事件/狀態(tài)的 ——

你可以瀏覽全部的 AJAX 事件。

序號 方法 & 描述
1 ajaxComplete( callback )

當一個 AJAX 請求完成后，附加一個要被執(zhí)行的函數(shù)。
2 ajaxStart( callback )

當一個 AJAX 開始并且沒有準備好的操作時，附加一個要被執(zhí)行的函數(shù)。
3 ajaxError( callback )

當一個 AJAX 請求失敗后，附加一個要被執(zhí)行的函數(shù)。
4 ajaxSend( callback )

在一個 AJAX 請求發(fā)送之前，附加一個要被執(zhí)行的函數(shù)。
5 ajaxStop( callback )

當全部的 AJAX 請求結(jié)束后，附加一個要被執(zhí)行的函數(shù)。
6 ajaxSuccess( callback )

當一個 AJAX 請求成功完成后，附加一個要被執(zhí)行的函數(shù)。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號