Ajax學習(1)—Ajax 入門簡介

來源:互聯網
上載者:User

Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的縮寫.

下面是 Ajax 應用程式所用到的基本技術:
• HTML 用於建立 Web 表單並確定應用程式其他部分使用的欄位。
• JavaScript 代碼是運行 Ajax 應用程式的核心代碼,協助改進與伺服器應用程式的通訊。
• DHTML 或 Dynamic HTML,用於動態更新表單。我們將使用 div、span 和其他動態超文字標記語言 元素來標記 HTML。
• 文件物件模型 DOM 用於(通過 JavaScript 代碼)處理 HTML 結構和(某些情況下)伺服器返回的 XML。

從上面可以看出,Ajax不是什麼新的技術,而是幾個老的技術通過新的方法結合起來,從而實現了新的效果!很多事物都是多元化的,可以說Ajax是一個新技術,也可以說Ajax是一個新的思路,一個新的架構!

Ajax的基本工作原理及流程:

在一般的 Web 應用程式中,使用者填寫表單欄位並單擊 Submit 按鈕。然後整個表單發送到伺服器,伺服器將它轉寄給處理表單的指令碼(通常是 PHP 或 Java,也可能是 CGI 進程或者類似的東西),指令碼執行完成後再發送回全新的頁面。該頁面可能是帶有已經填充某些資料的新表單的 HTML,也可能是確認頁面,或者是具有根據原來表單中輸入資料選擇的某些選項的頁面。當然,在伺服器上的指令碼或程式處理和返回新表單時使用者必須等待。螢幕變成一片空白,等到伺服器返回資料後再重新繪製。這就是互動性差的原因,使用者得不到立即反饋,因此感覺不同於傳統型應用程式。

Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 對象放在 Web 表單和伺服器之間。當使用者填寫表單時,資料發送給一些 JavaScript 代碼而不是 直接發送給伺服器。相反,JavaScript 代碼捕獲表單資料並向伺服器發送請求。同時使用者螢幕上的表單也不會閃爍、消失或延遲。換句話說,JavaScript 代碼在幕後發送請求,使用者甚至不知道請求的發出。更好的是,請求是非同步發送的,就是說 JavaScript 代碼(和使用者)不用等待伺服器的響應。因此使用者可以繼續輸入資料、滾動螢幕和使用應用程式。

然後,伺服器將資料返回 JavaScript 代碼(仍然在 Web 表單中),後者決定如何處理這些資料。它可以迅速更新表單資料,讓人感覺應用程式是立即完成的,表單沒有提交或重新整理而使用者得到了新資料。JavaScript 代碼甚至可以對收到的資料執行某種計算,再發送另一個請求,完全不需要使用者幹預!這就是 XMLHttpRequest 的強大之處。它可以根據需要自行與伺服器進行互動,使用者甚至可以完全不知道幕後發生的一切。結果就是類似於傳統型應用程式的動態、快速響應、高互動性的體驗,但是背後又擁有互連網的全部強大力量。

XMLHttpRequest 對象

open():建立到伺服器的新請求。

send():向伺服器發送請求.

abort():退出當前請求。

readyState:提供當前 HTML 的就緒狀態。

responseText:伺服器返回的請求響應文本。

由於前兩年的瀏覽器大戰,使得各種瀏覽器獲得 XMLHttpRequest 對象採用的方法有所不同。

支援多種瀏覽器的方式建立 XMLHttpRequest 對象

 

Code
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
    xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}

這段代碼的核心分為三步:
1. 建立一個變數 xmlHttp 來引用即將建立的 XMLHttpRequest 對象。
2. 嘗試在 Microsoft 瀏覽器中建立該對象:
    嘗試使用 Msxml2.XMLHTTP 對象建立它。 
    如果失敗,再嘗試 Microsoft.XMLHTTP 對象。
3. 如果仍然沒有建立 xmlHttp,則以非 Microsoft 的方式建立該對象。
最後,xmlHttp 應該引用一個有效 XMLHttpRequest 對象,無論運行什麼樣的瀏覽器。

Ajax中的請求/響應

發出請求:Ajax 應用程式中基本相同的流程:
1. 從 Web 表單中擷取需要的資料。
2. 建立要串連的 URL。
3. 開啟到伺服器的串連。
4. 設定伺服器在完成後要啟動並執行函數。
5. 發送請求。

Code
function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
var url = "/scripts/getZipCode.aspx?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;
// Send the request
xmlHttp.send(null);
}

處理響應:

readyState可能返回的值:

0:請求未初始化(還沒有調用 open())。

1:請求已經建立,但是還沒有發送(還沒有調用 send())。

2:請求已發送,正在處理中(通常現在可以從響應中擷取內容標題)。

3:請求在處理中;通常響應中已有部分資料可用了,但是伺服器還沒有完成響應的產生。

4:響應已完成;您可以擷取並使用伺服器的響應了。

必須知道兩點:

1.什麼也不要做,直到 xmlHttp.readyState 屬性的值等於 4。

2.伺服器將把響應填充到 xmlHttp.responseText 屬性中。

響應函數:

Code
function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

 

 

開始的代碼使用基本 JavaScript 代碼擷取幾個表單欄位的值。然後設定一個 asp 指令碼作為連結的目標。要注意指令碼 URL 的指定方式,city 和 state(來自表單)使用簡單的 GET 參數附加在 URL 之後。

然後開啟一個串連,這是您第一次看到使用 XMLHttpRequest。其中指定了串連方法(GET)和要串連的 URL。最後一個參數如果設為 true,那麼將請求一個非同步串連(這就是 Ajax 的由來)。如果使用 false,那麼代碼發出請求後將等待伺服器返回的響應。如果設為 true,當伺服器在幕後處理請求的時候使用者仍然可以使用表單(甚至調用其他 JavaScript 方法)。

xmlHttp(要記住,這是 XMLHttpRequest 對象執行個體)的 onreadystatechange 屬性可以告訴伺服器在運行完成 後(可能要用五分鐘或者五個小時)做什麼。因為代碼沒有等待伺服器,必須讓伺服器知道怎麼做以便您能作出響應。在這個樣本中,如果伺服器處理完了請求,一個特殊的名為 updatePage() 的方法將被觸發。

最後,使用值 null 調用 send()。因為已經在請求 URL 中添加了要發送給伺服器的資料(city 和 state),所以請求中不需要發送任何資料。這樣就發出了請求,伺服器按照您的要求工作。

簡單總結的Ajax的工作流程:

javascript獲得要向伺服器段傳遞的參數或變數,然後利用建立的XMLHttpRequest 對象發送個伺服器段,如果伺服器端接受資料並返回資料,則儲存在responseText 屬性中,最後通過javascript修改DOM,從而實現在用戶端無重新整理的修改資料。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.