AJAX的true異步或者false同步
ajax的true異步或者false同步:
在ajax簡(jiǎn)單介紹一章節(jié)介紹過(guò)，AJAX指的是異步 javascript 和 XML（Asynchronous JavaScript and XML）。
這對(duì)于web開(kāi)發(fā)來(lái)說(shuō)是一個(gè)非常大的進(jìn)步，可以有效的提高網(wǎng)站的人性化程度，在此之前，如果有比較費(fèi)時(shí)的請(qǐng)求操作，必然會(huì)引起程序掛起和停止的現(xiàn)象，那么使用ajax的異步操作就無(wú)需等待服務(wù)器的響應(yīng)，而是進(jìn)行如下操作:
（1）.在等待服務(wù)器響應(yīng)時(shí)執(zhí)行其他腳本。
（2）.當(dāng)響應(yīng)就緒后對(duì)響應(yīng)進(jìn)行處理。
一.關(guān)于open()方法:
下面再對(duì)open()方法做一下簡(jiǎn)單介紹，語(yǔ)法結(jié)構(gòu)如下: ?
xmlhttp.open(method,url,async);
關(guān)于此方法更多內(nèi)容可以參閱ajax的post或者get服務(wù)器請(qǐng)求一章節(jié)。
可以看到open()方法具有三個(gè)參數(shù)，最后一個(gè)參數(shù)是一個(gè)布爾值，就是用來(lái)規(guī)定是否采用異步方式。
當(dāng)async=true的時(shí)候，也就是規(guī)定采用異步操作，也就是說(shuō)ajax操作并不會(huì)阻塞代碼的執(zhí)行，等執(zhí)行處理完畢通過(guò)onreadystatechange事件對(duì)響應(yīng)進(jìn)行處理，代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("show").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/asset/demo.ajax.php?dm=txt&act=getfruits",true);
xmlhttp.send();
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
loadXMLDoc();
}
}
</script>
</head>
<body>
<div id="show"><h2>原來(lái)的內(nèi)容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>上面的代碼就是進(jìn)行的一個(gè)異步操作，通過(guò)onreadystatechange事件來(lái)對(duì)響應(yīng)進(jìn)行處理。
當(dāng)async=false的時(shí)候，采用的是同步處理，那么就沒(méi)有必使用onreadystatechange事件，把相應(yīng)的操作代碼放在send()方法之后即可，代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "/asset/demo.ajax.php?dm=txt&act=getfruits", false);
xmlhttp.send();
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div id="show"><h2>原來(lái)的內(nèi)容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>上面的代碼并沒(méi)有采用異步操作，如果ajax操作比較耗時(shí)的話(huà)，可能會(huì)導(dǎo)致代碼堵塞的現(xiàn)象，所以不推薦使用。
很多初學(xué)者對(duì)兩者的差別可能還不夠明了，并且上面代碼也沒(méi)有很好的演示這一點(diǎn)，下面就通過(guò)兩段代碼演示一下它們的差別:
代碼實(shí)例一:?
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "demo/ajax/net/Async.aspx", true);
xmlhttp.send();
}
window.onload = function () {
loadXMLDoc();
var odiv = document.getElementById("content");
odiv.innerHTML = "由于是異步操作，所以不會(huì)阻塞當(dāng)前內(nèi)容的顯示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>上面的代碼是異步操作，所以當(dāng)ajax請(qǐng)求的代碼在后臺(tái)處理的時(shí)候，并不影響其他代碼的執(zhí)行，所以等待響應(yīng)的時(shí)候，依然能夠在下面的div中寫(xiě)入指定的內(nèi)容，這就是ajax的一個(gè)重大有點(diǎn)。
代碼實(shí)例二: ?
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "demo/ajax/net/Async.aspx", false);
xmlhttp.send();
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
window.onload = function () {
loadXMLDoc();
var odiv = document.getElementById("content");
odiv.innerHTML = "由于是同步操作，所以會(huì)阻塞當(dāng)前內(nèi)容的顯示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>上面的代碼在進(jìn)行ajax后臺(tái)操作的時(shí)候，并不能執(zhí)行下面的代碼，只能等待處理完畢，再去執(zhí)行后面的代碼。
上例中所有調(diào)用的文件都可在本地創(chuàng)建更改使用。
