AJAX的true異步或fal...LOGIN

AJAX的true異步或false同步

ajax的true非同步或false同步:
在ajax簡單介紹一章節介紹過,AJAX指的是非同步javascript 和XML(Asynchronous JavaScript and XML) 。
這對web開發來說是一個非常大的進步,可以有效的提高網站的人性化程度,在此之前,如果有比較費時的請求操作,必然會引起程序掛起和停止的現象,那麼使用ajax的非同步操作就無需等待伺服器的回應,而是進行如下操作:
(1).在等待伺服器回應時執行其他腳本。
(2).當回應就緒後對回應進行處理。

一.關於open()方法:
下面再對open()方法做一下簡單介紹,語法結構如下:  

xmlhttp.open(method,url,async);

關於此方法更多內容可以參閱ajax的post或get伺服器請求一章節。
可以看到open()方法有三個參數,最後一個參數是一個布林值,就是用來規定是否採用非同步方式。
當async=true的時候,也就是規定採用非同步操作,也就是說ajax操作並不會阻塞程式碼的執行,等執行處理完畢透過onreadystatechange事件對回應進行處理,程式碼實例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</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>原来的内容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>

上面的程式碼就是進行的一個非同步操作,透過onreadystatechange事件來處理回應。
當async=false的時候,採用的是同步處理,那麼就沒有必使用onreadystatechange事件,把對應的操作程式碼放在send()方法之後即可,程式碼如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</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>原来的内容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>

上面的程式碼並沒有採用非同步操作,如果ajax操作比較耗時的話,可能會導致程式碼堵塞的現象,所以不建議使用。
許多初學者對兩者的差異可能還不夠明了,上面程式碼也沒有很好的示範這一點,下面就透過兩段程式碼示範一下它們的差別:
程式碼實例一: 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>php中文网</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 = "由于是异步操作,所以不会阻塞当前内容的显示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>

上面的程式碼是非同步操作,所以當ajax請求的程式碼在後台處理的時候,並不影響其他程式碼的執行,所以等待回應的時候,依然能夠在下面的div中寫入指定的內容,這就是ajax的一個重大有點。
程式碼實例二:  

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</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 = "由于是同步操作,所以会阻塞当前内容的显示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>

上面的程式碼在進行ajax後台操作的時候,並不能執行下面的程式碼,只能等待處理完畢,再去執行後面的程式碼。

上例中所有呼叫的檔案都可在本機建立變更使用。

下一節
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</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>原来的内容</h2></div> <button type="button" id="bt">查看效果</button> </body> </html>
章節課件