Ajax

题目1：ajax 是什么？有什么作用？

• AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest对象与服务器通信。 它可以使用 JSON，XML，HTML 和文本等多种格式发送和接收,可以在不重新刷新页面的情况下与服务器通信，交换数据，更新页面；是一种技术方案,但并不是一种新的编程语言新技术。它依赖的是现有的 CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的 XMLHttpRequest 对象，是这个对象使得浏览器可以发出 HTTP 请求与接受 HTTP 响应。实现在页面不刷新的情况下和服务器进行数据交互。一句话实现两者的关系：我们使用 XMLHttpRequest 对象来发送一个Ajax请求。

• 主要作用：

  • 在不重新加载页面的情况下发送请求给服务器。
  • 接受并使用从服务器发来的数据。

• 优点：

  1. 无刷新更新数据。

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

  2. 异步与服务器通信。

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

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

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

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

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

  5. 界面与应用分离。

     Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

• 缺点

  1. AjAX干掉了Back和加入收藏书签功能，即对浏览器机制的破坏。

     对应用Ajax最主要的批评就是，它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，HTML5 之前的方法大多是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态）。
     关于无法将状态加入收藏或书签的问题，HTML5之前的一种方式是使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持追踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）HTML5 以后可以直接操作浏览历史，并以字符串形式存储网页状态，将网页加入网页收藏夹或书签时状态会被隐形地保留。上述两个方法也可以同时解决无法后退的问题。

  2. AJAX的安全问题。
     AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

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

参考：MDN、掘金

题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

在开发之前，前后端需要协作商定数据和接口的各项细节，后端负责提供数据，前端负责展示数据（根据数据负责页面的开发）

• 前后端开发联调注意事项：

  • URL：接口名称
  • 发送请求的参数和格式（get/post）
  • 数据响应的数据格式（数组/对象）
  • 根据前后端约定，整理接口文档

• 如何 mock 数据

  • 搭建 Web 服务器
  • 根据接口文档仿造数据
  • 关联前后端文件，开启 Web 服务器
  • 验证前端页面功能及显示是否正确

题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

• 通过设置状态锁来判断是否正在请求中，如果是则不响应，如果不是则请求数据，详细请看代码：请点击

题目4：实现加载更多的功能，代码提交到 github

点击查看