Ajax 是什麼? 如何建立一個 Ajax？
在上世紀90年代，幾乎所有的網站都由HTML頁面實現，伺服器處理每一個使用者請求都需要重新載入網頁。使用者體驗極差！由於每次應用的溝通都需要向伺服器傳送請求，應用的迴應時間依賴於伺服器的迴應時間。這導致了使用者介面的迴應比本機應用慢得多。
在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。
Google Suggest 使用 AJAX 創造出動態性極強的 web 介面：當您在谷歌的搜尋框輸入關鍵字時，JavaScript 會把這些字元傳送到伺服器，然後伺服器會返回一個搜尋建議的列表。
Ajax簡介
Ajax 並不算是一種新的技術，全稱是 asynchronous javascript and xml，可以說是已有技術的組合，主要用來實現客戶端與伺服器端的非同步通訊效果，實現頁面的區域性重新整理，早期的瀏覽器並不能原生支援 ajax，可以使用隱藏幀（iframe）方式變相實現非同步效果，後 來的瀏覽器提供了對 ajax 的原生支援 使 用 ajax 原 生 方 式 發 送 請 求 主 要 通 過 XMLHttpRequest( 標 準 瀏 覽 器 ) 、 ActiveXObject(IE 瀏覽器)物件實現非同步通訊效果
ajax是基於現有的Internet標準，並且聯合使用它們：
- XMLHttpRequest 物件 (非同步的與伺服器交換資料)
- JavaScript/DOM (資訊顯示/互動)
- CSS (給資料定義樣式)
- XML (作為轉換資料的格式)
Ajax優缺點
【1】優點
- 頁面區域性重新整理，使用者體驗好。
- 非同步通訊，更加快的響應能力。
- 減少冗餘請求，減輕了伺服器負擔；按需獲取資料，節約頻寬資源。
- 基於標準化的並被廣泛支援的技術，不需要下載外掛或者小程式
【2】缺點
ajax幹掉了back按鈕和加入收藏書籤功能，即對瀏覽器後退機制的破壞。- 存在一定的安全問題，AJAX 暴露了與伺服器互動的細節。
- 對搜尋引擎的支援比較弱。
- 破壞了程式的異常機制。
- 無法用
URL直接訪問
建立Ajax的步驟
Ajax的原理簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料ajax過程：
- 建立 XMLHttpRequest 物件,也就是建立一個非同步呼叫物件
- 建立一個新的 HTTP 請求,並指定該 HTTP 請求的方法、URL 及驗證資訊
- 設定響應 HTTP 請求狀態變化的函式
- 傳送 HTTP 請求
- 獲取非同步呼叫返回的資料
- 使用 JavaScript和 DOM 實現區域性重新整理
【1】建立XMLHttpRequest
XMLHttpRequest 是 AJAX 的基礎。XMLHttpRequest 用於在後臺與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。所有現代瀏覽器均支援 XMLHttpRequest 物件（IE5 和 IE6 使用 ActiveXObject）。
var xhr;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
xhr = new XMLHttpRequest();
} else {
// IE6, IE5 瀏覽器執行程式碼
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}【2】向伺服器傳送請求
如需將請求傳送到伺服器，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法
| 方法 | 描述 |
| open(method,url,async) | 規定請求的型別、URL 以及是否非同步處理請求。 1、method：請求的型別；GET 或 POST 2、url：檔案在伺服器上的位置 3、async：true（非同步）或 false（同步） |
| send(string) | 將請求傳送到伺服器。 1、string：僅用於 POST 請求 |
// 一個簡單的get請求
xhr.open("GET","ajax_info.txt",true);
xhr.send();
// 一個簡單的post請求
xhr.open("POST","/try/ajax/demo_post.php",true);
xhr.send();【3】處理伺服器響應
當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態資訊。
| 方法 | 描述 |
| onreadystatechange | 儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。 |
| readyState | 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
|
| status | 200: "OK" 404: 未找到頁面 |
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText); // responseText獲取字串形式的響應資料 responseXML獲取XML形式的響應資料
}
}Ajax例項
【1】原生Ajax請求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myDiv">
<h2>使用 AJAX 修改該文字內容</h2>
</div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>
<script>
function loadXMLDoc() {
var xhr;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
xhr = new XMLHttpRequest();
}
else {
// IE6, IE5 瀏覽器執行程式碼
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("myDiv").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "/try/ajax/ajax_info.txt", true);
xhr.send();
}
</script>
</body>
</html>【2】jQuery封裝Ajax請求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div id="myDiv">
<h2>使用 jQuery AJAX 修改文字內容</h2>
</div>
<button>修改內容</button>
<script>
$(document).ready(function () {
$("button").click(function () {
htmlobj = $.ajax({
type: "GET",
url: "/jquery/test1.txt",
data: {},
dataType: "json",
async: false,
success: function (data) {
$("#myDiv").html(data);
}
});
});
});
</script>
</body>
</html>