AJAX异步请求原理是什么?底层是如何实现的?

XIAO 2020-03-27 12:37:27 java常见问答 7559

有相关软件开发经验的朋友想必对ajax的异步请求是十分的熟悉了,虽然你可以熟练的使用AJAX技术,那么是否也清楚它的底层实现呢?下面我们就一起来看看AJAX异步请求的原理是什么呢?

我们在搜索引擎的搜索框中输入一个关键词,通常都会出现很多联想词。这些通过联想预测的词是如何从后台传输到当前浏览的网页,并在输入框下面显示的,其实就是ajax的问题了。或者说,在地图类应用中随意地放大缩小页面时,整个网页没有刷新,那么页面中新岀现的许多街道细节是怎么从后台传输过来的呢?网页没有刷新是指一个空网页渲染到屏幕上,单击网页中的一个链接后,又打开了一个新的网页。

以上存在两个问题:

网页没有刷新

本地网页从后台获取了新数据(联想词和街道细节不会预先下发,因为后台也不知道用户的后续操作是什么)

JavaScript 和 XML 都是成熟的语言和技术标准,已经存在了很多年,这项技术组合直到被谷歌在 Google Map 项目上应用,才展示了新的威力。它主要解决的就是不用刷新网页,就能和后台交互获取数据,并应用于当前网页的问题。

来看看网络抓包的结果。这个结果是我们在搜索框中输入“新年”两个字后, 在一次网络请求中返回的。这个结果就对应于下拉列表中的联想词(该字符串被在线转成了可视化的 JSON 格式)。

{

"s":[

"新年的来历"

"新年放假"

"新年的英文"

"春节"

]

}

发起网络请求。发起网络请求的能力由浏览器的内置能力提供,所有的浏览器都提供了 XmlHttpRequest 对象,它可以由网页调用,用来连接一个特定的地址。

无须刷新,可动态操作网页。我们先引入术语 DOM(Document Object Model,文档对象模型)。我们可以将一个网页想象成一个人,一个人的运动系统由骨骼和肌肉组成,DOM 相当于骨骼,定义了一个网页的结构,以下代码对应了一个 最简单的网页的骨骼和框架。

<!DOCTYPE html>
<html>
    <body>
        <h1>我的标题</h1>
        <p>我的段落</p>
    </body>
</html>

可以看到,html、body、h1、p 等标签构成了这个网页的 DOM 模型,而 JavaScript 就是为操作 DOM 而存在的,可以动态地操作整个网页。有了这些基础知识,我们再来梳理整个“联想词”的工作过程。首先,在百度搜索引擎中输入“除夕”,这时利用 XmlHttpRequest 对象发起了对百度后台的一次请求。随后,这次请求返回了若干个联想词的 JSON 串,这时百度网页中的 JavaScript 程序开始进行处理,解析 JSON 串,并将解析后的字符串插入网页的 DOM 结构中。 页面经过重新渲染,在当前页面上展示了一个下拉列表框,并填入刚才从后台得到的联想词。

综上所述,我们可以知道AJAX 是一项用于异步拉取数据并展示在当前页面的技术,这对需要延迟加载数据和触发式加载数据的页面有很大益处呢。

AJAX相关原理就聊到这里了,欢迎关注本站了解更多相关内容哦。