JavaScript学习总结之JS、AJAX应用(5)_H5之家 - 中国HTML5教程资源分享第一站

　　我们要从服务器读取 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>

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>

</body>

</html>

　　上面的实例中，str 是服务器返回给我们的内容，弹出来之后，是我们定义的数组，没有问题，那么弹出数组的长度，却返回 13，数组的长度本应该是 6 啊，怎么会是 13 呢，我们再弹出这个对象的类型，结果返回 string，尽管他长的很像数组，但他确实是一个字符串，这是为什么呢？其实通过 AJAX 的方式读取的任何对象都是以字符串形式存在的，那么这个字符串的长度就应该是13，方括号加上标点。如果要把一个字符串中存的数组提取出来，就要使用 eval(string) 函数，该函数可计算某个字符串，并把他作为 JavaScript 代码来执行，也就是可以把一个语句中的内容解析为 JS 可以识别的语句，该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。那么使用该方法之后再次返回数组的内容和长度，就没有问题了。我们也可以把这个函数保存在一个变量中，来查看每项的值。虽然 eval() 的功能非常强大，但在实际使用中用到他的情况并不多。

　　(2)、读取 JSON 数据

　　首先，还是需要新建一个 JSON 文件，可以命名为 json.json，可以随意存入一个数组对象，比如[{a:9, b:6, c:15}, {a:5, b:7, c:12}]，然后放在 ajax 文件夹下，最后开始编写程序。

<!DOCTYPE html>

<html>

<head>

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>

</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>

<title>AJAX 读取JSON</title>

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>

</ul>

</body>

</html>