初步認識Ajax
Ajax是現在做前端的來說是一項不得不掌握的技術，其實更準確的來說是一種方法，在剛學完html和js的同學來說已經能夠很好的完成一個頁面的設計，以及頁面與頁面，頁面與後臺之間的互動，在資訊傳遞的過程中我們有很多種實現的方法：表單的實現，頁面的跳轉以及重定向，servlet等等，然而在我們實際生活中碰到的有著很多資訊的互動，難道我們每一次互動就要將整個頁面都載入一遍？所需要的資料每次都要從雲端或者資料庫中重新載入？別吧，資料不多的時候還能這樣，一多的話，光是載入都能讓你等半天，要是同時訪問的人數一旦增加，那你怕不是得去買一個容量更大的伺服器了。
所以！！Ajax技術就現在而言是前端工程師一項所必備的技能了，為的就是能在頁面互動資訊的同時儘可能少的對頁面的其他部分作出改動，從而達到能夠更快速的執行該頁面。當然啦，這個繁雜的解釋是我這個鳥兒自己說的白話文，來一段W3C的簡單解釋吧。
AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
沒錯！！就是這樣，就一個簡單的例子而言，微博，每個人多多少少肯定都有玩的吧，我們會點選裡面一些我們感興趣的內容從而進行瀏覽，但頁面大致的框架是不會改變的，也就是說是有一個區域是專門來顯示所有的內容，而我們點選進去之後也是在那一塊區域顯示我們點選的內容，其餘的位置與內容一概不變。
什麼是 AJAX ？
AJAX = 非同步 JavaScript 和 XML。
AJAX 是一種用於建立快速動態網頁的技術。
通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需過載整個網頁面。
在不同版本的瀏覽器下建立XMLhttpRqueest是不一樣的，下面的這一串程式碼是從以前比較古老版本的瀏覽器建立到現在的規格等瀏覽器建立的不同方法，雖然現在一般都是在谷歌的環境下執行的，不過為了學習我們還是整理一下
1 //這裡是判斷在不同瀏覽器版本的情況下建立httpRequest應該用什麼樣的建立方法 3 try { 4 //微軟第二代瀏覽器出建立 xmlHttpRequest例項物件的方式 5 httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); 6 } catch (e) { 7 try { 8 //2 微軟第一代瀏覽器出建立 xmlHttpRequest例項物件的方式 9 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 10 } catch (e) { 11 try { 12 // 3 谷歌 火狐 或者 蘋果瀏覽器 建立 xmlHttpRequest例項物件的方式 13 httpRequest = new XMLHttpRequest(); 14 if (httpRequest.overrideMimeType) { 15 httpRequest.overrideMimeType("text/xml"); 16 } 17 } catch (e) { 18 } 19 } 20 }
一般在這一套下來是可以建立成功的，但排除有其他錯誤，所以為了方便檢驗以及安全起見我們還是彈出一個視窗以檢驗是否建立成功，XMLhttpRequest在建立失敗下的狀態是Null
1 //返回的如果HttpRequest為空就證明以上建立的方法都無效 2 if (httpRequest == null) { 3 alert("瀏覽器不支援ajax特效"); 4 return; 5 }
XMLhttpReuest與伺服器交換資料有兩種方式，一種是Get一種是Post，來，接下來看一下權威
Get:
Post:
其實在html中我們也有用到表單提交的方式，也是這兩種方法，那麼這兩者到底有什麼區別呢
與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
- 無法使用快取檔案（更新伺服器上的檔案或資料庫）
- 向伺服器傳送大量資料（POST 沒有資料量限制）
- 傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠
總的的來說，還是得視情況而定，如果我們傳遞的資料僅僅只是登入或者顯示固定內容的一些小資料傳輸，那我們就得使用Get會方便一點，但如果我們使用的情況是在視訊或直播中的彈幕，這種隨時有著大量資料傳輸以及存在未知字元的可能性時，我們就要用Post方法會相對來說保險一點了。
但要注意的是，Get請求與Post請求在實現上有一點略微的不同
Get請求可以在請求傳送資訊時，可在URL中新增資訊：
1 xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true); 2 xmlhttp.send();
如果需要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來新增 HTTP 頭。然後在 send() 方法中規定您希望傳送的資料：
1 xmlhttp.open("POST","ajax_test.asp",true); 2 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 3 xmlhttp.send("fname=Bill&lname=Gates");
非同步 - True 或 False？
AJAX 指的是非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 物件如果要用於 AJAX 的話，其 open() 方法的 async 引數必須設定為 true：
xmlhttp.open("GET","ajax_test.asp",true);
對於 web 開發人員來說，傳送非同步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程式掛起或停止。
通過 AJAX，JavaScript 無需等待伺服器的響應，而是：
- 在等待伺服器響應時執行其他指令碼
- 當響應就緒後對響應進行處理
當然了，我們在做的時候或者在瀏覽的時候，讀到的資料很多都是來自於伺服器的資料，那麼我們為了能夠獲得來自伺服器的響應，就得使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。
如果我們獲取來自伺服器的響應並非XML，請使用responseText 屬性，該屬性返回的是字串形式的響應
1 if(httpRequest.responseText==1){ 2 //已存在 3 document.getElementById("mylab").innerHTML="<font color='red'>×使用者已存在 ,不可註冊</font>"; 4 }else if(httpRequest.responseText==0){ 5 //不存在 6 document.getElementById("mylab").innerHTML="<font color='green'>√使用者不存在 ,可以註冊</font>"; 7 }
判斷從伺服器返回的資料以此來決定決定在<label>中顯示的是什麼內容
但如果來自伺服器的響應是XML，就需要對XML物件進行解析，那麼就得使用responseXML
請求 books.xml 檔案，並解析響應：
1 xmlDoc=xmlhttp.responseXML; 2 txt=""; 3 x=xmlDoc.getElementsByTagName("ARTIST"); 4 for (i=0;i<x.length;i++) 5 { 6 txt=txt + x[i].childNodes[0].nodeValue + "<br />"; 7 } 8 document.getElementById("myDiv").innerHTML=txt;
onreadystatechange 事件
當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態資訊。
下面是 XMLHttpRequest 物件的三個重要的屬性：
回撥函式
回撥函式是一種以引數形式傳遞給另一個函式的函式。
如果您的網站上存在多個 AJAX 任務，那麼您應該為建立 XMLHttpRequest 物件編寫一個標準的函式，併為每個 AJAX 任務呼叫該函式。
該函式呼叫應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次呼叫可能不盡相同）：