Ajax简介

Ajax,全称“Asynchronous JavaScript and XML”,即“异步的 JavaScript 和 XML”。其核心是通过 JavaScript 的 XMLHttpRequest 对象,以一种异步的方式,向服务器发送数据请求,并且通过该对象接收请求返回的数据,从而实现客户端与服务器端的数据操作。

对于 Ajax,具体怎么理解呢?举个简单的例子,例如网易的首页,顶部有一个登录框,如图 1 所示。
网易首页

想要登录网易,就要输入账号和密码。那么系统是怎么判断你输入的账号和密码是不是正确的呢?实现的原理都是先将前端的数据传递给后端服务器,然后由服务器来判断:如果账号和密码都匹配,那么后端服务器会返回信息来告诉前端页面,最后在前端页面中显示登录成功的信息。

如果没有采用 Ajax 技术,前端页面更新后端返回来的数据时,整个页面都会被刷新。也就是说,凡是想要在前端页面显示后端返回来的信息,都要刷新“整个页面”。但若使用 Ajax 技术,我们只需要刷新登录栏目那一部分即可,其他部分都不用刷新。

再举一个例子,一个页面一般都会有很多栏目,有些栏目是实时更新的,例如奥运实时奖牌榜,如图 5 所示。
实时奖牌榜
图 2:实时奖牌榜

如果每更新一次数据都刷新整个页面,就会白白浪费很多流量;但若使用 Ajax 技术,我们只需要更新奖牌榜那一栏即可。

Ajax 其实非常简单。对于 Ajax,可以用一句话概括:Ajax 能够刷新指定的页面区域,而不是刷新整个页面,从而减少客户端和服务端之间传输的数据量,提高页面速度,使得用户体验更好。由于 Ajax 会涉及与后端的交互,因此小伙伴们需要具备一定的后端基础,才能更好地去理解 Ajax。

相关文章

问题背景 最近小伙伴提了一个希望提高后台下拉列表可操作性的...
// n位随机数生成 function randomNum(n) { let sString = &...
HTML是HyperText Markup Language的简称,中文名称:超文本标...
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现...
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预...
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网...