AJAX原因javascript
再次谈起这个话题，我深深的记得就在前几年，AJAX被炒的如火如荼，就好像不懂AJAX，就不会Web开发同样。要理解AJAX为何会出现，就要先了解Web开发面临的问题。html
咱们先来回忆一下Web页面的申请过程，这个我们在第一篇中就介绍过了：Web页面开发就是在无链接和无状态的HTTP协议上管理页面的状态。 每次申请页面的时候，服务器都会返回完整的HTML文本(固然还有其余的文本文件)，浏览器就负责解析这个文本并在浏览器中显示。前端
在这个过程当中，无论当前页面的内容是否是都变化了，服务器都会从新给浏览器重发一份，这个操做对于本来就比较脆弱的网络来讲，实在是比较耗时， 比较低效，虽然时至今日，这种方式仍是不少网站的工做模式，可是还有有不少玩家开始思考如何去优化这个过程。在编程语言的发展过程当中，异步是解决用户响应 问题的不二法宝，因此异步的申请与局部更新的方案就产生了，这个就是AJAX。java
问题的本质 - 数据交互技术web
在详细总结Ajax的实践以前，咱们先来深刻的分析一下问题的核心。ajax
任何的软件程序基本上均可以分为界面(UI)，逻辑，数据3个部分，Web程序也不例外，在Web程序中，JavaScript承担了完成逻辑 功能的任务，也就是和后台数据打交道的任务，不论是用户输入，仍是获取数据，最终都表现为使用JavaScript完成与服务器的交互，这样的操做说白了 就是前端界面与后端数据之间的数据交互问题。数据库
数据交互的方式基本上也就是两种方式：同步和异步，前者会等待数据操做结束后继续执行下面的程序，后者不会等待数据操做完成，而是先执行下面的程序，在数据操做完成后再经过回调函数完成须要执行的一些工做。编程
而在执行数据交互的过程当中，先后端也能够采起不一样的联系方式：持续链接和按需链接，前者先后端一直保持链接，后者先后端只在须要的时候链接一下。后端
对于传统的桌面程序，因为前端与后端共存与一台机器上，因此访问比较方便，一般采用持续链接和同步访问的方式，而对于一些大数据量的操做才采用异步访问的方式(提升界面的可响应性)。浏览器
对于Web程序而言，因为先后端一般不在一台机器上，并且最初网络环境并非太好，因此最初采用的是按需链接(申请页面的时候创建链接)和同步 的方式(数据接收完毕后更新整个页面)。可是随着Web程序需求(功能性和非功能性需求)的不断提升，网络软硬件技术的不断发展，数据访问方式就理所固然 的出现了异步的方式和局部更新，这就是AJAX技术。而随着HTML5技术的逐渐发展，持续链接也成为了一种可能，这就是WebSocket技术，这个在 前面的HTML5系列文章中已经总结过了。
从上面的数据交互技术发展的核心脉络中咱们能够更清楚的理解AJAX所处的历史地位和积极意义，下面咱们就详细的看一下AJAX技术。
AJAX本质
AJAX = Asynchronous JavaScript and XML (异步的 JavaScript 和 XML)
AJAX就是在客户端申请页面时，在不从新加载整个页面的状况下，只对网页的局部进行更新的技术。使用了AJAX后，浏览器与服务器只会进行少许数据交换，这样页面的执行效率就会大幅提高。
AJAX实现的核心有两点：
1. 异步申请数据
2. 响应数据，更新局部页面
更新页面比较简单，前面DOM部分已经总结过常见的CRUD(建立，检索，更新，删除)操做了。那个剩下的的就是如何异步的申请和响应服务端的数据了，这个是经过AJAX的核心对象XMLHttpRequest来完成的。
总的来讲，XMLHttpRequest对象很简单，下面来看个简单的例子：
<html> <head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url) { xmlhttp = null; // 1. 建立XMLHttpRequest对象 if (window.XMLHttpRequest){ // 适用于浏览器IE7, Firefox, Opera, Chrome等 xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // 适用于浏览器 IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp != null) { // 2. 挂接响应函数/回调函数 xmlhttp.onreadystatechange = stateChange; // 3. 设置申请方法 xmlhttp.open("GET",url,true); // 4. 发送申请 xmlhttp.send(); } else { alert("你的浏览器不支持XMLHTTP"); } } function stateChange() { // readyState = 4(loaded)而且status = 200(OK)表明申请数据成功 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 获取响应的状态，返回的数据(XML格式) document.getElementById('A1').innerHTML = xmlhttp.status; document.getElementById('A2').innerHTML = xmlhttp.statusText; document.getElementById('A3').innerHTML = xmlhttp.responseText; } else { alert("获取XML时出错:" + xmlhttp.statusText); } } </script> </head> <body> <h2>使用HttpRequest对象</h2> <p><b>状态:</b> <span id="A1"></span> </p> <p><b>状态文本:</b> <span id="A2"></span> </p> <p><b>返回的数据:</b> <br /><span id="A3"></span> </p> <button onclick="loadXMLDoc('/example/xmle/note.xml')">获取XML</button> </body> </html>
直接运行这个例子是不行的，须要本身配置个服务器，这个例子来源于W3C，地址：http://www.w3school.com.cn/tiy/t.asp?f=ajax_httprequest_js。我只不过是加了一下注释，下面就是例子的一些说明。
1. 建立XMLHttpRequest对象
兼容性问题注意一下便可。
2. 向服务器发送请求
申请时咱们使用了XMLHttpRequest对象的open()和send()方法。
open方法的第一个参数指定了请求的方式是GET或者是POST。与POST相比，GET更简单也更快，而且在大部分状况下都能用。
然而，在如下状况中，则须要使用POST请求：
1).没法使用缓存文件(更新服务器上的文件或数据库)
2).向服务器发送大量数据(POST没有数据尺寸限制)
3).发送包含未知字符的用户输入时，POST比GET更稳定也更可靠(其实仍是考虑数据尺寸的限制问题)
其实说白了POST主要用于携带数据更新服务器而后返回。
open方法的第二个参数是申请的数据url，这个没什么好说的。
open方法的第三个参数是指定申请时异步(true)仍是同步(false)，这个其实不用考虑，估计没什么人使用同步方式。若是有些兄弟想 试验一下同步的方式的话，也能够，不过响应的函数就不用挂到onreadystatechange上了，而是直接在send方法后面写上更新HTML的代 码便可。
send方法发送请求，这个方法能够携带一个字符串做为参数，这个参数存储了发送给服务器的数据，简单的申请都不用给服务器发送数据，因此用法都很简单：
xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
若是要像HTML表单那样POST数据的话，通常还要设置HTTP头，因此复杂一点的POST申请的代码大概像是这样：
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
这实际上是更新服务器数据的操做。
3. 响应服务器端的数据
这个响应函数对于同步的申请来讲很简单，直接把代码写到send方法的后面就能够了。异步申请的话要挂接到onreadystatechange事件上。
在回调函数中，咱们首先须要判断服务器的处理状态，这就是经过判断例子中的readyState和status来实现的。只有 readyState等于4而且status等于200的时候才代表服务器正确的返回了申请的数据，这个时候咱们经过responseText或者 responseXML获取到字符串格式或者XML格式的数据，而后解析处理就好了。
再论JSON与XML
在AJAX中，名字中的异步XML确实是至关惊艳，在回调函数中，直接可使用responseXML访问XML格式的内容。不过鉴于在 JavaScript中解析XML实在有点不是太方便(感兴趣的同窗百度一把就知道了)，至少是比解析JSON要麻烦一点，因此就像在前面咱们讨论的那 样：WEB开发中，JSON是王道。虽然XML是AJAX内置的一种方式，并且现实世界中确实也存在不少构建在XML或者SOAP(一种轻量的、简单的、 基于XML的协议)之上的服务方式，可是除了这些必需要使用XML的服务外，使用JSON确实能带来很多的方便。
REST思想
每次看到介绍AJAX的文章，我总能在第一时间想到REST架构。
REST是英文Representational State Transfer的缩写，中文翻译为“表述性状态转移”。这个又是当前煊赫一时的一个概念。这种思想的核心就是使用单一的URI标示符去标识服务器上的任 何的资源，客户端使用URI去对资源进行CRUD操做。这种想法与AJAX的作法配合起来(基于REST的Web服务及基于 Ajax的客户端)能够说是十分融洽。关于REST思想，后面会专门总结它，感兴趣的同窗能够先看看这个连接中的例子：http://www.ibm.com/developerworks/cn/webservices/ws-restajax/。
单页面的思想
单页面就是只有一个页面的Web程序，全部的操做都在同一个页面中完成，全部的数据交互都经过AJAX或者WebSocket完成，使用这些程 序的感受就如同使用桌面程序同样。单页面程序开发也是近年来比较火的一种开发方式，不少的公司都针对这种方式开发了相应的类库，好比谷歌的 AngularJS，AJAX是构建单页面程序的核心技术之一。
单页面技术与REST模式并非万能的，它们与AJAX紧密相关，可是又有不少的实际问题没有解决，因此大多时候，你们仍是习惯把它们与别的技术，例如MVC结合起来使用。
参考资料：
出处：http://www.cnblogs.com/dxy1982/