1.什么是異步？在傳統的網站項目中，填寫一堆數據，最后點擊提交，在點擊提交的這一刻才實現數據提交，前后台交互。在你點擊提交之前數據是沒有提交到后台的。這樣就會造成很大的不便。比如，我填了一大堆數據，結果告訴我填錯了，怎么辦？如果我一填錯就提示我填錯了，那該有多好啊，此時，異步提交就出現了，不用寫好所有數據一次全部提交，而是可以部分提交數據。
2.ajax實現異步提交的核心代碼就是一行，就是獲取瀏覽器內嵌的XMLHttpRequest對象，用該對象發送請求xmlHttp.open("GET",url,true)，設置第三個參數為true，即腳本會在send（提交）方法之后繼續執行，而不用等待來自服務器的響應（異步）
3.具體實現請看實例實現類似於百度輸入框的效果，隨着輸入內容的改變，動態改變頁面提示信息，關鍵部位已有注釋：
頁面內容：
<body> <div id="myDiv"> <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="clearData()" onfocus="getMoreContents()"> <input type="button" value="百度一下" width="50"> <!--緊貼在輸入框下面，動態顯示提示內容--> <div id="popDiv"> <table id="content_table" bgcolor="#FFFAFA" border="0" cellpadding="0"> <tbody id="content_table_body"> </tbody> </table> </div> </div> </body>
首先，在輸入框中的內容發生變化的時候觸發onkeyup事件（鍵盤敲擊之后），進入getMoreContents()函數，進行后台交互，將相關聯的信息查出來顯示到輸入框的下方。代碼如下
var xmlHttp; function getMoreContents() { var contents = document.getElementById("keyword"); if (contents.value == "") { clearData(); return; } //該對象是實現異步提交的核心 xmlHttp = createXmlHttp(); //向服務器發送數據,escape函數是編碼函數，將內容編碼為ascll傳輸，以防中文亂碼 var url = "search?keyword=" + escape(contents.value); //true表示腳本會在send方法之后繼續執行，而不用等待來自服務器的響應（異步） xmlHttp.open("GET", url, true) //xmlHttp綁定回調函數，在對象狀態發生改變時調用。有0-4五個狀態，一般只關心4（提交完成） //不能帶參數，不能帶括號 xmlHttp.onreadystatechange = callBack; xmlHttp.send(); }
其中有一個函數是createXmlHttp,這是用來獲取實現異步提交的對象，不同的瀏覽器有不同的獲取方法，代碼如下：
//獲得xmlHttp對象 function createXmlHttp() { var xmlHttp; //一般的瀏覽器都支持這種方式來獲取該對象 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //考慮瀏覽器的兼容性,ie就是他媽的事多 if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //雖然該瀏覽器支持ActiveXObject，但是不支持Microsoft.XMLHTTP if (!xmlHttp) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; }
在獲取后台返回的數據之后要將數據顯示到頁面上，這就要求提交對象綁定一個回調函數（提交成功之后執行），代碼如下：
xmlHttp.onreadystatechange = callBack; function callBack() { if (xmlHttp.readyState == 4) { //200表示響應成功，404表示未找到，500表示服務器內部錯誤 if (xmlHttp.status == 200) { //交互成功，獲得響應數據 var result = xmlHttp.responseText; //java返回的json數據和js的json數據有細微的區別：最外層少了小括號 var json = eval("(" + result + ")"); //獲得數據之后就可以動態展示數據了 setContents(json); } } }
其中xmlHttp.readyState==4表示請求后台成功，至此，已經完成了關於異步提交的所有事情，后面的優化需要同學們自己完成。有需要的可以在評論區留下郵箱，有完整代碼奉上。