异步操作——AJAX

前端之家收集整理的这篇文章主要介绍了异步操作——AJAX前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

what?(是什么)

AJAXAsynchronous Javascript and XML,异步JavascriptXML。是一种能实现异步操作的技术。

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

感谢互联网,笔芯。

原文链接:https://www.f2er.com/ajax/160563.html

猜你在找的Ajax相关文章