JavaScript学习总结之JS、AJAX应用
1、AJAX简介
AJAX(音译为：阿贾克斯)=AsynchronousJavaScriptandXML（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，也就是在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX不是新的编程语言，而是一种使用现有标准的新方法，是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，传统的网页（不使用AJAX）如果需要更新内容或者用户注册信息、提交表单等，必需重新加载整个网页页面。所以说AJAX是一种与服务器交换数据并更新部分网页的艺术，因此我们必须掌握AJAX这种技术。
AJAX是基于现有的Internet标准，并且联合使用它们：
①、XMLHttpRequest对象(异步的与服务器交换数据)
②、JavaScript/DOM(信息显示/交互)
③、CSS(给数据定义样式)
④、XML(作为转换数据的格式)
AJAX的核心是JavaScript对象XMLHttpRequest，他是一种支持异步请求的技术，也就是XMLHttpRequest赋予了我们可以使用JS向服务器提出请求并处理响应的能力，而不阻塞用户，通过这个对象，JS可在不重载页面的情况下与Web服务器交换数据。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX是一种独立于Web服务器软件的浏览器技术，也就是AJAX应用程序独立于浏览器和平台！可用于创造动态性更强的应用程序
那么，简单说，AJAX就是可以让JS去读取服务器上的数据，他的功能是可以在无需刷新页面的前提下，去服务器读取或者发送数据。可用来与JSON文件进行交互式通信，也可用来与数据库进行动态通信，还可用于创造动态性更强的应用程序。最常见的应用就是用户登录，在登录时，他就可以判断用户输入是否正确，如果输入正确，就直接显示用户信息，如果输入错误，提示错误信息，并不需要刷新页面。
2、配置服务器
AJAX应用是异步更新，读取服务器上的数据，那到底服务器是什么东西呢？其实服务器就相当于PC，我们在平时浏览网页时，只需要在地址栏输入相应的网址，就可以浏览对应的页面，这些页面不可能存储在个人电脑中，那得需要多大的硬盘，并且还有其他影响因素，所以这些网页就存储在对应的服务器上，比如百度的服务器、新浪的服务器，其实服务器跟我们平时用的电脑没有什么多大的区别，个人计算机也可以作为服务器，甚至是手机之类的东西也可以作为服务器，比如我们用手机给电脑传照片，可以不通过数据线，使用WIFI或者腾讯提供的功能，就可以很轻松的完成传输过程，这时候手机就充当了服务器的角色，只不过性能比较差，仅对这一台机器提供服务而已。那么Web服务器就是可以同时对很多人提供服务，性能更强大。
在学习AJAX时，就必须配置个人服务器，也就是要在本机搭建服务器程序，方便我们调试代码。通常都会使用WAMP来搭建服务器，本地服务器搭建程序有很多种，大家可以选一种自己喜欢的来搭建，这里就以WAMP为例，WAMP即Windows下的Apache+Mysql+PHP集成安装环境，也就是Win平台上的服务器程序，而通常都使用WampServer这一服务器软件。我这里安装的是WampServer2.5，大家可以百度搜索wamp找到2.5版本下载安装，建议将程序装在D盘，安装完成之后，打开程序，在桌面右下角有一个W的图标，通常都为绿色，可在图标上点击右键，选择倒数第二个选项切换为中文，切换完成之后，接下来就是配置了，下面是我在网上找到的配置方法，并且使用没有问题，写在这里也省的去找了，现在WampServer已经更新到3.0版本了，根据安装的版本不同在百度搜索配置方法，都是一堆堆的。
首先，用编辑器打开安装目录：D:\wamp\bin\apache\apache2.4.9\conf\httpd.conf文件
在516行或者搜索关键词找到：
#Includeconf/extra/httpd-manual.conf
将前面的井号去掉。
然后，再打开：D:\wamp\bin\apache\apache2.4.9\conf\extra\httpd-vhosts.conf文件
在代码最后添加如下内容：
<VirtualHost*:80> DocumentRoot"D:/wamp/www" ServerNamewww.abc.com ServerAliaswww.abc.comabc.com <Directory"D:/wamp/www"> OptionsIndexesFollowSymLinks AllowOverrideAll Requireallgranted </Directory> </VirtualHost>
www.abc.com为个人站点地址，可以自行定义。
最后，打开：C:\Windows\System32\drivers\etc\hosts文件
添加：127.0.0.1www.abc.com
重新启动WAMP。
在需要做测试时，将页面保存在D:/wamp/www路径下，文件名保存为index.html，然后在浏览器地址栏输入abc.com就可以打开刚才保存的页面。
如果打开不成功，可百度搜索解决办法，可能是80端口被占用了。
这里需要注意一下，放在服务器下的文件不能用中文命名。
3、AJAX基础
首先，我们先来看一个AJAX应用的实例：请求并显示静态TXT文件
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-">
<title>AJAX实例</title>
<script>
functionajax(){
varoAjax=newXMLHttpRequest();
oAjax.onreadystatechange=function(){
if(oAjax.readyState==&&oAjax.status==){
alert(oAjax.responseText);
}
}
oAjax.open('GET','ajax/demo.txt',true);
oAjax.send();
}
</script>
</head>
<body>
<buttontype="button"onclick="ajax()">读取</button>
</body>
</html>
我们需要把页面保存在WAMP安装目录下www根目录中，并且新建一个文件夹命名为ajax，用于存储TXT文件，命名为demo.txt，文件中可以随意输入点文字，用作演示。然后通过我们自定义的个人站点，在浏览器中打开页面，当点击读取按钮后，弹出TXT文件中的内容。
通过上面的实例，我们就可以看到，实际上AJAX的作用就是从服务器上读取一个文件，并且把这个文件内容返回给我们，让我们处理。
这里需要注意的是字符集编码问题，在使用AJAX时，所有的文件都必须是统一的编码格式，包括HTML、JS文件和被读的文件，比如都是UTF-8或者都是GB2312，上面实例中用于演示的TXT文件，默认输入英文，在保存时默认编码为ANSI，如果我们输入的是汉字，在保存时不改为与页面相同的编码格式UTF-8，那么在点击按钮后，网页上就显示的乱码，所以在保存时，一定要注意切换文件的编码格式。
下面我们来分析一下AJAX的工作原理。
4、XHR创建对象
XHR是XMLHttpRequest的简写，是AJAX的基础，用于在后台与服务器交换数据。
所有现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建XMLHttpRequest对象，老版本的IE浏览器(IE6)则使用ActiveXObject，为了兼容各种浏览器，可以做一个判断，如果支持XMLHttpRequest对象，则创建该对象，如果不支持，则创建ActiveXObject。
varoAjax;
//IE+,Firefox,Chrome,Opera,Safari
if(window.XMLHttpRequest){
oAjax=newXMLHttpRequest();
}
//IE
else{
oAjax=newActiveXObject("Microsoft.XMLHTTP");
}
因为所有现代浏览器和IE高版本浏览器都支持XMLHttpRequest对象，所以在创建对象时，也就不用做兼容性处理了，这里只是了解一下。在IE浏览器中ActiveX是插件的意思，也就是说IE6中的AJAX是通过一个插件来完成的，虽说是插件，但是在IE6浏览器中已经默认安装了。
在上面的代码中，在做判断时使用了window.XMLHttpRequest，我们都知道全局变量是window上的一个属性，在JS中，如果使用没有定义的变量，会报错，比如：alert(a)。而如果使用没有定义的属性，则不会报错，而是undefined，比如：alert(window.a)。IE6不支持XMLHttpRequest，所以如果直接使用，就会报错，而如果把他定义为window的属性，那么则是undefined，未定义在if判断语句中代表假，也就是fasle，而这正是我们需要的。
5、连接服务器
将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法：
oAjax.open('GET','ajax/demo.txt',true);
oAjax.send();
open(method,url,async)规定请求的类型、URL以及是否异步处理请求。第一个参数method，用于规定请求的类型，GET或
POST。第二个参数URL，用于设置文件在服务器上的地址，该文件可以是任何类型的文件，比如.txt、.xml和.json，或者服务器脚本文件，比如.php(在传回响应之前，能够在服务器上执行任务)。第三个参数async，用于定义是否异步传输，true（异步）或false（同步）。
send(string)用于将请求发送到服务器，参数string仅用于POST请求。
下面来看两个问题。
(1)、GET还是POST？
GET和POST常用于提交表单，我们也并不陌生，表单的提交默认是使用GET方式。
与POST相比，GET更简单也更快，并且在大部分情况下都能用。
但是，在以下情况中，请使用POST请求：
①、无法使用缓存文件（更新服务器上的文件或数据库）。
②、向服务器发送大量数据（POST没有数据量限制）。
③、发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。
最实用的判断方法：GET用于获取数据，比如浏览贴子，POST用于上传数据，也就是向服务器传递数据，比如用户注册。
GET和POST的区别：
GET：在URL中传输数据，安全性弱，容量小，一般URL的长度最大为4K到10K，长度是有限制的。
POST：不在URL中传输数据，相对安全性强，容量大，容量可达到2G，再大就可以使用控件，真正的安全就只有https协议。
缓存：GET有缓存，POST没有缓存。
所以，AJAX一般都为GET方式。当然除了GET和POST方法之外还有很多种方法，最常用的还是这两种。
在AJAX基础的实例中，因为我们使用了GET请求，那么还有一个问题就是缓存的问题，所谓缓存，就好比一个网站打开一次之后，再打开的话，速度就会快一些，这就得益于缓存，那么缓存实际上就是一个网站，在第一次打开的时候，才是真正的从服务器上请求，之后都是从本地读取，从硬盘中读取数据肯定要快一些，至少比网络要快很多。那按照这样说，缓存岂不是个好东西，还有什么问题呢？我们来看一下AJAX中的实例，我们打开过一次了，也就是说已经有了本地缓存，那么如果这时候给TXT文件再加入一些文字，会如何呢？会发现点击按钮后，添加进去的文字不显示，过一会才显示，这就是缓存的问题，Chrome和FF缓存还不严重，IE浏览器的缓存比较严重。这个问题在很多时候会给我们带来一些困扰，比如是一个股票网站，需要实时更新最新的股票价格，这个价格一直在变，如果不阻止缓存，那么这个价格就很难做到实时更新，所以如果是时常在变的数据，就需要把缓存阻止掉。缓存的工作原理是根据URL来缓存的，同一个地址读取一次，因此要阻止缓存，只要让URL一直在变，也就是向URL添加一个唯一的ID。
我们平时在浏览网页时，都见过这种样子，比如在使用百度搜索时，百度域名后边跟了个问号，然后是一堆什么等于什么：https://www.baidu.com/s?wd=前端&rsv_spt=1&rsv_iqid=0xe9146bd400052360&issp=1&，这个问号后边的数据就被称为GET数据。如果我们给TXT文件后边也加入GET数据，http://abc.com/ajax/demo.txt?a=2，或者可以自定义什么等于什么，这样对文件的显示内容是没有任何影响的，那么对于缓存的问题，我们就可以对oAjax.open('GET','/ajax/demo.txt',true)第二个参数URL做一些修改，'ajax/demo.txt?t='+Math.random()，Math.random()方法返回一个0-1之间的随机小数，那么每次返回的都不同，也可以添加'ajax/demo.txt?t='+newDate().getTime()，getTime()用于获取当前的时间戳，也就是1970年元旦到当前的毫秒数，那么使用getTime()返回的数据每一次都不一样，因为是毫秒数，所以1秒之内就有很多种可能，他的值一直在变，这样就能很好的解决缓存问题。
这里要注意的是，在使用GET请求时，为了避免只是得到缓存的结果，需要向URL添加一个唯一的ID，使URL每次都不一样。
如果需要通过GET方法发送信息，可以把信息添加在URL中。
如果需要像HTML表单那样传输POST数据，可以使用setRequestHeader()来添加HTTP头，然后在send()方法中规定发送的数据。
setRequestHeader(header,value)用于向请求添加HTTP头，第一个参数header规定头的名称，比如Content-type，第二个参数规定头的值。
(2)、true还是false？
同步和异步，在现实生活中，同步的意思为多件事一起做，而异步为一件件来，也就是不同步。但是在JS中同步和异步的概念和现实生活中恰恰是相反的，同步的意思为事情一件件来，先干完一件事再干另一件事，而异步则为多个事情可以一起做，而AJAX天生就是用来做异步操作的，如果AJAX工作在同步的方式下，也就是事情得一件一件来，当发出一个请求后，因为网速有点慢，这个请求在1分钟后才得到响应，那么在这个请求结束之前，页面中所有的按钮、链接、文字等全都跟死了一样，就完全没法操作了。而如果是异步的话，就没问题了，比如你发微博，发出去之后因为网速慢没有更新过来，那么在他更新之前，还可以做其他操作。
AJAX指的是异步JavaScript和XML（AsynchronousJavaScriptandXML），XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须设置为true，所以AJAX一般都为异步传输。对于Web开发者来说，发送异步请求是一个巨大的进步，很多在服务器执行的任务都相当费时，在AJAX出现之前，这可能会引起应用程序挂起或者停止。
而通过AJAX，JS无需等待服务器的响应，而是在等待服务器响应时执行其他脚步，当响应就绪后对响应进行处理。
当使用异步时，也就是async=true时，必需规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：
oAjax.onreadystatechange=function(){
if(oAjax.readyState==&&oAjax.status==){
alert(oAjax.responseText);
}
}
oAjax.open('GET','ajax/demo.txt?t='+Math.random(),true);
oAjax.send();
如需使用async=false，请将open()方法中的第三个参数改为false。
不推荐使用同步传输，但是对于一些小型的请求，也是可以的。
这里需要注意，JS会等到服务器响应就绪才继续执行，如果服务器繁忙或缓慢，应用程序会挂起或停止。
当使用async=false时，可以不用编写onreadystatechange函数，把代码放到send()语句后面即可：
oAjax.open('GET','ajax/demo.txt',false);
oAjax.send();
document.getElementById('div').innerHTML=oAjax.responseText;
6、服务器响应
XMLHttpRequest对象的responseText或responseXML属性用于获得来自服务器的响应，也就是获取从服务器返回的信息。
如果来自服务器的响应是XML，而且需要作为XML对象进行解析，就使用responseXML属性。
如果来自服务器的响应并非XML，就使用responseText属性，该属性返回字符串形式的响应，因此可以直接使用：
document.getElementById('div1').innerHTML=oAjax.responseText;
这里说到XML，我们就不得不提一下AJAX数据，也就是数据类型，数据类型可以分为很多种，比如中文、英文、数字等，我们经常使用的JSON，他就是一种轻量级的数据交换格式。XML相对来说那就是一个古老的存在，基本上都是在一些老式的程序中使用，都会从XML中读取数据，现在可以说是要被淘汰了，现在的程序几乎都是使用JSON，因为同等数据量的情况下，XML要比JSON大很多，这样会浪费带宽，浪费服务器资源，所以在使用AJAX获取从服务器返回的信息时，一般都使用responseText这个属性。
7、请求状态监控
XMLHttpRequest对象的readyState属性返回请求的当前状态。当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当readyState改变时，就会触发onreadystatechange事件，readyState属性存有XMLHttpRequest的状态信息。
XMLHttpRequest对象的三个重要的属性：
onreadystatechange：存储函数(或函数名)，每当readyState属性改变时，就会调用该函数。
readyState：存有XMLHttpRequest的状态。从0到4发生变化。
0：请求未初始化。还没有调用open()方法。
1：服务器连接已建立，也就是载入。已调用open()方法，正在发送请求。
2：请求已接收，载入完成。open()方法完成，已收到全部响应内容。
3：请求处理中，也叫解析。正在解析响应内容。
4：请求已完成，且响应已就绪。响应内容解析完成，可以在客户端调用了。
status：请求结果，也就是HTTP状态码。200：OK。404：未找到页面。
在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当readyState等于4且状态为200时，表示响应已就绪：
oAjax.onreadystatechange=function(){
if(oAjax.readyState==&&oAjax.status==){
alert(oAjax.responseText);
}
}
这里要注意：onreadystatechange事件被触发5次（0-4），对应着readyState的每个变化。
如果网站中存在多个AJAX任务，那么就可以使用回调函数，回调函数是一种以参数形式传递给另一个函数的函数，应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。
该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-">
<title>AJAX实例</title>
<script>
varoAjax;
functionajax(url,fnSucc){
oAjax=newXMLHttpRequest();
oAjax.onreadystatechange=fnSucc;
oAjax.open("GET",url,true);
oAjax.send();
}
functionmyFunction(){
ajax('ajax/demo.txt?t='+Math.random(),function(){
if(oAjax.readyState==&&oAjax.status==){
alert(oAjax.responseText);
}
});
}
</script>
</head>
<body>
<buttontype="button"onclick="myFunction()">读取</button>
</body>
</html>
8、AJAX原理
AJAX的原理就跟现实生活中给朋友打电话是一样一样的，首先，你得有个手机，不然拿什么打，也就是要有一个设备，当然现在那都是人手一部，这第一步就可以忽略了，然后就是拨号，所谓的拨号，就是把彼此的手机连接起来，建立一条通道，然后才能通信，如果接通了，就可以进行第三步了，那就是说，我们给别人打电话，肯定是要先说，然后再听对方说，那么最后就是听对方说，不可能是自己说完啪挂了，至少得听对方说点啥，也就是有个响应。
打电话需要4个步骤完成，其实我们在编写AJAX时，也是需要4个步骤，首先，就得创建AJAX对象，有了这个对象之后，才能进行下面的操作，那么接下来要做的就是连接到服务器，就相当于打电话拨号，连接到服务器之后，你就得主动告诉服务器你需要什么文件，不可能是服务器丢给你几个文件，你自己选，要不是了再给你换一批，不可能这样，再说那服务器都是给成千上万人提供服务，不可能去跟你在那玩你猜我猜猜不猜，所以我们就得明确的告诉服务器我们要哪个文件，那么第三步就是发送请求，最后一步就是接收返回值，获得服务器的响应，也就是把我们需要的那个文件给我们传回来。
我们平时都说AJAX，其实这只是一个对外的称呼，真正在浏览器内部是通过XMLHttpRequest对象来完成AJAX请求的，这才是AJAX真正的对象。
下面我们看一下，根据这4个步骤，AJAX代码的具体编写过程：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-">
<title>AJAX原理</title>
<script>
window.onload=function(){
varoBtn=document.getElementById('btn');
oBtn.onclick=function(){
//、设备=创建AJAX对象
varoAjax=newXMLHttpRequest();
//创建好对象之后，就可以弹出来看一下。返回：[objectXMLHttpRequest]
//IE和IE返回：[object]
//alert(oAjax);
//在刚创建AJAX对象，还没调用open()方法，也就是请求未初始化时，弹出readyState状态。
//alert(oAjax.readyState);//返回：
//、拨号=连接服务器
oAjax.open('GET','ajax/demo.txt?t='+newDate().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>
<buttontype="button"id="btn">读取</button>
</body>
</html>
上面的代码，在进行最后一步时，判断浏览器和服务器进行到哪一步了，当readyState属性状态为4时，就是请求完成了，但是请求完成并不代表请求成功，如果读取出错了或者文件不存在等情况导致出错了，那么也算是请求完成了，也就是不管读取成功还是失败，都算是请求完成了，所以需要进一步使用status属性判断，若为200，就是成功了。使用自定义的个人站点打开上面的demo，点击按钮后，弹出成功和文本中的内容，我们可以试着改变一下URL，就是把他故意写错，再次点击按钮，则会弹出失败和404，也就是未找到页面。
如果每次我们按照这4个步骤编写AJAX程序，是非常方便的，也容易理解，但是使用起来比较麻烦，所以我们可以把他封装为一个函数，在使用时调用就好使多了。
functionajax(url,fnSucc,fnFaild){
varoAjax=newXMLHttpRequest();
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，下面是封装好之后的应用：
<scriptsrc="js/ajax.js"></script>
<script>
window.onload=function(){
varoBtn=document.getElementById('btn');
oBtn.onclick=function(){
ajax('ajax/demo.txt?t='+newDate().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文件夹下，然后就可以开始编写程序了。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-">
<title>AJAX读取数组</title>
<scriptsrc="js/ajax.js"></script>
<script>
window.onload=function(){
varoBtn=document.getElementById('btn');
oBtn.onclick=function(){
ajax('ajax/arr.txt?t='+newDate().getTime(),function(str){
//str是服务器返回的内容，弹出来看一下
//alert(str);返回：[,,,,,]
//那么再弹出内容的长度
//alert(str.length);//返回：
//返回对象的类型：string
//alert(typeofstr);
//eval()函数用于把字符串转换为JS代码执行
//alert(eval(str));//返回：,,,,,
//现在可以返回内容的长度
//alert(eval(str).length);//返回：
//可以把这个函数保存为变量，查看每项的值
vararr=eval(str);
alert(arr[]);//返回：
},function(){
alert('失败');
});
};
};
</script>
</head>
<body>
<buttontype="button"id="btn">读取</button>
</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文件夹下，最后开始编写程序。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-">
<title>AJAX读取数组</title>
<scriptsrc="js/ajax.js"></script>
<script>
window.onload=function(){
varoBtn=document.getElementById('btn');
oBtn.onclick=function(){
ajax('ajax/arr.txt?t='+newDate().getTime(),function(str){
//str是服务器返回的内容，弹出来看一下
//alert(str);返回：[,,,,,]
//那么再弹出内容的长度
//alert(str.length);//返回：
//返回对象的类型：string
//alert(typeofstr);
//eval()函数用于把字符串转换为JS代码执行
//alert(eval(str));//返回：,,,,,
//现在可以返回内容的长度
//alert(eval(str).length);//返回：
//可以把这个函数保存为变量，查看每项的值
vararr=eval(str);
alert(arr[]);//返回：
},function(){
alert('失败');
});
};
};
</script>
</head>
<body>
<buttontype="button"id="btn">读取</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数据
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-">
<title>AJAX读取JSON</title>
<scriptsrc="js/ajax.js"></script>
<script>
window.onload=function(){
varoBtn=document.getElementById('btn');
varoUl=document.getElementById('u');
oBtn.onclick=function(){
ajax('ajax/date.json?t='+newDate().getTime(),function(str){
vararr=eval(str);
//循环遍历返回的对象
for(vari=;i<arr.length;i++){
//每次循环的时候创建一个li元素
varoLi=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>
<inputid="btn"type="button"name="user"value="读取">
<!--点击按钮生成json数据列表-->
<ulid="u">
<!--<li>姓名：<strong>小白</strong>性别：<span>男</span>年龄：<span></span></li>-->
</ul>
</body>
</html>
上面的代码，写起来也没什么难度，都是一些基础的知识，在浏览器打开自定义的个人站点，点击读取按钮之后，JSON文件中存的数据，就会以为列表的形式显示在页面上，这里只是简单的做了一个效果，我们还可以给他定义样式，或者可以创建一个表格，让他更友好的显示。
这里在网上看到了一个方法，在处理AJAX请求得到JSON数据响应时，也就是服务器返回的JSON字符串，需要做一次对象化处理，可以不使用eval()方法，而是使用newFunction()代替，新的Function()构造就类似于eval()，或者使用jQuery提供的$.getJSON()方法获得服务器返回，那么就可以不使用eval()方法了。具体操作如下：
//vararr=eval(str);
vararr=(newFunction('','return'+str)());
此时的arr就会被解析成一个JSON对象了，然后再使用循环遍历，将数据插入到新建的li元素中。
10、AJAX总结
我们只是重点讲了一些AJAX最基础的知识，到这里，就可以使用AJAX做一些基本的应用了，但是AJAX不仅仅在于此，他有很多非常高级而且很实际的应用，比如一些大型系统如何使用AJAX搭建，如何编写一套完整的AJAX交互程序，还有跨域，还有JSONP等，要想真正的掌握AJAX这门艺术，我们的路还很长。