function ajax(url, fnSucc, fnFaild){ var oAjax = new XMLHttpRequest(); oAjax.open('GET', url, true); oAjax.send(); oAjax.onreadystatechange = function(){ if(oAjax.readyState == ){ if(oAjax.status == ){ fnSucc(oAjax.responseText); } else{ if(fnFaild){ fnFaild(oAjax.status); } } } }; }
上面封装的 ajax 函数有三个参数，第一个参数 url，是文件路径，第二个参数 fnSucc，当每次成功的时候调用函数，第三个参数 fnFaild，当失败时调用的函数。这里并不是任何情况下都需要失败时执行一个函数，所以需要做一个判断，只有当 fnFaild 这个参数传入进来，也就是定义了失败时执行的函数，那么这时候才去调用他。
可以在 www 根目录中新建一个文件夹命名为 js，然后把上边的代码复制另存为 ajax.js，下面是封装好之后的应用：
<script src="https://www.jb51.net/js/ajax.js"></script> <script> window.onload = function (){ var oBtn = document.getElementById('btn'); oBtn.onclick = function (){ ajax('ajax/demo.txt?t=' + new Date().getTime(), function (str){ alert('成功 ' + str); }, function (){ alert('失败'); }); }; }; </script>
我们要从服务器读取 demo.txt 这个文件，目的是为了获取这个文件中的内容，那么如何获取返回的结果呢？当成功的读取信息后，要调用 fnSucc 这个参数，也就是成功后执行的回调函数，他其实是有一个参数的 str，这个参数可以自定义，str 的作用就是把服务器返回给我们的内容传入进来，这个 str 参数就是 fnSucc(oAjax.responseText) 中传过来的。
当失败的时候，调用 fnFaild 这个参数，也就是失败后执行的回调函数。那么这个失败时调用函数也是有一个参数的，fnFaild(oAjax.status)，为了方便调试，我们也可以给他传入一个参数进来，用来提示请求失败的结果。在真正的网站中，当 AJAX 请求失败时，也不可能弹一个 alert，这样不太友好，所以可以自定义一些更加友好的方式来提示用户。这里建议大家平时在调试 AJAX 程序时，一定要加上失败时执行的回调函数，否则如果失败的话，那么可能没有任何反应。
9、AJAX 应用
请求一个静态的 TXT 文件，在了解了 AJAX 的原理后，很容易的就可以做到，但是在真正的网站中，这样不会有太大的实际用途，前边我们说 AJAX 是一种与服务器交换数据并更新部分网页的艺术，那么既然称之为艺术，因此我们需要使用 AJAX 去请求一些更实用、更复杂的东西，这样才能完美的体现他存在的价值。比如说我们可以去请求动态数据，例如去请求一个装着数据的 JSON 文件。
(1)、读取数组
首先，新建一个 TXT 文件命名为 arr.txt，随意存一个数组，比如[1,2,3,4,5,6]，放在之前的 ajax 文件夹下，然后就可以开始编写程序了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>AJAX 读取数组</title> <script src="https://www.jb51.net/js/ajax.js"></script> <script> window.onload = function (){ var oBtn = document.getElementById('btn'); oBtn.onclick = function (){ ajax('ajax/arr.txt?t=' + new Date().getTime(), function (str){ // str 是服务器返回的内容，弹出来看一下 //alert(str); 返回：[,,,,,] // 那么再弹出内容的长度 //alert(str.length); // 返回： // 返回对象的类型：string //alert(typeof str); // eval() 函数用于把字符串转换为 JS 代码执行 //alert(eval(str)); // 返回：,,,,, // 现在可以返回内容的长度 //alert(eval(str).length); // 返回： // 可以把这个函数保存为变量，查看每项的值 var arr = eval(str); alert(arr[]); // 返回： }, function (){ alert('失败'); }); }; }; </script> </head> <body> <button type="button">读取</button> </body> </html>
上面的实例中，str 是服务器返回给我们的内容，弹出来之后，是我们定义的数组，没有问题，那么弹出数组的长度，却返回 13，数组的长度本应该是 6 啊，怎么会是 13 呢，我们再弹出这个对象的类型，结果返回 string，尽管他长的很像数组，但他确实是一个字符串，这是为什么呢？其实通过 AJAX 的方式读取的任何对象都是以字符串形式存在的，那么这个字符串的长度就应该是13，方括号加上标点。如果要把一个字符串中存的数组提取出来，就要使用 eval(string) 函数，该函数可计算某个字符串，并把他作为 JavaScript 代码来执行，也就是可以把一个语句中的内容解析为 JS 可以识别的语句，该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。那么使用该方法之后再次返回数组的内容和长度，就没有问题了。我们也可以把这个函数保存在一个变量中，来查看每项的值。虽然 eval() 的功能非常强大，但在实际使用中用到他的情况并不多。
(2)、读取 JSON 数据