00:00
好,讲义呢,我已经打开了。阿贾克的j query这个课程呢,它讲的都是前端内容,分两个章节,第一大章呢讲阿贾克斯,第二大章呢还讲j query,今天呢主要讲的是阿贾克斯这部分,阿贾克斯这个呢不难,首先呢,第一个概念呢,我们讲的是叫全局刷新和局部刷新啊,全局和局部刷新。好,那我们来看看。我们的第一门课程啊,第一个课程阿贾克斯好,第一个概念呢,叫做全局刷新和局部刷新。好,什么概念呢,我们现在呢,来看一下我们的网易163。好,这是个网站,在网站的上面这块有很多的标题,我们来选一下呢,这个汽车。
01:03
汽车选中之后呢,现在这汽车的内容,大家可以看到,现在你的浏览器中,当前的这个标签页中包含的是全部的汽车的相关的资讯信息,这里边儿呢,有降价榜,这是红色的。然后呢,还有汽车的图片,当点击某个链接,比方点这个威兰达,当你看到当浏览器中现在放置的信息都是这个威兰达的这个数据。那你再点一个随便点个链接啊,比如点一个手机吧,那你看现在这个页面中的数据已经全被填充为手机的信息了,那说明呢,当前的这个浏览器,它的数据已经被新的内容所替换了。那这种方式呢,就叫做全局刷新,也说你浏览器呢,发了请求了,然后。
02:04
这个数据。把你当前浏览器的内容全部进行了一个替代,进行了一个替换,整个浏览器的数据全部被刷新成新的内容了,这叫做全局刷新,全局刷新啊,全局刷新。那什么叫做局部刷新呢?看下这个内容,回到汽车里边,我们看看这个em里边啊,这里边呢,有我们这个凯拉克。还有呢,汉兰达图乐这些图片,以及呢,还有上面的这些文字信息,大家看这有个叫选择品牌的下拉列表框,我点一下。然后呢,选个奥迪。再看选择车系,这里边我们看到是不是有奥迪的所有的车型啊。包括A6啊,Q5啊,还有进口的奥迪A5啊等等,全部都有。
03:00
我选一个没问题,现在呢,不想用奥迪的,我想选择一个,比方说这个罗密欧的,那你看选择车系里边这个数据是不是又变了。再选一个。比如说选一个宝马,然后车系中宝马变了,数据变了,那说明我现在在执行选择这个品牌的时候。对应车系是跟着变的,数据发生了变化,但是你注意。我们页面里边的这些原有的页面数据,还有图片没有发生变化吧,没有改动,只有我涉及到的部分页面数据发生了改变,就叫做局部刷新,它相对于整个页面而言。只有部分的数据发生了变化,实际上也就是按需变化,我现在只是需要奔驰的车型的这个数据嘛,它只是部分发生变化,按需来获取数据,那这个数据肯定不是在页面中的,肯定得需要呢,你访问你的服务器来获取最新的相关数据,局部刷新,那局部刷新有什么特点呢?
04:20
局部刷新时,我们的浏览器它本身没有动啊。你注意了吗?浏览器这个页面没有动,地址没有变化,浏览器的数据没有全部发生变化,只有部分发生了变化,那就说现在这种局部刷新呢,是说我们是在这个需要变动数据的地方,数据发生了变化,整个浏览器只有部分内容发生变化。那这么做有什么好处呢?那就是说我们的数据只是变动了很少一部分,而原网页面的这些图片显示啊,还有文字呀,还有这个样式不用重新的加载,这样用户的感觉都很好啊,体验性很好用,感觉你这个页面啊,诶效果非常的友好,而且呢,数据的变化呢,只有部分发生改动。
05:21
而且呢,这个速度非常快,因为你只是部分数据发生变化吗?需要什么获取什么,在网络上你传送的这个数据量很小,这样的话给用户的感觉效果就很好,毕竟你的数据只是部分发生变化了吗?不像是这样,我说你点一个冒险家,你会发现在我点的过程中,页面是不是有变白的部分呢?就是这页面在加载数据时,数据没有加载成功时呢,它会这么一个变化,给用户的感觉呢就不太好,而且如果你的网络比较慢的话,可能会造成呢,长时间看不到页面的内容。
06:01
而相比这种局部刷新的话,你看我不管选什么。对其他已经存在的这些内容。说没有影响啊,这样的话用户的感觉就非常好,而且我可以在页面中通过这样的局部刷新来获取很多新的数据,所以局部刷新呢,在现在来说呢,是一个应用非常广泛的一种技术,很多的操作中都用到了局部刷新,包括其他部分我们再看看。嗯,股票吧。股票大家看现在呢,我到达是股票这个页面,这有个搜索。比方说我随便搜索一个代码,你看呢,这块是不是就有这种股票的信息了,就出来了,但是呢,你会发现我在这搜索过程中,页面的其余部分是没有发生变化呀,那就说这就是一种搜索,只改变的是部分数据,这叫做局部刷新啊。
07:00
好,这是局部刷新,再看看我说这个概念啊,大家有什么问题没有局部刷新。全景刷新呢,是整个页面全都发生变化了,比方说你点一个四川长虹,你会发现浏览器被全部进行替换为新的数据了,这个新的页面呢,数据量一个大,传输可能比较慢。再一个呢,页面的数据呢,需要重新的进行一个显示,用样式啊,还需要显示这么多。它渲染的时间可能会比较慢。而局部刷新呢,我只是部分的数据发生了改变,速度快给用,体验性呢比较好,这是局部刷新。行,这个概念呢,应该比较简单啊,我给大家呢,简单说一下全局刷新。全景刷新呢,是说整个这个浏览器呢,被新的这个数据覆盖好在网络中。
08:06
啊,我们要传输大量的数据,是可能比较多嘛,而且呢,你的浏览器需要去加载。加载渲染。好渲染页面就是说你的页面的颜色呀,图片呢,都是需要重新进行加载才行嘛,所以这是全局刷新,局部刷新呢,那就是说你在这个浏览器的这个内部。然后内部发起请求,获取数据,然后是改变页面中的部分内容。
09:00
而其余的这个页面无需加载和渲染。好和渲染,你只是发生了部分的变动,那这种方式中呢,网络中数据传输量少啊,容量少啊,然后呢,给用户的感受好。啊,感受好,这是局部刷新。好,那现在呢,我们要用这个局部刷新,那局部刷新这种技术呢,就是我们第一节课主要讲内容,阿贾克斯它是用来做局部刷新的,阿贾克斯呢是用来做这个局部刷新的,就是说阿贾克斯它的核心就是局部刷新。
10:00
那局部刷新怎么实现它呢?我们继续往下来看。
我来说两句