AJAX的true異步或者false同步
ajax的true異步或者false同步:
在ajax簡單介紹一章節(jié)介紹過，AJAX指的是異步 javascript 和 XML（Asynchronous JavaScript and XML）。
這對于web開發(fā)來說是一個非常大的進步，可以有效的提高網(wǎng)站的人性化程度，在此之前，如果有比較費時的請求操作，必然會引起程序掛起和停止的現(xiàn)象，那么使用ajax的異步操作就無需等待服務(wù)器的響應(yīng)，而是進行如下操作:
（1）.在等待服務(wù)器響應(yīng)時執(zhí)行其他腳本。
（2）.當(dāng)響應(yīng)就緒后對響應(yīng)進行處理。
一.關(guān)于open()方法:
下面再對open()方法做一下簡單介紹，語法結(jié)構(gòu)如下: ?
xmlhttp.open(method,url,async);
關(guān)于此方法更多內(nèi)容可以參閱ajax的post或者get服務(wù)器請求一章節(jié)。
可以看到open()方法具有三個參數(shù)，最后一個參數(shù)是一個布爾值，就是用來規(guī)定是否采用異步方式。
當(dāng)async=true的時候，也就是規(guī)定采用異步操作，也就是說ajax操作并不會阻塞代碼的執(zhí)行，等執(zhí)行處理完畢通過onreadystatechange事件對響應(yīng)進行處理，代碼實例如下:
<!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>上面的代碼就是進行的一個異步操作，通過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é)者對兩者的差別可能還不夠明了，并且上面代碼也沒有很好的演示這一點，下面就通過兩段代碼演示一下它們的差別:
代碼實例一:?
<!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的一個重大有點。
代碼實例二: ?
<!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>上面的代碼在進行ajax后臺操作的時候，并不能執(zhí)行下面的代碼，只能等待處理完畢，再去執(zhí)行后面的代碼。
上例中所有調(diào)用的文件都可在本地創(chuàng)建更改使用。
