首先，还是需要新建一个 JSON 文件，可以命名为 json.json，可以随意存入一个数组对象，比如[{a:9, b:6, c:15}, {a:5, b:7, c:12}]，然后放在 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>
上面的实例，使用 eval() 函数解析出来之后，还是一个数组，返回数组的第0个元素，也就是{a:9, b:6, c:15}，他还是一个 JSON 数据，所以返回 obj，那么再返回第0个元素中 a 的值，可以看到，使用方法和读取数组的方法是一样的。那如果 JSON 中保存的数据更复杂一些，比如是一组用户信息，要如何去读取，然后并以列表形式显示在网页中呢？
下面是 JSON 用户信息数据，可以复制替换一下，这里在保存 JSON 时需要注意编码格式，一旦文件中出现中文了，就必须保存为 UTF-8 的格式，为了方便区分，我们可以把这个文件命名为 date.json 。
[ { "user": "小白", "sex": "男", "age": }, { "user": "初夏", "sex": "女", "age": }, { "user": "小明", "sex": "男", "age": }, { "user": "静静", "sex": "女", "age": } ]
(3)、创建 DOM 元素显示 JSON 数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>AJAX 读取JSON</title> <script src="https://www.jb51.net/js/ajax.js"></script> <script> window.onload = function (){ var oBtn = document.getElementById('btn'); var oUl = document.getElementById('u'); oBtn.onclick = function (){ ajax('ajax/date.json?t=' + new Date().getTime(), function (str){ var arr = eval(str); //循环遍历返回的对象 for(var i=; i<arr.length; i++){ //每次循环的时候创建一个li元素 var oLi = document.createElement('li'); //向li元素插入内容 oLi.innerHTML = '姓名：<strong>' + arr[i].user + '</strong> 性别：<span>' + arr[i].sex + '</span> 年龄：<span>' + arr[i].age + '</span>'; //将创建好的li元素插入到ul中 oUl.appendChild(oLi); } },function (){ alert('失败'); }); }; }; </script> </head> <body> <input type="button" value="读取"> <!-- 点击按钮生成json数据列表 --> <ul> <!-- <li>姓名：<strong>小白</strong> 性别：<span>男</span> 年龄：<span></span></li> --> </ul> </body> </html>
上面的代码，写起来也没什么难度，都是一些基础的知识，在浏览器打开自定义的个人站点，点击读取按钮之后，JSON 文件中存的数据，就会以为列表的形式显示在页面上，这里只是简单的做了一个效果，我们还可以给他定义样式，或者可以创建一个表格，让他更友好的显示。
这里在网上看到了一个方法，在处理 AJAX 请求得到 JSON 数据响应时，也就是服务器返回的 JSON 字符串，需要做一次对象化处理，可以不使用 eval() 方法，而是使用 new Function() 代替，新的 Function() 构造就类似于 eval()，或者使用 jQuery 提供的 $.getJSON() 方法获得服务器返回，那么就可以不使用 eval() 方法了。具体操作如下：
//var arr = eval(str); var arr = (new Function('', 'return' + str)());
此时的 arr 就会被解析成一个 JSON 对象了，然后再使用循环遍历，将数据插入到新建的 li 元素中。
10、AJAX 总结