异步操作——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
感谢互联网,笔芯。