JavaScript--AJAX工作原理

Ajax是什么？

　 Ajax（Asynchronous JavaScript And XML：异步Javascript和XML）在2005年2月被提出。不过Ajax并不是一种新的语言或技术。实际上，它由几种已知的技术组合而成：使用CSS和XHTML来表示；使用DOM模型来交互和动态显示；使用XMLHttpRequest来和服务器进行异步通信；使用javascript来绑定和调用。Ajax技术的核心是XMLHttpRequest。

原理

整个Ajax应用的工作过程如下：

① JS脚本使用XMLHttpRequest对象向服务器发送请求。发送请求时，就可以 是get请求，也可以是post请求（一般都是简单请求，相对而言是预请求，后面应该会写在CORS文章中。）
② JS使用XMLHttpRequest对象解析服务器响应数据。
③ 操作数据，一般用于更新HTML页面。

ajax的几个步骤

1. 创建ajax对象
2. 创建URL并准备发送
3. 发送并进行监听
4. 接收到服务器的相应

1. 创建XMLHTTPRequestvar req;if(window.XMLHTTPRequest) req = new XMLHTTPRequest();else req = new ActiveXObject("Microsoft.XMLHTTP");//老版本（IE5 和 IE6）2. 创建URLvar url = "";req.open("GET",url,true);//第一个参数表示请求类型的字符串，其值可以是GET或者POST。 //第二个参数是要作为请求发送目标的URL。 //第三个参数是true或false，表示请求是以异步还是同步的模式发出。//（默认为true，一般不建议为false）3. 进行发送//req.open("POST",demo.php,true);//req.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");req.send();//一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交//的参数写到open方法的url参数中，此时send方法的参数为null或为空。//POST请求： 如果需要像 HTML 表单那样 POST 数据，请使用 //setRequestHeader() 来添加 HTTP 头。//然后在 send() 方法中规定希望发送的数据4. 接收服务器的应答req.onreadyStateChange = function(){    if(req.readState == 4 )}

---

原生ajax-XMLHttpRequest的属性和方法

XMLHttpRequest的属性

• onreadystatechange
  该属性用来指定xhr对象状态改变时的事件函数。

• readyState
  有如下几种状态。
  0：xhr对象还没完成初始化,还没有调用open方法
  1：xhr对象开始发送请求,表示正在加载open已经调用，当是send还没有被调用
  2：xhr对象的请求发送完成,代表已经加载完毕，send已经被调用，请求已经开始
  3：xhr对象开始读取服务器的相应,代表交互中，服务器正在发送相应
  4：xhr对象读取服务器相应结束,代表完成，客户端接收响应

• status
  常用的有：
  200 OK：服务器响应正常。
  304 Not Modified：该资源在上次请求后没有任何修改。通常用于浏览器的缓存
  400 Bad Request：语义有误，当前请求无法被服务器理解或者请求参数有误。
  403 Forbidden：服务器已经理解请求，但是拒绝执行它。
  404 Not Found*：请求失败，请求所希望得到的资源未被在服务器上发现。
  500 Internal Server Error*：内部服务器错误。一般来说，这个问题都会在服务器端的源代码出现错误时出现。
  504 Gateway Timeout：请求超时。

• statusText
  见status。
• responseText
  该属性用于获取服务器的响应文本。
• responseXML
  该属性用于获取服务器响应的XML文档对象。

XMLHttpRequest的方法

• abort()：停止发送当前请求。
• getAllResponseHeaders()：获取字符串形式的服务器返回的所有响应头。
• getResponseHeader(‘headerLabel’)：根据响应头的名字，获取对应的响应头。
• open(‘method’, ‘url’ ,[, asyncFlag[, ‘username’[, ‘password’]]])：建立与服务器url的连接，以及是否使用异步（true/false）。如果远程服务器需要账号密码，则提供对应信息。
• send(content)：发送请求，其中content是参数。
• setRequestHeader(‘label’, ‘value’)：在发送请求（send）之前，先设置请求头。

---

AJAX优点和缺点

优点

1. AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
2. AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
3. 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4. 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
5. Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

---

缺点

1. AJAX干掉了Back和History功能，即对浏览器机制的破坏。

   Gmail下面采用的Ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
   一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。

2. 安全问题 AJAX暴露了与服务器交互的细节。
3. 对搜索引擎的支持比较弱。
4. 破坏了程序的异常机制。
5. 编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准，不容易调试。
6. 一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的

---

AJAX注意点

Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。