1、AJAX 简介
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 文件进行交互式通信，也可用来与数据库进行动态通信，还可用于创造动态性更强的应用程序。最常见的应用就是用户登录，在登录时，他就可以判断用户输入是否正确，如果输入正确，就直接显示用户信息，如果输入错误，提示错误信息，并不需要刷新页面。
2、配置服务器
上海领思教育科技有限公司是一家致力于高素质软件开发人才培养的公司，一方面解决企业招不到优秀人才 的困扰，同时为优秀的大学毕业生提供改变命运的机遇。公司自成立以来，一直坚持采用“好老师+好学生+ 好学习气氛”的培养模式，已经培养了一批又一批的IT人才。
上海领思期待您的加盟。
地址：上海市浦东新区临港新城水芸路300号501室
电话：021-58010107
简历投递：hr@lingsiedu.cn
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"
ServerNamewww.abc.com
ServerAliaswww.abc.comabc.com
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
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 文件
AJAX 实例
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();
}
读取
我们需要把页面保存在 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 。
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，而这正是我们需要的。
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=' + 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;
作者：九把鱼
链接：https://www.jianshu.com/p/ca1f3ad6f81a
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论