隨著互聯(lián)網(wǎng)的飛速發(fā)展，對(duì)于Web開發(fā)人員來說，JavaScript無疑是不可或缺的技術(shù)之一。在這里，我們將重點(diǎn)介紹一種JavaScript異步提交的技術(shù)應(yīng)用，通過舉例子，讓你更加深入的理解它的作用和表現(xiàn)。

首先，我們先來研究一下什么是異步提交，在傳統(tǒng)的“同步”提交中，表單提交的時(shí)候會(huì)出現(xiàn)等待的情況，即便是簡(jiǎn)單的提交操作也要等待頁面全部加載完成才會(huì)操作完成。而在JavaScript的異步提交中，會(huì)先在后臺(tái)處理一些數(shù)據(jù)，然后就可以立即完成表單的提交過程，而不需要等待頁面全部加載完成。

function sendData(){
var xmlHttp;
if (window.XMLHttpRequest){ // Mozilla, Safari,...
xmlHttp=new XMLHttpRequest();
}
else { // IE
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
catch (e){
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
xmlHttp.open("POST","server/data.php",true);
xmlHttp.send(null);
}

下面就用一個(gè)簡(jiǎn)單的例子說明一下異步提交的過程，假設(shè)我們需要向服務(wù)器發(fā)送一個(gè)POST請(qǐng)求，請(qǐng)求的數(shù)據(jù)為“Hello World”。那么，在使用異步提交的時(shí)候，我們需要一個(gè)XMLHttpRequest對(duì)象，通過這個(gè)對(duì)象可以發(fā)送POST請(qǐng)求，這個(gè)對(duì)象提供了open()和send()方法，傳入的參數(shù)就是我們需要的請(qǐng)求方法和URL。在發(fā)送數(shù)據(jù)的時(shí)候，我們需要保證send()的參數(shù)為null值，這個(gè)參數(shù)只有在GET請(qǐng)求的時(shí)候才需要。

在數(shù)據(jù)成功提交后，我們需要頁面實(shí)現(xiàn)一個(gè)回調(diào)函數(shù)來接收和處理輸入的數(shù)據(jù)。回調(diào)函數(shù)就是在發(fā)送請(qǐng)求后，由服務(wù)器來執(zhí)行何時(shí)何地調(diào)用，用來接收數(shù)據(jù)并執(zhí)行特定的操作。這個(gè)過程是和主程序分離的，因而不會(huì)影響頁面的加載和顯示。

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

上述代碼中，當(dāng)xmlhttp.readyState=4且xmlhttp.status=200的時(shí)候，就可以執(zhí)行回調(diào)函數(shù)來返回?cái)?shù)據(jù)了。在這里，元素myDiv通過innerHTML方法，用XMLHttpRequest返回的數(shù)據(jù)設(shè)置元素的內(nèi)容，從而實(shí)現(xiàn)了異步提交的過程。

總體來說，異步提交已經(jīng)成為現(xiàn)代Web開發(fā)中的標(biāo)配，尤其是在Ajax技術(shù)的普及和應(yīng)用中。使用異步提交可以極大的縮短頁面等待時(shí)間，從而更加快速的加載和顯示頁面內(nèi)容，提高了用戶的體驗(yàn)。除此之外，異步提交還可以和其他的JavaScript技術(shù)配合使用，比如說JSON、XML等等。