一篇文章总结Ajax技术

特别说明：以下文章是菜鸟教程的Ajax教程以及一些其他网上公开资料的学习总结，部分文字直接copy自原文，也有一些文章的引用引用，均标明出处，如涉及侵权请联系删除。

---

---

1. 什么是Ajax

关于Ajax的发明来源略过不提，这些属于技术里的冷知识，感兴趣的同学自己搜索。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

Ajax不是一门新语言，它是基于现有Internet标准基础上，提出的一种优化客户端显示的技术方案。Ajax基于Javascript语言实现，终端用户想要使用此方案，需要允许浏览器执行Javascript脚本。

---

2. Ajax解决什么问题

与传统的网页访问与生成方法相比，Ajax可以实现：

• 快速生成动态网页内容
• 与服务器数据交换更少
• 不刷新全部网页而只是部分更新网页上内容

2.1 与传统网页访问的不同

传统动态网页访问，由浏览器发送请求（httprequest）到服务器，服务器收到请求后生成整张网页内容再发送给浏览器，浏览器收到后显示出来。如果网页上有动态更新内容，例如输入框输入查询字符，点击某个按键等等，浏览器在用户操作后，需要把用户输入数据再次放入请求（httprequest）发送给服务器，服务器重复上述过程重新生成新的页面返回给浏览器显示。

从上面过程可以发现，页面上任何动态输入操作，浏览器都要刷新整张页面，如果页面内容很多，或者网络速度很慢，或者服务器由于任务过多响应不及时，就会造成浏览器一直等待服务器的页面返回，即常见的浏览器“白屏”，用户体验很差。

Ajax的页面访问方式不同，第一次浏览器请求时返回的仍然是全部页面，之后页面上的动态操作，是由特殊的请求（xmlhttprequest）完成，服务器侧对应由专门的Javascript代码响应此请求，返回对应的数据，浏览器收到后，在原页面基础上，用新数据部分更新页面，因此可以实现快速的动态页面生成。

下面的三张图对这两种方式做了一个比较好的总结（图片来源在此，这位网友的文章总结不错，希望了解更多图片细节的可以阅读其文章）。

• 从浏览器端看差异
  
• 从服务器端看差异
  
• 从页面编写上看差异
  

2.2 与httprequest报头的对比¹

• xmlhttprequest
  
• httprequest
  

区别主要在于

• Ajax请求多了一个X-Requested-With:XMLHttpRequest 属性。
  该属性是方便服务器端判断get请求来自Ajax请求还是传统请求。

• Ajax的get请求Accept属性为application/json,text/javascript
  该属性是期待服务器返回的数据格式。

---

3. Ajax的优缺点

3.1 优点²

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

3.2 缺点^{3 4}

• 浏览器不兼容
  AJAX高度依赖JavaScript，而不同的浏览器对JavaScript支持性不同。这成了一个问题，尤其是当AJAX必须跨许多浏览器工作的时候。那些不支持JavaScript或者不支持JavaScript某些选项的浏览器将不能够正常使用ajax。由于Ajax对JavaScript的依赖性，它不适用移动应用。另外，使用Ajax时，web浏览器的后退键不能正常使用（没有刷新新页面，只是在原页面上更新，因此没有后退一说）。
• 不安全性
  网页可能很难调试，增加网页的代码量，你的网页更可能遇上严峻的安全威胁。
• 增加Web服务器的负载
  如果你增加一个自动更新的功能，它每隔几秒向服务发起请求，那么就会增加服务器的负载。

---

4. 使用Ajax

（简化版⁵，详细内容参见菜鸟教程的Ajax教程）

1. 创建xmlhttprequest对象

• 小窍门：
  所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象，老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象。为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。*

if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2. 创建HTTP请求

xmlhttp.open("GET","/try/ajax/demo_get.php",true);

3. 设置响应HTTP请求状态变化的函数

xmlhttp.onreadystatechange=[function_name]

4. 发送请求

xmlhttp.send();

5. 处理服务器响应

function [function_name]()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        // 你的数据处理代码
        ......
    }
}

---

5. 总结

以上就是对Ajax的总结，细节不做展开，使用时具体参考相关文章即可。文章内容参考网上资源总结而成，相关链接参见文后列表。

---

1. ajax get和普通get请求的区别 ↩︎

2. AJAX工作原理及其优缺点 ↩︎

3. Pros and Cons of AJAX ↩︎

4. 浅谈Ajax的优缺点 ↩︎

5. AJAX的实现步骤（完整过程） ↩︎