jQuery類庫新手使用指南之AJAX方法 - 第一部分

時間 2019-11-06

標籤 jquery 新手使用指南 ajax 方法第一部分欄目 JQuery 简体版

原文原文鏈接

日期：2012/03/07 來源：GBin1.comjavascript

最近幾年不少網站，事實上基本全部的網站都使用一個技術 - AJAX來提供流暢而且高效的用戶體驗。不管是出名的Google Maps仍是Gmail，或者是流行的javascript框架-jQuery Mobile，都使用AJAX來獲取後臺數據，而且實時更新用戶瀏覽頁面。html

使用javascript代碼來構建一個AJAX應用可能須要技巧。可是，不少的javascript類庫，包括jQuery都已經內建支持AJAX，這樣使得開發一個AJAX驅動的網站或者應用變得很是簡單。java

在這個教程中，咱們將學習使用jQuery來執行基本的AJAX請求操做。你將會學習：jquery

AJAX是什麼？工做原理是什麼？爲何AJAX是一個好東西？
如何使用jQuery來調用各類AJAX請求
使用AJAX請求來發送數據
處理服務器端的AJAX請求，獲取返回的數據
如何自定義jQuery的AJAX處理及其參數設置
AJAX的高級使用

注意：本文主要介紹javascript端的使用，如何你須要瞭解後臺，請參考你所使用的語言。web

AJAX是什麼？工做原理是什麼？爲何AJAX是一個好東西？

簡單說，AJAX是一個幫助你的瀏覽器和服務器異步通信的javascript技巧。是A synchronous J avaScript A nd X ML的縮寫，和傳統的web編程比較來講，他們有以下區別：ajax

傳統方式的web頁面處理包含了連接和表單，當用戶點擊或者發送，將會對服務器進行一次請求調用。而後服務器會經過返回整個頁面來響應，而後瀏覽器負責顯示頁面內容，替換開始的頁面。這個過程可能很是的耗時間，每每會讓用戶的使用體驗大打折扣，由於用戶可能得花不少時間來等待頁面加載
使用AJAX方式，javascript代碼會向服務器請求一個URL，同時也能夠發送數據。javascript代碼而後處理服務器的響應，而後對應作處理。例如，可能計算返回的數據，添加或者更新頁面上的組件，或者通知用戶服務器端數據的變化等

由於AJAX的請求每每在後臺發生，用戶在閱讀網頁的時候，javascript代碼能夠繼續在後臺工做。這個過程對於用戶來講是不可見的。而且不會打擾用戶目前瀏覽的頁面內容。這一點使得web應用更接近於桌面應用的行爲。編程

AJAX的基礎是javascript中的XMLHttpRequest對象，這個對象提供了各類方法，例如，open()，send()和onreadystatechange()方法來建立AJAX的請求和響應。json

書寫跨瀏覽器的AJAX的js代碼可能很是費時。很幸運的是，jQuery提供了使用簡單的AJAX方法幫助你跳過底層的處理。api

咱們首先來看看最重要的方法：$.get(). 瀏覽器

使用$.get()方法來建立GET請求

jQuery的$.get()方法提供了你簡單的方式來處理HTTP GET方法，一般用來獲取web頁面或者圖片。對應的是POST方法。使用$.get()方法很是簡單，以下：

$.get( url );

url是服務器端的一個地址，能夠是服務器端腳本或者是一個靜態頁面，以下：

$.get( "http://gbin1.com/index.html" );

或者一個動態的document

$.get( "http://gbin1.com/index.jsp" );

固然，同時也支持參數，以下：

$.get( "http://gbin1.com/index.jsp?category=jquery" );

一個簡單的方法來處理是使用參數對象來發送http參數，以下：

var gbdata={category:"jquery", subcategory:"ajax"};
 $.get( "http://gbin1.com/index.jsp", data );

固然如下形式也沒有問題：

var gbdata="category=jquery&subcategory=ajax";
  $.get( "http://gbin1.com/index.jsp", data );

服務器端取得數據

