一、AJAX 简介html

　　AJAX(音译为：阿贾克斯) = Asynchronous JavaScript and XML（异步的 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 文件进行交互式通讯，也可用来与数据库进行动态通讯，还可用于创造动态性更强的应用程序。最多见的应用就是用户登陆，在登陆时，他就能够判断用户输入是否正确，若是输入正确，就直接显示用户信息，若是输入错误，提示错误信息，并不须要刷新页面。

　　二、配置服务器

　　AJAX 应用是异步更新，读取服务器上的数据，那到底服务器是什么东西呢？其实服务器就至关于 PC ，咱们在平时浏览网页时，只须要在地址栏输入相应的网址，就能够浏览对应的页面，这些页面不可能存储在我的电脑中，那得须要多大的硬盘，而且还有其余影响因素，因此这些网页就存储在对应的服务器上，好比百度的服务器、新浪的服务器，其实服务器跟咱们平时用的电脑没有什么多大的区别，我的计算机也能够做为服务器，甚至是手机之类的东西也能够做为服务器，好比咱们用手机给电脑传照片，能够不经过数据线，使用 WIFI 或者腾讯提供的功能，就能够很轻松的完成传输过程，这时候手机就充当了服务器的角色，只不过性能比较差，仅对这一台机器提供服务而已。那么 Web 服务器就是能够同时对不少人提供服务，性能更强大。

　　在学习 AJAX 时，就必须配置我的服务器，也就是要在本机搭建服务器程序，方便咱们调试代码。一般都会使用 WAMP 来搭建服务器，本地服务器搭建程序有不少种，你们能够选一种本身喜欢的来搭建，这里就以 WAMP 为例，WAMP 即 Windows 下的 Apache + Mysql + PHP 集成安装环境，也就是 Win 平台上的服务器程序，而一般都使用 WampServer 这一服务器软件。我这里安装的是 WampServer 2.5，你们能够百度搜索 wamp 找到2.5版本下载安装，建议将程序装在 D 盘，安装完成以后，打开程序，在桌面右下角有一个 W 的图标，一般都为绿色，可在图标上点击右键，选择倒数第二个选项切换为中文，切换完成以后，接下来就是配置了，下面是我在网上找到的配置方法，而且使用没有问题，写在这里也省的去找了，如今 WampServer 已经更新到3.0版本了，根据安装的版本不一样在百度搜索配置方法，都是一堆堆的。

　　首先，用编辑器打开安装目录：D:\wamp\bin\apache\apache2.4.9\conf\httpd.conf 文件

　　在516行或者搜索关键词找到：

#Include conf/extra/httpd-manual.conf

　　将前面的井号去掉。

　　而后，再打开：D:\wamp\bin\apache\apache2.4.9\conf\extra\httpd-vhosts.conf 文件

　　在代码最后添加以下内容：

DocumentRoot "D:/wamp/www"

ServerName www.abc.com

ServerAlias www.abc.com abc.com

Options Indexes FollowSymLinks

AllowOverride All

Require all granted

</Directory>

</VirtualHost>

　　www.abc.com 为我的站点地址，能够自行定义。

　　最后，打开：C:\Windows\System32\drivers\etc\hosts 文件

　　添加：127.0.0.1 www.abc.com

　　从新启动WAMP。

　　在须要作测试时，将页面保存在 D:/wamp/www 路径下，文件名保存为 index.html，而后在浏览器地址栏输入 abc.com 就能够打开刚才保存的页面。

　　若是打开不成功，可百度搜索解决办法，多是80端口被占用了。

　　这里须要注意一下，放在服务器下的文件不能用中文命名。

　　三、AJAX 基础

　　首先，咱们先来看一个 AJAX 应用的实例：请求并显示静态 TXT 文件

<!DOCTYPE html>

<html>

<head>

