學習前不妨看一下隱藏幀技術，Ajax原理其實就是採用隱藏幀技術隱藏幀技術入門

AJAX

1. AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
2. AJAX 不是新的程式語言，而是一種使用現有標準的新方法。
3. AJAX 最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。
4. AJAX 不需要任何瀏覽器外掛，但需要使用者允許JavaScript在瀏覽器上執行。

AJAX應用

• 運用XHTML+CSS來表達資訊；

• 運用JavaScript操作DOM（Document Object Model）來執行動態效果；

• 運用XML和XSLT操作資料;

• 運用XMLHttpRequest或新的Fetch API與網頁伺服器進行非同步資料交換；

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

AJAX核心

XMLHttpRequest 物件

• 所有現代瀏覽器均支援 XMLHttpRequest 物件（IE5 和 IE6 使用 ActiveXObject）。
• XMLHttpRequest 用於在後臺與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

建立 XMLHttpRequest 物件

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 物件；老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 物件。

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 物件。如果支援，則建立 XMLHttpRequest 物件。如果不支援，則建立 ActiveXObject。

var xhr;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
    xhr=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行程式碼
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
 

AJAX - 向伺服器傳送請求請求

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

• 無法使用快取檔案（更新伺服器上的檔案或資料庫）
• 向伺服器傳送大量資料（POST 沒有資料量限制）
• 傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

自定義一個Ajax函式物件，帶有get()和post()方法

//定義一個Ajax 函式
function Ajax() {
	//定義一個get方法
	this.get=function(url,success,failure) {
		//獲取 XMLHttpRequest物件
		var xhr = null;
		//相容常見瀏覽器
		if( XMLHttpRequest ){ //高版本IE、火狐、谷歌 等
			xhr = new XMLHttpRequest();
		}else{ //低版本IE 等
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}
		//設定請求方式
		xhr.open("GET",url,true);
		
		//設定回撥函式
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4){ //接收完成
				if( xhr.status == 200 ){ //成功響應
					success(xhr.responseText); //回撥成功方法
				}else{
					failure(xhr.status) //回撥失敗方法
				}
				
			}
		}
		//開始請求
		xhr.send(); //GET不需要請求體，引數在url中
	}
	
	//定義個post方法
	this.post=function(url,data,success,failure){
		//獲取 XMLHttpRequest物件
		var xhr = null;
		//相容常見瀏覽器
		if( XMLHttpRequest ){ //高版本IE、火狐、谷歌 等
			xhr = new XMLHttpRequest();
		}else{ //低版本IE 等
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}
		//設定請求方式
		xhr.open("POST",url,true);
		//設定回撥函式
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4){ //接收完成
				if( xhr.status == 200 ){ //成功響應
					success(xhr.responseText); //回撥成功方法
				}else{
					failure(xhr.status) //回撥失敗方法
				}
				
			}
		}
		//設定請求頭---post 必須設定請求頭
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//傳送請求
		xhr.send(data); //post 需要請求體
	}
	
}