关于AJAX中函数的执行顺序

考察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

相关阅读:
AngularJs跨域请求Java的实现---博客园老牛大讲堂
 JavaWeb的json包装以及跨域问题--博客园老牛大讲堂
 无网络联机打单机游戏---博客园老牛大讲堂
 H5移动开发AUI框架入门---博客园老牛大讲堂
 MySql链表语句--博客园老牛大讲堂
 Jquery的基本用法--博客园老牛大讲堂
 Java的日期字符串的转换---博客园老牛大讲堂
 实现访问电脑百度，访问到自己的工程方法---博客园老牛大讲堂
 Jquery的闭包理解--匿名函数--博客园老牛大讲堂
 xampp的安装和配置与HBuilder的配置--博客园老牛大讲堂
原文地址：https://www.cnblogs.com/jiayouwyhit/p/3970241.html