AJAX基础详细介绍(2)

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

发起请求的方式一般是<input type="submit">

在上世纪90年代，几乎所有的网站都由HTML页面实现，服务器处理每一个用户请求都需要重新加载网页。形式是怎样的呢？就比如说你在浏览器上登录自己的微博账号，填完了表单，点击登录按钮，一次"完整"的HTTP请求就此触发，服务器发现你的登录密码不对头，立马把网页原原本本的返回给你，在用户看来呢，就是一次重新加载的过程！用户体验极差！而且这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

特点

• 不是编程语言，而是一种使用现有标准的新方法

• 无需加载整个界面，可与服务器交换数据，更新部分网页

• 不需要浏览器插件，但需要用户允许js在浏览器上运行

为什么需要Ajax

在没有使用Ajax情况下：Web站点强制用户进入提交/等待/重新显示（重新加载整个网页），对于服务器加大了流量，对于用户每一次与服务器传递数据都会重新加载整个网页。

使用Ajax情况下：通过在后台与服务器进行少量数据交换，AJAX 使用JavaScript和DHTML立即更新UI（部分刷新），这对用户有利，因为它不会干扰或中断他或她正在使用的网页。

小提示：

DHTML 是一种创建动态和交互 WEB 站点的技术集简单说就是HTML、CSS和 JavaScript 的组合

JavaScript 不是唯一使用 AJAX 编程的客户端脚本语言; VBScript 和其他语言都有这种功能，但 JavaScript 是最受欢迎的。

工作原理

---

包含的技术

AJAX是基于现有的Internet标准，并且联合使用它们：

• XMLHttpRequest 对象 (异步的与服务器交换数据)

• JavaScript/DOM (信息显示/交互)

• CSS (给数据定义样式)

• XML (作为转换数据的格式)

原理简述

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

原理详述

Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。

并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎，用户操作起来也就感觉更加流畅了。

浏览器普通交互方式：

浏览器的Ajax的交互方式：

优点和缺点

---

优点

1.无刷新更新数据。

AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

2.异步与服务器通信。

AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

3.前端和后端负载平衡。

AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

4.基于标准被广泛支持。

AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题