極客書

jQuery 阿賈克斯

AJAX是異步JavaScript和XML的縮寫，這種技術幫助我們從伺服器加載數據，而無需刷新瀏覽器頁面。

如果您是AJAX新手，我建議您先閱讀我們的AJAX教程。

JQuery是一個很好的工具，它爲開發下一代web應用程式提供了豐富的AJAX方法集。

Loading Simple Data

使用JQuery AJAX很容易加載任何靜態或動態數據。JQuery提供了load（）方法來完成這項工作−

Syntax

下面是load（）方法的簡單語法−

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

這是所有參數的描述;

  • URL−向其發送請求的伺服器端資源的URL。它可以是CGI、ASP、JSP或PHP腳本，可以動態地或從資料庫中生成數據。

  • data−此可選參數表示一個對象，該對象的屬性被序列化爲正確編碼的參數以傳遞給請求。如果指定，則使用POST方法發出請求。如果省略，則使用GET方法。

  • callback−在將響應數據加載到匹配集的元素中之後調用的回調函數。傳遞給此函數的第一個參數是從伺服器接收的響應文本，第二個參數是狀態代碼。

Example

考慮下面的HTML文件，其中包含一個小JQuery編碼−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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（）向指定的URL/jquery/result.html文件發起Ajax請求。加載此文件後，所有內容都將填充到用IDstage標記的<div>中。假設我們的/jquery/result.html文件只有一行html−

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

單擊給定按鈕時，將加載result.html文件。

Getting JSON Data

伺服器會根據您的請求返回JSON字符串。JQuery實用程序函數getJSON（）解析返回的JSON字符串，並使返回的字符串作爲第一個參數提供給回調函數，以便採取進一步的操作。

Syntax

下面是getJSON（）方法的簡單語法−

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

這是所有參數的描述;

  • URL−通過GET方法聯繫的伺服器端資源的URL。

  • data−一個對象，其屬性用作用於構造要附加到URL的查詢字符串的名稱/值對，或用作預格式化和編碼的查詢字符串。

  • 回調−請求完成時調用的函數。將響應體作爲JSON字符串消化後得到的數據值作爲第一個參數傳遞給此回調，狀態作爲第二個參數傳遞。

Example

考慮下面的HTML文件，其中包含一個小JQuery編碼−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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（）向指定的URLresult.json文件發起Ajax請求。加載此文件後，所有內容都將傳遞給回調函數，該函數最終將填充到標記爲IDstage的<div>中。假設result.json文件包含以下json格式的內容−

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

單擊給定按鈕時，將加載result.json文件。

Passing Data to the Server

多次從用戶收集輸入，然後將該輸入傳遞給伺服器以進行進一步處理。JQuery AJAX使得使用任何可用AJAX方法的data參數將收集到的數據傳遞到伺服器變得非常容易。

Example

這個例子演示了如何將用戶輸入傳遞給web伺服器腳本，該腳本將發送相同的結果並將其列印出來;

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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.phpscript−編寫的代碼;

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

現在，您可以在給定的輸入框中輸入任何文本，然後單擊「顯示結果」按鈕查看您在輸入框中輸入的內容。

JQuery AJAX Methods

您已經看到了使用JQuery的AJAX的基本概念。下表列出了所有重要的JQuery AJAX方法，您可以根據編程需要使用這些方法;

Sr.No. Methods & Description
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數據。
5 jQuery.getScript( url, [callback] )

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

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

從遠程文件加載HTML並將其注入DOM。
8 serialize( )

將一組輸入元素序列化爲數據字符串。
9 serializeArray( )

序列化所有表單和表單元素，如.serialize（）方法，但返回一個JSON數據結構供您使用。

JQuery AJAX Events

在AJAX調用過程的生命周期中，可以調用各種JQuery方法。根據不同的事件/階段，可以使用以下方法&負;

您可以查看所有ajax事件。

Sr.No. Methods & Description
1 ajaxComplete( callback )

在AJAX請求完成時附加要執行的函數。
2 ajaxStart( callback )

附加一個在AJAX請求開始時要執行的函數，並且沒有活動的函數。
3 ajaxError( callback )

在AJAX請求失敗時附加要執行的函數。
4 ajaxSend( callback )

在發送AJAX請求之前附加要執行的函數。
5 ajaxStop( callback )

在所有AJAX請求結束時附加要執行的函數。
6 ajaxSuccess( callback )

在AJAX請求成功完成時附加要執行的函數。