function ajax(){

var oAjax = new XMLHttpRequest();

oAjax.onreadystatechange = function (){

if(oAjax.readyState == && oAjax.status == ){

alert(oAjax.responseText);

}

oAjax.open('GET', 'ajax/demo.txt', true);

oAjax.send();

}

</script>

</head>

<body>

</body>

</html>

　　咱们须要把页面保存在 WAMP 安装目录下 www 根目录中，而且新建一个文件夹命名为 ajax，用于存储 TXT 文件，命名为 demo.txt，文件中能够随意输入点文字，用做演示。而后经过咱们自定义的我的站点，在浏览器中打开页面，当点击读取按钮后，弹出 TXT 文件中的内容。

　　经过上面的实例，咱们就能够看到，实际上 AJAX 的做用就是从服务器上读取一个文件，而且把这个文件内容返回给咱们，让咱们处理。

　　这里须要注意的是字符集编码问题，在使用 AJAX 时，全部的文件都必须是统一的编码格式，包括 HTML 、JS 文件和被读的文件，好比都是 UTF-8 或者都是 GB2312，上面实例中用于演示的 TXT 文件，默认输入英文，在保存时默认编码为 ANSI，若是咱们输入的是汉字，在保存时不改成与页面相同的编码格式 UTF-8，那么在点击按钮后，网页上就显示的乱码，因此在保存时，必定要注意切换文件的编码格式。

　　下面咱们来分析一下 AJAX 的工做原理。

　　四、XHR 建立对象

　　XHR 是 XMLHttpRequest 的简写，是 AJAX 的基础，用于在后台与服务器交换数据。

　　全部现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象，老版本的 IE 浏览器(IE6)则使用 ActiveXObject，为了兼容各类浏览器，能够作一个判断，若是支持 XMLHttpRequest 对象，则建立该对象，若是不支持，则建立 ActiveXObject 。

var oAjax;

// IE+, Firefox, Chrome, Opera, Safari

if(window.XMLHttpRequest){

oAjax = new XMLHttpRequest();

}

// IE

else{

oAjax = new ActiveXObject("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，而这正是咱们须要的。

　　五、链接服务器

　　将请求发送到服务器，咱们使用 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=' + new Date().getTime()，getTime()用于获取当前的时间戳，也就是1970年元旦到当前的毫秒数，那么使用 get Time() 返回的数据每一次都不同，由于是毫秒数，因此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（Asynchronous JavaScript and XML），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;

　　六、服务器响应

　　XMLHttpRequest 对象的 responseText 或 responseXML 属性用于得到来自服务器的响应，也就是获取从服务器返回的信息。

　　若是来自服务器的响应是 XML，并且须要做为 XML 对象进行解析，就使用 responseXML 属性。

　　若是来自服务器的响应并不是 XML，就使用 responseText 属性，该属性返回字符串形式的响应，所以能够直接使用：

document.getElementById('div1').innerHTML = oAjax.responseText;

　　这里说到 XML ，咱们就不得不提一下 AJAX 数据，也就是数据类型，数据类型能够分为不少种，好比中文、英文、数字等，咱们常用的 JSON，他就是一种轻量级的数据交换格式。XML 相对来讲那就是一个古老的存在，基本上都是在一些老式的程序中使用，都会从 XML 中读取数据，如今能够说是要被淘汰了，如今的程序几乎都是使用 JSON，由于同等数据量的状况下，XML 要比 JSON 大不少，这样会浪费带宽，浪费服务器资源，因此在使用 AJAX 获取从服务器返回的信息时，通常都使用 responseText 这个属性。

　　七、请求状态监控

　　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 事件时执行的任务（每次调用可能不尽相同）：

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

　　八、AJAX 原理

　　AJAX 的原理就跟现实生活中给朋友打电话是同样同样的，首先，你得有个手机，否则拿什么打，也就是要有一个设备，固然如今那都是人手一部，这第一步就能够忽略了，而后就是拨号，所谓的拨号，就是把彼此的手机链接起来，创建一条通道，而后才能通讯，若是接通了，就能够进行第三步了，那就是说，咱们给别人打电话，确定是要先说，而后再听对方说，那么最后就是听对方说，不多是本身说完啪挂了，至少得听对方说点啥，也就是有个响应。

　　打电话须要4个步骤完成，其实咱们在编写 AJAX 时，也是须要4个步骤，首先，就得建立 AJAX 对象，有了这个对象以后，才能进行下面的操做，那么接下来要作的就是链接到服务器，就至关于打电话拨号，链接到服务器以后，你就得主动告诉服务器你须要什么文件，不多是服务器丢给你几个文件，你本身选，要不是了再给你换一批，不可能这样，再说那服务器都是给成千上万人提供服务，不可能去跟你在那玩你猜我猜猜不猜，因此咱们就得明确的告诉服务器咱们要哪一个文件，那么第三步就是发送请求，最后一步就是接收返回值，得到服务器的响应，也就是把咱们须要的那个文件给咱们传回来。

　　咱们平时都说 AJAX，其实这只是一个对外的称呼，真正在浏览器内部是经过 XMLHttpRequest 对象来完成 AJAX 请求的，这才是 AJAX 真正的对象。

　　下面咱们看一下，根据这4个步骤，AJAX 代码的具体编写过程：

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

　　上面的代码，在进行最后一步时，判断浏览器和服务器进行到哪一步了，当 readyState 属性状态为4时，就是请求完成了，可是请求完成并不表明请求成功，若是读取出错了或者文件不存在等状况致使出错了，那么也算是请求完成了，也就是无论读取成功仍是失败，都算是请求完成了，因此须要进一步使用 status 属性判断，若为200，就是成功了。使用自定义的我的站点打开上面的 demo，点击按钮后，弹出成功和文本中的内容，咱们能够试着改变一下 URL，就是把他故意写错，再次点击按钮，则会弹出失败和404，也就是未找到页面。

　　若是每次咱们按照这4个步骤编写 AJAX 程序，是很是方便的，也容易理解，可是使用起来比较麻烦，因此咱们能够把他封装为一个函数，在使用时调用就好使多了。

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，下面是封装好以后的应用：

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 程序时，必定要加上失败时执行的回调函数，不然若是失败的话，那么可能没有任何反应。

　　九、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>

　　上面的代码，写起来也没什么难度，都是一些基础的知识，在浏览器打开自定义的我的站点，点击读取按钮以后，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 元素中。

　　十、AJAX 总结

　　咱们只是重点讲了一些 AJAX 最基础的知识，到这里，就可使用 AJAX 作一些基本的应用了，可是 AJAX 不只仅在于此，他有不少很是高级并且很实际的应用，好比一些大型系统如何使用 AJAX 搭建，如何编写一套完整的 AJAX 交互程序，还有跨域，还有JSONP等，要想真正的掌握 AJAX 这门艺术，咱们的路还很长。

$.ajax()方法详解

1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。前端

2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其余http请求方法，例如put和delete也可使用，但仅部分浏览器支持。ajax

3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。sql

4.async:
要求为Boolean类型的参数，默认设置为true，全部请求均为异步请求。若是须要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其余操做必须等待请求完成才能够执行。数据库

5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。apache

6.data:
要求为Object或String类型的参数，发送到服务器的数据。若是已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，能够查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。若是是数组，JQuery将自动为不一样值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。编程

7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。若是不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并做为回调函数参数传递。可用的类型以下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），全部post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。json

8.beforeSend：
要求为Function类型的参数，发送请求前能够修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中若是返回false能够取消本次ajax请求。XMLHttpRequest对象是唯一的参数。
            function(XMLHttpRequest){
               this;   //调用本次ajax请求时传递的options参数
            }
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }跨域

10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data多是xmlDoc、jsonObj、html、text等等
            this; //调用本次ajax请求时传递的options参数
         }

11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数以下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //一般状况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }

14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }

15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各类ajax事件。

16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会致使将"onJsonPLoad=?"传给服务器。

18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20.processData：
要求为Boolean类型的参数，默认为true。默认状况下，发送的数据将被转换为对象（从技术角度来说并不是字符串）以配合默认内容类型"application/x-www-form-urlencoded"。若是要发送DOM树信息或者其余不但愿转换的信息，请设置为false。

21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，而且type是GET时才会用于强制修改字符集(charset)。一般在本地和远程的内容编码不一样时使用。

案例代码：

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的全部内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

1.$是什么 2.阿贾克斯是什么，怎么建立和优势

$.ajax()方法详解