异步操作——AJAX

what？（是什么）

AJAX，Asynchronous Javascript and XML，异步Javascript和XML。是一种能实现异步操作的技术。

why？（作用）

在无需重新加载整个网页的情况下，对网页的某部分进行更新。

how？（运行原理）

下面我们来看一下传统网页和加上AJAX技术后的区别图。

通过对比可以发现，AJAX技术是在用户界面和服务器间加了一层AJAX引擎。

那这两者各是怎么工作的呢？

传统Web应用模式中：

（1）浏览器提交表单；

（2）浏览器等待服务器响应Response，如果一直未响应，就一直等着；

（3）等到响应后，浏览器重新加载整个页面

AJAX应用模式中：

（1）JS发送异步请求

（2）服务端查询数据库，返回数据

（3）服务端返回Response

（4）客户端根据返回的Response，来用JS操作DOM

由此可见，两者最大的不同是：传统的网页中，如果需要更新，需要重新加载整个页面；运用ajax后，只修改对应的一项就行。

正好来解释一下异步操作。

以前的web是浏览器给服务器传送数据后，就一直等着等着，等到服务器传回数据，告诉它接下来该怎么做，它才动。

现在浏览器变聪明了，它传送了数据后不等着了，继续干自己的事，等服务器传回数据后，接收，就ok了。这就是实现了异步操作。

AJAX的优缺点？

优：

（1）使得web应用程序更为迅捷地响应用户交互，提升了用户体验。

（2）按需取数据，减少了服务器的负担

缺：

（1）破坏了浏览器的后退功能，也就是在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面

（2）安全问题，暴露了更多的数据和逻辑，使黑客更容易进行攻击

（3）不能很好地支持移动设备

AJAX的适用场景？

适用于：

（1）对数据进行过滤和操纵相关数据的场景

（2）添加/删除树节点

（3）添加/删除列表中的某一行记录

（4）切换下拉列表item

（5）注册用户名重名的校验

不适用于：

（1）整个页面内容的保存

（2）导航

AJAX引擎所用技术？

XmlHttpRequest：支持异步请求的技术，使网页与服务器进行通信

JS：从服务器获得数据后，用JS操作DOM来更新页面。

DOM：文件对象模型，给HTML和XML文件使用的一组API（接口）。提供了文件的结构表述。

异步数据读取——XmlHttpRequest

对象方法描述：

对象属性描述：

小结

本文参考了：https://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html

感谢互联网，笔芯。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!