【AJAX】——實戰應用，完整Demo

前提

    之前小編整理過關於AJAX的一些理論內容，其實在這些理論之後也做一些實戰工作，可惜那時候的小編沒有整理出來，隨著項目結束，直到最近項目的使用，發現小編自己忘記怎麼做了。。。慚愧啊，歸根結底，理解不深，為了杜絕類似的情況，整理下，便於更加深入的理解，如有不對之處，懇請大家一定要不惜賜教啊。

應用過程
1、建立xmlHttpRequest對象 為什麼要建立。

    XMLHttpRequest用於在後台於伺服器交換資料。這意味著可以在不重新載入整個網頁的前提下，對網頁的部分內容重新整理。而且現代瀏覽器都支援XMLHttpRequest對象（IE5 和 IE6 使用 ActiveXObject）。

function createXmlHttp(){var xmlHttp;if(window.ActiveXObject)//針對IE瀏覽器          {              try{                    xmlHttp = new ActiveXObject("Microsoft.XMLHttp");//針對IE高版本                  }              catch(e){                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//針對IE低版本                   }             }else if(window.XMLHttpRequest){ //針對非IE瀏覽器                        xmlHttp = new XMLHttpRequest();          }  return xmlHttp;}

2、配置XMLHttpRequest對象，向伺服器發送請求

    在配置過程中可以設定提交方式，提交地址，以及同非同步提交

xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);

預設是是同步提交，非同步提交的話，設定為false；    GET 還是 POST。

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

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

I、無法使用快取檔案（補救伺服器上的檔案或資料庫）

II、向伺服器發送大量資料（POST 沒有資料量限制）

III、發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠 3、XMLHttpRequest伺服器響應 onreadystatechange事件

    當請求被發送到伺服器時，我們需要執行一些基於響應的任務。

    每當readyState改變時，就會觸發onreadystatechange事件。

xhr.onreadystatechange = function(){if(xhr.readyState == 4 ){if(xhr.status == 200 ){document.getElementById("span1").innerHTML = xhr.responseText;}}}

4、發送請求

xhr.send(null);

完整Demo

function checkUsername(){var username = document.getElementById("username").value;var xhr = createXmlHttp();//建立XMLHTTPRequest對象xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);xhr.onreadystatechange = function(){if(xhr.readyState == 4 ){if(xhr.status == 200 ){document.getElementById("span1").innerHTML = xhr.responseText;}}}xhr.onreadystatechange = function(){if(xhr.readyState == 4 ){if(xhr.status == 200 ){document.getElementById("span1").innerHTML = xhr.responseText;}}}xhr.send(null);}function createXmlHttp(){var xmlHttp;if(window.ActiveXObject)//針對IE瀏覽器          {              try{                    xmlHttp = new ActiveXObject("Microsoft.XMLHttp");//針對IE高版本                  }              catch(e){                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//針對IE低版本                   }             }else if(window.XMLHttpRequest){ //針對非IE瀏覽器                        xmlHttp = new XMLHttpRequest();          }  return xmlHttp;}

總結     千萬不要相信記憶力，一方面不熟悉，一方面真的會忘記。其實關於ajax的時候還會存在很多問題，例如亂碼，跨域等問題，還是在後續的實戰中不斷總結。下次在遇到非同步問題，我估計就不會害怕了，還是注重熟練，技能吧。