00:00
哈喽,大家好,这个小节呢,我们来介绍一下阿贾克斯。阿贾克斯呢,全称叫做javascript and X。啊,就是异步的GS和XML。通过阿贾克斯这个技术呢?我们可以在浏览器中向服务器发送异步请求。最大优势就是无刷新的获取数据。注意,重点是无刷新。网页不需要刷新就可以呢,跟服务器进行通信。这里要注意,阿贾克斯呢?它不是新的编程语言。在这呢,依然使用的是我们的GS。而阿贾克斯呢?是将现有标准组合在一起的新的使用方式。那么阿贾克斯呢,在现在网页当中呢,使用的。法,这个场景特别特别多。各大网站呢,都有这个阿贾克斯的一个身影。我们来一起看一下。比如说第一个。
01:00
百度。我们平时呢,会在百度里边搜索一些东西,当然不光是百度啊,还有什么啊,这个淘宝啊,京东啊,搜索框这个效果是一样的。我们这儿比如说输个A。BCD。你会发现呢,在下边儿会有一些相关的关键字提醒。这个效果呢,其实就是的阿贾克斯。因为这个数据呢,它不是本地生成的,而是向服务器呢发的请求,然后数据呢,从服务器返回回来的。啊,那么这样的话呢,用户可以很方便的看到这个关键字相关的一些关键字。体验的话会比较好。好,这是第一个,第二个的话呢,注册页面。我们很多时候呢,网站注册时呢,选择一个自个儿喜欢的用户名。那么这个时候的话,会会可能会给我们来一个提醒,说此用户名呢,太受欢迎,请更换一个。他怎么知道的呢?这里用到的就是阿贾克斯。
02:02
他把我们所说的用户名呢,来了一个请求。给这个服务器去校验用户名呢,是否存在。啊,然后呢,给我们返回对应的结果,如果不可用。就给我们来一个这样的一个提醒啊,红色一个提醒。好,这是第二个注册这一块。第三个呢,淘宝网页。在这个网页里边呢,也是用到了阿贾克斯,大家注意观察右边的这个充话费。等一下,在这儿充话费,旅行车险游戏。这块内容的话也用到了阿贾克斯,大家注意观察,我的鼠标马上就要放到充话费身上了,走。你会看到刚才这块呢,有一个loading的一个效果。那么这里的话呢,其实最开始。这些内容。啊,咱们那页面里边都是没有的。而当我把鼠标放到充话费上面之后。他才向服务器发来请求。
03:00
啊,然后把这个结果拿回来。拿回来之后呢,在这块做一个呈现。这样做的一个好处就是懒加载。按需加载,用户呢,看的时候我再请求,用户不看的话我就不请求,这样的话资源的利用率就会很高。啊,咱们整体页面的一个加载速度也会变得比较快。啊,所以说阿贾克斯的话,还可以提高咱们网页的一个加载速度。再比如说京东这边。啊,我再重新刷一下左边这个地方看好了。这是一个一级菜单,一级分类。当我们把这个鼠标放到上面之后,你会发现右边呢,也会出现对应的一个二级和三级的这样一个分类。好,那么你会,如果你细心观察,你会发现呢,在右边这个地方呢,它会出现一个啊,一个短暂的空白。那么其实这块内容的返回也是用的阿贾克斯。他向服务器发请求,就是当我们把鼠标放到这个家用电器上面之后。
04:05
向服务器发请求,然后服务器把这个结果全部返回,然后他把结果在这做一个呈现。那么在这呢,所使所用的一个思想也是样子的懒加载。就是用户看的时候我在加,如果用户不看我就不加载了。是这样一个效果。好,那下边的话再来看一看今日头条。往下滚动滚动滚动滚动。哎,你可以看一下啊,当我滚到底的时候啊,当我滚到底以后,你发现滚动头呢,它的位置发生了改变。而且高度呢,也发生了改变。那么在这儿呢,它用到的也是阿贾克斯。当我把页面滚到底以后。啊,到底以后,那么这个时候向服务器发送阿贾克斯请求。然后呢,从服务器呢,返回新的数据。通过GS。我们把数据做一个处理,在页面当中动态创建新的节点,让整个内容呢啊,再次做一个填充。
05:07
这样来我们整个的一个内容的内容区域就会变高。啊,变高之后的话,然后用户就可以继续向下滚动。这个效果其实跟朋友圈啊,还有QQ里边那个说说啊,效果是一样的,哎。快到底的时候,我们再次加载。这样的话呢,也是用户不需要刷新就可以看到更新的数据。再比如说这个网站掘金。这个网站当中,这个网站啊,大家注意观察,我点击。我点击。我点击你发现的内容在变化,但是呢,这个页面它并没有刷新。而在这块,他用的效,他用的这个技术也是阿贾克斯。咱们常规网站的话一点,诶整个页面就会刷,你看点这个。点这个它内容呢,就不会出现一个空白。啊,而且这个地方呢,也不会不会来一个旋转。
06:00
证明咱这网页根本就没有跳转啊,而这个网页它也是用的阿贾克斯。不光是这些网页啊,其实很多很多网页都用到了阿贾克斯。就是因为阿贾克斯的话,它可以在页面不刷新的情况下向服务器呢发送请求。然后呢,实现一个数据的一个交换。啊,这样的话,咱们的数据交换更加的一个快速,用户的体验的话也会更好。好了,那么这个小节关于阿贾克斯的一个介绍,以及在咱们网页里边一个应用,我们就先说这么多。
我来说两句