社群學習工具庫休閒

繁体中文

AJAX中文參考手冊

閱讀（32620）更新時間(2022-04-12)

在《AJAX中文參考手冊》中，AJAX 不是新的程式語言，而是使用現有標準的新方法。 AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。

AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。 Ajax的概念由傑西·詹姆士·賈瑞特所提出。

傳統的Web應用程式允許使用者端填寫表單（form），當提交表單時就向網頁伺服器發送一個請求。伺服器接收並處理傳來的表單，然後送回一個新的網頁，但這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分HTML碼往往是相同的。由於每次應用的溝通都需要向伺服器發送請求，應用程式的回應時間依賴伺服器的回應時間。這導致了用戶介面的回應比本機應用慢得多。

與此不同，AJAX應用程式可以僅向伺服器發送並取回必須的數據，並在客戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少，伺服器回應更快了。同時，很多的處理工作可以在發出請求的客戶端機器上完成，因此Web伺服器的負載也減少了。

提示：在您開始學習AJAX之前，您應該先對HTML、CSS、javascript知識有基本的了解。

類似於DHTML或LAMP，AJAX不是指單一的技術，而是有機地利用了一系列相關的技術。雖然其名稱包含XML，但實際上資料格式可以由JSON代替，進一步減少資料量，形成所謂的AJAJ。而客戶端與伺服器也不需要異步。

AJAX的初步使用

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tryrun 1</title>
</head>
<body>
    <div id="view">
        <p>点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内</p>
    </div>
    <button type="button" id="btn">发起 Ajax 请求</button>

    <script>
        document.getElementById("btn").onclick = ajaxRequest;

        function ajaxRequest () {
            var xhr = new XMLHttpRequest();

            xhr.open("GET", "https://www.php.cn/statics/demosource/ajax_info.txt", true);
            xhr.send();

            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById("view").innerHTML = xhr.responseText;
                }                
            }
        }
    </script>
</body>

點擊"運行實例"按鈕查看線上實例

提示：我們的AJAX教學將幫助您逐步學習如何掌握並應用AJAX，如果你有任何疑問，請前往PHP中文網AJAX社群提出你的問題，會有熱心網友為你解答。

AJAX優缺點

使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護資料。這使得網路應用程式更為迅捷地回應使用者動作，並避免了在網路上發送那些沒有改變的訊息。
Ajax不需要任何瀏覽器插件，但需要使用者允許JavaScript在瀏覽器上執行。就像DHTML應用程式一樣，Ajax應用程式必須在眾多不同的瀏覽器和平台上經過嚴格的測試。隨著Ajax的成熟，一些簡化Ajax使用方法的程式庫也相繼問世。同樣，也出現了另一種輔助程式設計的技術，為那些不支援JavaScript的使用者提供替代功能。
對應用Ajax最主要的批評就是，它可能會破壞瀏覽器的後退與加入收藏書籤功能。在動態更新頁面的情況下，使用者無法回到前一個頁面狀態，這是因為瀏覽器只能記下歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的可能差別非常微妙；用戶通常都希望單擊後退按鈕，就能夠取消他們的前一次操作，但是在Ajax應用程式中，卻無法這樣做。不過開發者已經想出了種種辦法來解決這個問題，HTML5 先前的方法大多是在使用者點擊後退按鈕存取歷史記錄時，透過建立或使用隱藏的IFRAME來重現頁面上的變更。（例如，當用戶在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜索，然後將搜索結果反映到Ajax元素上，以便將應用程式狀態恢復到當時的狀態）。
關於無法將狀態加入收藏或書籤的問題，HTML5之前的一種方式是使用URL片段標識符（通常被稱為錨點，即URL中#後面的部分）來保持追踪，允許用戶回到指定的某個應用程式狀態。（許多瀏覽器允許JavaScript動態更新錨點，這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點。）HTML5 以後可以直接操作瀏覽歷史，並以字串形式儲存網頁狀態，將網頁加入網頁收藏夾或書籤時狀態會隱形地保留。上述兩種方法也可以同時解決無法後退的問題。
進行Ajax開發時，網路延遲－也就是使用者發出請求到伺服器發出回應之間的間隔－需要慎重考慮。如果不給予用戶明確的回應，沒有恰當的預讀數據，或者對XMLHttpRequest的不恰當處理，都會使用戶感到厭煩。通常的解決方案是，使用一個可視化的元件來告訴使用者係統正在進行後台操作並且正在讀取資料和內容。

應用程式

運用XHTML CSS來表達訊息；
運用JavaScript操作DOM（Document Object Model）來運行動態效果；
運用XML和XSLT操作資料；
運用XMLHttpRequest或新的Fetch API與網頁伺服器進行非同步資料交換;

注意：AJAX與Flash、Silverlight和Java Applet等RIA技術是有區分的。

本AJAX教學手冊涵蓋的內容

本AJAX教學手冊涵蓋所有AJAX基礎使用方法，包含AJAX入門、AJAX簡介、AJAX實例、XHR建立物件、XHR請求、 XHR響應、XHR readyState、AJAX ASP/PHP、AJAX資料庫、AJAX XML等知識。

提示：本教學的每一章都包含了許多AJAX實例，您可以直接點擊 "執行實例" 按鈕線上查看結果。這些例子將幫助您更好地理解和使用AJAX。

最新章節

AJAX 实例 2016-10-19

AJAX XML 2016-10-19

AJAX 数据库 2016-10-19

AJAX ASP/PHP 2016-10-19

XHR readystate 2016-10-19

XHR 响应 2016-10-19

XHR 请求 2016-10-19

XHR 创建对象 2016-10-19

相關課程

Web前端開發極速入門 2021-12-10

最懂你的大前端課：HTML5/CSS3/ES6/NPM/Vue/...【原文】 2022-09-30

Gulp入門影片教學 2022-04-18

兄弟連高洛峰CSS3影片教程 2022-04-20

AngularJS開發Web應用程式基礎實例影片教學 2022-04-18

Ajax全接觸 2022-04-13

MUI框架基礎影片教學 2022-04-13

線上訓練班試聽課 2019-01-10

提交