ajax的true非同步或者false同步

admin發表於2017-02-10
非同步False

ajax簡單介紹介紹過，AJAX指的是非同步 javascript 和 XML（Asynchronous JavaScript and XML）。

這對web開發是一個非常大的進步，可以有效的提高網站的人性化程度，在此之前，如果有比較費時的請求操作，必然會引起程式掛起和停止的現象，使用ajax的非同步操作就無需等待伺服器的響應，而是進行如下操作:

（1）.在等待伺服器響應時執行其他指令碼。

（2）.當響應就緒後對響應進行處理。

一.關於open()方法:

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

[JavaScript] 純文字檢視 複製程式碼
xmlhttp.open(method,url,async);

關於此方法更多內容可以參閱ajax post或者get伺服器請求一章節。

可以看到open()方法具有三個引數，最後一個引數是一個布林值，就是用來規定是否採用非同步方式。

當async=true的時候，也就是規定採用非同步操作，也就是說ajax操作並不會阻塞程式碼的執行，等執行處理完畢通過onreadystatechange事件對響應進行處理，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</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/txt/demo.txt",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()方法之後即可，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }  
  xmlhttp.open("GET", "demo/ajax/txt/demo.txt", 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操作比較耗時的話，可能會導致程式碼堵塞的現象，所以不推薦使用。

很多初學者對兩者的差別可能還不夠明瞭，並且上面程式碼也沒有很好的演示這一點，下面就通過兩段程式碼演示一下它們的差別:

程式碼例項一:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</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="demo/ajax/net/img/wait.gif"></div> 
<div id="content"></div>
</body> 
</html>

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

程式碼例項二:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</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="demo/ajax/net/img/wait.gif"></div> 
<div id="content"></div>
</body> 
</html>

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

相關文章