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/