前言： 這兩天在做一個人日記網站，基於前端+Servlet+JSP+JavaBean+tomcat+mysql實現，由於之前的實踐很少碰到前端內容，這次自己搞也是邊學邊弄，到了js這塊，必不可少的就是Ajax技術，博主花了一些時間去學習了一下，並做點總結。


什麼是Ajax：
簡單地說，如果你訪問一個沒有用到Ajax技術的網頁，通常你點一下按鈕就要重新整理一下頁面，儘管新頁面上只有一行字和當前頁面不一樣，但你還是要無聊地等待頁面重新整理。用了AJAX之後，你點選，然後頁面上的一行字就變化了，頁面本身不用重新整理。
Ajax的應用：
百度搜索提示，淘寶新會員註冊時使用者名稱驗證，級聯下拉列表，顯示進度條......


補充一下下面的內容（摘錄自知乎）：
ajax的全稱是AsynchronousJavascript+XML。
非同步傳輸+js+xml。
所謂非同步，在這裡簡單地解釋就是：向伺服器傳送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果我們可以再來處理這個事。（當然，在其他語境下這個解釋可能就不對了）
這個很重要，如果不是這樣的話，我們點完按鈕，頁面就會死在那裡，其他的資料請求不會往下走了。這樣比等待重新整理似乎更加討厭。
（雖然提供非同步通訊功能的元件預設情況下都是非同步的，但它們也提供了同步選項，如果你好奇把那個選項改為false的話，你的頁面就會死在那裡）
xml只是一種資料格式，在這件事裡並不重要，我們在更新一行字的時候理論上說不需要這個格式，但如果我們更新很多內容，那麼格式化的資料可以使我們有條理地去實現更新。




其實在博主的腦袋裡，Ajax就是一個超級有用的XMLHttpRequest物件啦，ajax就可以讓js讀取伺服器上的資料。
那麼首先你要創建出這個物件了咯，一般來說，Ajax的使用就像打電話一樣分為四步：
1.你得有個手機。
2.撥號。
3.你開始說話balabala。。。
4.聽別人說。。。。


那麼Ajax：
1.建立Ajax物件。
2.連線到伺服器。
3.傳送請求。
 4.接受返回值。


1.建立Ajax物件。
if (window.XMLHttpRequest) { // Mozilla……等非IE瀏覽器
var oAjax = new XMLHttpRequest(); // 建立XMLHttpRequest物件
} else if (window.ActiveXObject) { // IE瀏覽器
try {
var oAjax = new ActiveXObject("Msxml2.XMLHTTP"); // 建立XMLHttpRequest物件
} catch (e) {
try {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); // 建立XMLHttpRequest物件
} catch (e) {
}
}
}
    每個瀏覽器對Ajax的支援是不同的，建立的方式也不同，以上判斷程式碼就展示了在IE瀏覽器和非IE瀏覽器環境下用各自不同的方式建立XMLHttpRequest物件。
這裡要注意一下js的一個特性，在使用判斷時必須使用window.XMLHttpRequest而不能使用XMLHttpRquest,在js中用沒有定義的變數會報錯，使用沒有定義的屬性不會報錯，而是僅僅給你一個undefined提示，在IE6瀏覽器下，XMLHttpRequest是沒有定義的，考慮到相容性問題，必須使用window.XMLHttpRequest來充當判斷條件，這時瀏覽器就把它當window的一個屬性，返回undefined而非報錯，這就是我們需要的。


2.連線到伺服器。
oAjax.open();
open()有三個引數，第一個引數為傳送方式，值為POST，GET
第二個引數為你要訪問的檔案的url。
第三個為 值為true 或者 false ，true代表採用非同步傳輸方式連線伺服器。


3.傳送請求
oAjax.send();


4 .接受返回值。
funtion getResult(){
if(oAjax.readyState==4){
      if(oAjax.status==200){
                            alert(oAjax.reponseText);
                            }else{alert("訪問失敗");}
}


}
readyState的值所代表的狀態：
0：請求未初始化（還沒有呼叫 open()）。
1：請求已經建立，但是還沒有傳送（還沒有呼叫 send()）。
2：請求已傳送，正在處理中（通常現在可以從響應中獲取內容頭）。
3：請求在處理中；通常響應中已有部分資料可用了，但是伺服器還沒有完成響應的生成。
4：響應已完成；您可以獲取並使用伺服器的響應了。
       status的值所代表的狀態（最常見的5種）：
       1.200表示成功
       2.202表示請求被接受，但尚未成功
       3.400錯誤的請求
       4.404檔案未找到
       5.500內部伺服器錯誤










四部曲完成了，為了提高的程式碼重用性，可以將程式碼封裝到一個.js檔案中，程式碼：
var net = new Object(); // 定義一個全域性變數net
// 編寫建構函式
net.AjaxRequest = function(url, onload, onerror, method, params) {
this.req = null;
this.onload = onload;
this.onerror = (onerror) ? onerror : this.defaultError;
this.loadDate(url, method, params);
}
// 編寫用於初始化XMLHttpRequest物件並指定處理函式，最後傳送HTTP請求的方法
net.AjaxRequest.prototype.loadDate = function(url, method, params) {
if (!method) { // 設定預設為的請求方式為GET
method = "GET";
}
if (window.XMLHttpRequest) { // Mozilla……等非IE瀏覽器
this.req = new XMLHttpRequest(); // 建立XMLHttpRequest物件
} else if (window.ActiveXObject) { // IE瀏覽器
try {
this.req = new ActiveXObject("Msxml2.XMLHTTP"); // 建立XMLHttpRequest物件
} catch (e) {
try {
this.req = new ActiveXObject("Microsoft.XMLHTTP"); // 建立XMLHttpRequest物件
} catch (e) {
}
}
}
if (this.req) {
try {
var loader = this;
// 指定回撥函式
this.req.onreadystatechange = function() {
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method, url, true); // 建立與伺服器的連線
if (method == "POST") { // 當傳送POST請求時，設定請求頭
this.req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
}
this.req.send(params); // 向伺服器傳送請求
} catch (err) {
this.onerror.call(this); // 呼叫錯誤處理函式
}
}
}


// 重構回撥函式
net.AjaxRequest.onReadyState = function() {
var req = this.req;
var ready = req.readyState; // 獲取請求狀態
if (ready == 4) {
if (req.status == 200) {
this.onload.call(this); // 呼叫回撥函式
} else {
this.onerror.call(this); // 呼叫錯誤處理函式
}
}
}
// 重構預設的錯誤處理函式
net.AjaxRequest.prototype.defaultError = function() {
alert("錯誤資料\n\n回撥狀態:" + this.req.readyState + "\n狀態: " + this.req.status);
}