AJAX的true異步或false同步
ajax的true非同步或false同步:
在ajax簡單介紹一章節(jié)介紹過，AJAX指的是非同步j(luò)avascript 和XML（Asynchronous JavaScript and XML） 。
這對web開發(fā)來說是一個非常大的進(jìn)步，可以有效的提高網(wǎng)站的人性化程度，在此之前，如果有比較費(fèi)時的請求操作，必然會引起程序掛起和停止的現(xiàn)象，那麼使用ajax的非同步操作就無需等待伺服器的回應(yīng)，而是進(jìn)行如下操作:
（1）.在等待伺服器回應(yīng)時執(zhí)行其他腳本。
（2）.當(dāng)回應(yīng)就緒後對回應(yīng)進(jìn)行處理。
一.關(guān)於open()方法:
下面再對open()方法做一下簡單介紹，語法結(jié)構(gòu)如下: ?
xmlhttp.open(method,url,async);
關(guān)於此方法更多內(nèi)容可以參閱ajax的post或get伺服器請求一章節(jié)。
可以看到open()方法有三個參數(shù)，最後一個參數(shù)是一個布林值，就是用來規(guī)定是否採用非同步方式。
當(dāng)async=true的時候，也就是規(guī)定採用非同步操作，也就是說ajax操作並不會阻塞程式碼的執(zhí)行，等執(zhí)行處理完畢透過onreadystatechange事件對回應(yīng)進(jìn)行處理，程式碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.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>原來的內(nèi)容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html> 上面的程式碼就是進(jìn)行的一個非同步操作，透過onreadystatechange事件來處理回應(yīng)。
當(dāng)async=false的時候，採用的是同步處理，那麼就沒有必使用onreadystatechange事件，把對應(yīng)的操作程式碼放在send()方法之後即可，程式碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.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>原來的內(nèi)容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>上面的程式碼並沒有採用非同步操作，如果ajax操作比較耗時的話，可能會導(dǎo)致程式碼堵塞的現(xiàn)象，所以不建議使用。
許多初學(xué)者對兩者的差異可能還不夠明了，上面程式碼也沒有很好的示範(fàn)這一點(diǎn)，下面就透過兩段程式碼示範(fàn)一下它們的差別:
程式碼實(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 = "由于是異步操作，所以不會阻塞當(dāng)前內(nèi)容的顯示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>上面的程式碼是非同步操作，所以當(dāng)ajax請求的程式碼在後臺處理的時候，並不影響其他程式碼的執(zhí)行，所以等待回應(yīng)的時候，依然能夠在下面的div中寫入指定的內(nèi)容，這就是ajax的一個重大有點(diǎn)。
程式碼實(shí)例二: ?
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.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 = "由于是同步操作，所以會阻塞當(dāng)前內(nèi)容的顯示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>上面的程式碼在進(jìn)行ajax後臺操作的時候，並不能執(zhí)行下面的程式碼，只能等待處理完畢，再去執(zhí)行後面的程式碼。
上例中所有呼叫的檔案都可在本機(jī)建立變更使用。
