如果网站中存在多个 AJAX 任务，那么就可以使用回调函数，回调函数是一种以参数形式传递给另一个函数的函数，应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>AJAX 实例</title> <script> var oAjax; function ajax(url, fnSucc){ oAjax = new XMLHttpRequest(); oAjax.onreadystatechange = fnSucc; oAjax.open("GET", url, true); oAjax.send(); } function myFunction(){ ajax('ajax/demo.txt?t=' + Math.random(), function (){ if(oAjax.readyState == && oAjax.status == ){ alert(oAjax.responseText); } }); } </script> </head> <body> <button type="button">读取</button> </body> </html>
8、AJAX 原理
AJAX 的原理就跟现实生活中给朋友打电话是一样一样的，首先，你得有个手机，不然拿什么打，也就是要有一个设备，当然现在那都是人手一部，这第一步就可以忽略了，然后就是拨号，所谓的拨号，就是把彼此的手机连接起来，建立一条通道，然后才能通信，如果接通了，就可以进行第三步了，那就是说，我们给别人打电话，肯定是要先说，然后再听对方说，那么最后就是听对方说，不可能是自己说完啪挂了，至少得听对方说点啥，也就是有个响应。
打电话需要4个步骤完成，其实我们在编写 AJAX 时，也是需要4个步骤，首先，就得创建 AJAX 对象，有了这个对象之后，才能进行下面的操作，那么接下来要做的就是连接到服务器，就相当于打电话拨号，连接到服务器之后，你就得主动告诉服务器你需要什么文件，不可能是服务器丢给你几个文件，你自己选，要不是了再给你换一批，不可能这样，再说那服务器都是给成千上万人提供服务，不可能去跟你在那玩你猜我猜猜不猜，所以我们就得明确的告诉服务器我们要哪个文件，那么第三步就是发送请求，最后一步就是接收返回值，获得服务器的响应，也就是把我们需要的那个文件给我们传回来。
我们平时都说 AJAX，其实这只是一个对外的称呼，真正在浏览器内部是通过 XMLHttpRequest 对象来完成 AJAX 请求的，这才是 AJAX 真正的对象。
下面我们看一下，根据这4个步骤，AJAX 代码的具体编写过程：
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>AJAX 原理</title> <script> window.onload = function (){ var oBtn = document.getElementById('btn'); oBtn.onclick = function (){ // 、设备 = 创建 AJAX 对象 var oAjax = new XMLHttpRequest(); // 创建好对象之后，就可以弹出来看一下。返回：[object XMLHttpRequest] // IE 和 IE 返回：[object] //alert(oAjax); // 在刚创建 AJAX 对象，还没调用 open() 方法，也就是请求未初始化时，弹出 readyState 状态。 //alert(oAjax.readyState); // 返回： // 、拨号 = 连接服务器 oAjax.open('GET', 'ajax/demo.txt?t=' + new Date().getTime(), true); // 、说 = 发送请求 oAjax.send(); // 、听 = 接收返回 oAjax.onreadystatechange = function (){ // oAjax.readyState 浏览器和服务器进行到哪一步了 if(oAjax.readyState == ) // 请求已完成 if(oAjax.status == ){ // 成功 // 如果成功了，则弹出服务器响应的文本 alert('成功 ' + oAjax.responseText); } else{ // 如果失败了，则弹出请求结果。 alert('失败 ' + oAjax.status); } }; }; }; </script> </head> <body> <button type="button">读取</button> </body> </html>
上面的代码，在进行最后一步时，判断浏览器和服务器进行到哪一步了，当 readyState 属性状态为4时，就是请求完成了，但是请求完成并不代表请求成功，如果读取出错了或者文件不存在等情况导致出错了，那么也算是请求完成了，也就是不管读取成功还是失败，都算是请求完成了，所以需要进一步使用 status 属性判断，若为200，就是成功了。使用自定义的个人站点打开上面的 demo，点击按钮后，弹出成功和文本中的内容，我们可以试着改变一下 URL，就是把他故意写错，再次点击按钮，则会弹出失败和404，也就是未找到页面。
如果每次我们按照这4个步骤编写 AJAX 程序，是非常方便的，也容易理解，但是使用起来比较麻烦，所以我们可以把他封装为一个函数，在使用时调用就好使多了。