原理及概念

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是一種用於建立快速動態網頁的技術。

動態網頁：是指可以通過伺服器語言結合資料庫隨時修改資料的網頁。

靜態網頁，隨著html程式碼的生成，頁面的內容和顯示效果就基本上不會發生變化了——除非你修改頁面程式碼。

AJAX = 非同步 JavaScript和XML（標準通用標記語言的子集）。

AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。

Ajax的優勢

AJAX 在瀏覽器與 Web 伺服器之間使用非同步資料傳輸（HTTP 請求），這樣就可使網頁從伺服器請求少量的資訊，而不是整個頁面。

AJAX 可使因特網應用程式更小、更快，更友好。

AJAX 是一種獨立於 Web 伺服器軟體的瀏覽器技術。

AJAX 基於下列 Web 標準：

JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 標準已被良好定義，並被所有的主流瀏覽器支援。AJAX 應用程式獨立於瀏覽器和平臺。

Web 應用程式較桌面應用程式有諸多優勢；它們能夠涉及廣大的使用者，它們更易安裝及維護，也更易開發。

不過，因特網應用程式並不像傳統的桌面應用程式那樣完善且友好。

通過 AJAX，因特網應用程式可以變得更完善，更友好。

Ajax的非同步

非同步：是相對於同步而言的，我們學過的定時器也是非同步的一種，也就是其他程式不需要等待定時器的程式碼全部執行完畢以後才能執行程式碼。因為定時器有可能是無限迴圈執行程式碼的，如果等待定時器執行完畢那麼其他的程式碼將永遠無法執行。所以非同步程式設計就是相對於其他程式碼是獨立完成的。也就是上面所說的ajax是獨立於瀏覽器平臺的。

Tip:事件也是非同步執行的，事件是發生某件事情後才會執行程式碼的。同步：我們之前所寫的程式碼除了定時器和事件大部分都是同步執行的。也就是同一個程式碼塊中都是從上到下執行的。

Ajax的工作原理

Ajax 核心物件XMLHttpRequest

var _hr=new window.XMLHttpRequest;

通過該例項化的物件向伺服器

發出請求，等待伺服器響應

伺服器響應完成後客戶端再處理

伺服器端響應的資料。

Ajax請求伺服器的過程中有5個狀態

0：表示請求伺服器之前

1：表示開啟遠端伺服器連結對應open方法

2：表示向伺服器傳送資料對應send方法

3：表示伺服器響應過程中並未結束

4：表示伺服器響應完成

/**
* 建立XMLHttpRequest物件
* @param _method 請求方式: post||get
* @param _url 遠端伺服器地址
* @param _async 是否非同步
* @param _parameter 向伺服器傳送資料
 * @param _callBack 回撥函式
*/

function parameterDeal(_parameter){
	var _sender="";
	if(_parameter instanceof Object){
		for(var k in _parameter){
			_sender+=k+"="+_parameter[k]+"&";
		}
		return _sender.replace(/\&$/g,"");
	}
	else{
	return _parameter;
	}
}
function createXMLHttpRequest{
	try{
		return new window.XMLHttpRequest;
	}
	catch(e){
		try{ return new ActiveXObject("MSXML2.XMLHTTP.6.0"); }catch(e){
			try{ return new ActiveXObject("MSXML2.XMLHTTP.3.0"); }catch(e){
				try{ return new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){
					try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){
						throw new Error("該瀏覽器版本太低,已經被大部分市場淘汰,請升級!!!");
						return;
					}
				}
			}
		}
	}
}
function ajaxRequest(_method,_url,_async,_parameter,_callBack){
	var _ajax=createXMLHttpRequest;
	if(_ajax){
		_ajax.onreadystatechange=function{
			if(_ajax.readyState==4 && _ajax.status==200){
				_callBack(_ajax.responseText);
			}
		}
		_ajax.open(_method,_url,_async);
		_ajax.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
		_ajax.send(parameterDeal(_parameter));
	}
}

這是封裝好了的原生Ajax，在使用的過程中，只需要新建一個js檔案，將這段程式碼放進去，什麼都不要改，在HTML頁面引入之後，呼叫 ajaxRequest函式，傳入你想要的引數，就可以正常使用了。

此方法純屬個人封裝，有更精簡方法的朋友歡迎與我分享！！！！