這裏咱們使用的$.get()方法都是發送請求到服務器，可是有的時候，咱們須要獲得服務器返回的內容，例如，一些數據。這裏咱們如何處理呢？答案就是書寫一個回調(Callback)方法，一個AJAX請求的返回數據會做爲這個回調方法的參數，以下：

function myCallback( returnedData ) {
   // 這裏咱們能夠處理returnedData，例如，封裝數據生成HTML展示給用戶
 }

一旦你建立了你的回調函數，你就能夠將它傳遞給$.get()方法，以下：

var gbdata={category:"jquery", subcategory:"ajax"};
 $.get( "http://gbin1.com/index.jsp", gbdata, myCallback );

指定返回的數據類型

服務器端的數據返回類型能夠是不一樣的格式，包括，XML，JSON和javascript，或者HTML。缺省狀況下，jQuery會盡力本身判斷返回的數據格式，而且正確解析，固然最好的你們本身指定數據格式。

參數能夠爲如下：

XML
JSON
script
HTML

例如，若是你知道你的服務器端返回JSON格式，你能夠調用$.get()，以下：

$.get( "http://gbin1.com/index.jsp", gbdata, myCallback, "json" );

這裏是一個完整的例子，展現瞭如何使用$.get()方法來調用一個AJAX請求而且返回響應內容。首先建立一個文本文件以下：

{
   "site": "GBin1.com",
   "date": "2011/06/06",
   "tag": "jQuery",
   "pages": 800
 }

以上文件模擬了一個JSON響應的結果。下面咱們保存另一個html文件，以下：

<!doctype html>
<html lang="en">
<head>
<title>Site Info Demo for jQuery $.get()</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
	#container{
		padding: 100px;
		font-size: 12px;
		font-family: arial;
	}
	#result{
		padding: 10px 0;
	}
	#result li{
		padding: 10px 0;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$( function() {
    $('#showinfo').click( function() {
      var data = { site: "GBin1.com", date: "20120318" };
      $.get( "siteinfo.txt", data, success, "json" );
    } );

    function success( siteData ) {
      var result = "<li>Site Name:" + siteData.site + "</li>";
            result += "<li>Creation Date:" + siteData.date + "</li>";
            result += "<li>Site tag: "  + siteData.tag + "</li>";
            result += "<li>Site pages: "  + siteData.pages + "</li>";
      $("#result").html(result);
    }
 } );
</script>
</head>
<body> 
<div id="container">
 <button id="showinfo">show info</button>
 <ul id="result"></ul>
</body>
</div>
</html>

在線演示

代碼說明：

首先咱們這裏包含了一個show info的按鈕，點擊這個按鈕觸發click事件
代碼最上面咱們加載jQuery的最新類庫，而後當頁面加載完畢後，即DOM is ready後等待運行，這裏咱們沒有使用 "$(document).ready(function(){" ，而是直接使用 "$( function() {"，這兩種方式在jQuery是等同的。固然，使用前一種代碼更容易閱讀，後面一種方式比較簡潔。
咱們使用click方法來綁定一個點擊方法到show info按鈕。若是你點擊這個按鈕，將會觸發一個AJAX請求到siteinfo.txt，而且咱們向這個url傳遞了倆個參數，固然，對於這個例子來講傳遞url參數沒有意義，若是你指向一個後臺url，它須要處理你的參數，再返回結果。而後，這裏有個success()的回調函數，它在AJAX請求完畢後運行，最後咱們指定使用的數據格式是JSON
success()方法將調用由jQuery處返回的JSON對象，而且組裝最後的顯示內容。
咱們將顯示內容顯示到$("#result")中，這是一個div層
若是你使用firefox，而且安裝了firebug，你可使用網絡功能來查看後臺的ajax調用，以下：

能夠看到以上AJAX請求及其響應處理代碼很是簡單，你們是否是以爲使用jQuery的AJAX方法學習成本很低，但願你們能喜歡！

來源：jQuery類庫新手使用指南之AJAX方法 - 第一部分