關於AJAX中函數的執行順序

最後更新：2014-09-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style blog http color io os java ar strong

考察w3school上的一個實際的例子[1]:

<html><head><script type="text/javascript">function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","/ajax/test1.txt",true);xmlhttp.send();}</script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="loadXMLDoc()">通過 AJAX 改變內容</button></body></html>

　　關注下標紅部分的代碼的順序，如果把代碼改成如下的順序：

<html><head><script type="text/javascript">function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.open("GET","/ajax/test1.txt",true);xmlhttp.send();xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }}</script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="loadXMLDoc()">通過 AJAX 改變內容</button></body></html>

<html><head><script type="text/javascript">function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.open("GET","/ajax/test1.txt",true);xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.send();}</script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="loadXMLDoc()">通過 AJAX 改變內容</button></body></html>

　　實測證明：三種代碼順序的執行結果是一樣的。這是由於以下的xhlhttp.onreadystatechange=function

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }

僅僅是一個函數的聲明（或者說註冊）【在JS裡面，是允許函數嵌套聲明的】，僅僅是把xhlhttp的onreadystatechange “屬性”（實際是個函數）聲明出來，並不立即執行。而

xmlhttp.open("GET","/ajax/test1.txt",true);xmlhttp.send();
是會立即執行的。如果想要xhlhttp.onreadystatechange=function立即執行，只需要將該模組聲明為 “立即執行”。

( xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }) ();

Reference

[1]http://www.w3school.com.cn/tiy/t.asp?f=ajax_async_true

關於AJAX中函數的執行順序

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More