00:00
好了,咱们继续啊。好,我们上节课呢,主要是介绍了一下这个UI线程啊,大家一定要把这个UI线程呢当回事啊。因为这个呢,它是浏览器里边的啊。浏览器呢,它呢使用这个UI线程是做页面展示的啊,要知道这个事。嗯。这边的啊,咱们再来看一看。把服务器洗一下。打开呢。这个新增有问题吧,这样的你写上数据啊。你点它看出来了,所以呢,刚才说了什么东西呢,这个onload你也知道啊,我再把这个onload说一说这个东西。Outload是在我们整个页面加载完毕之后,这个函数会执行。
01:01
啊,当执行这个函数的时候,你要注意。它这个函数里面有可能会有东西,也有可能没有东西,所以呢,大家一定要记住啊,所谓动态网页技术,它不只是动态的你这个页面中的效果。这个javascript代码他都能动态。对吧,是动态我要记住吗?这句话有还是没有啊,就这意思。所以保存之前我们做了做了一个这么一个东西,但是这有缺点啊,这个缺点是什么呢?原先的数据全部都没了,都清空掉了,来大家一起来解释一下,为什么会清空呢?还是他干的吗?U外现场来是这样的,在这呢,最初呢,这个页面呢,是有东西的,这个页面叫什么叫U。ad.cd是吧?它是这个页面。在这个页面上呢,它有一个那个按钮保存,保存之后呢,我们在服务器这边呢。
02:06
在服务器这边呢,有个serve light啊,假如这个就是serve,它一点那个叫什么保存吧,啊一点保存保存的话呢。这个往上点吧,啊保存。保存到我们这个UI线程啊,谁呢就是UI线程,它会把这个请求发过去,那这个时候呢,我们这个页面啊,就会变成什么呀,空白了啊,就没有这个页面了,就是有点a.GB没了啊变成这个了,此时呢,我们服务器端会有个程序执行了。是吧,服务器端的增外开始执行啊,在执行执行过程中可能执行一分钟啊执行一分钟,那么这个页面就是空白多长时间一分钟时间,那这个时候执行结束之后呢,它会返回。啊,返回数据之后呢,我们这个UI线程呢,拿到这个数据啊,再把页面展示出来,对吧,展示的这个最终页面还是叫什么。UAD点什么cab是吧,还是这个,只不过这个是什么呢?新版本了。是吧,这个页面是不是跟上面的页面不是同一个了。
03:03
那虽然页面的名字一样,你想看里边代码相同吗?不同了,它在这个J里面是不是多了一句话叫alert,那在这个里边没有。所以这个是个全新的页面,跟这个根本就没有关系了。你从这个页面到空白全部清扫完,清扫完之后呢,迎接新的内容,那当然这个所有的数据都没了,为什么所有数据没了?因为这个页面压根就不是原先那个页面了。能理解吧,所以大家看一看,是不是整个页面全部刷新了一遍。是吧,这整个页面全部刷新了呀。这叫全局刷新啊,或者叫全部刷新,谁干的意外线程导致的,而这种情况我们客户是不太满意的啊,客户呢来了说这个东西呢,我们这样做不太好啊,因为可能只有用户代码有问题,你可以把这个清空啊,但是你下边的东西不能给我清。
04:00
那这样的话就导致了一个什么问题啊,啊,需要一种技术啊,这种技术是什么呢?页面的局部刷新。啊,液面的局部传输。你见过一些局部刷新的应用吗?比如说百度吧,有没有啊,有没有局部刷新找找啊Java,你看我在写这个Java的时候,是不是下面在动。你看下边整个这个东西是动的吗。来我再加吧,是吧,动力节点没有是吧。应该有啊,动力火车。啊,有是吧,是不是吗。这个。这边呢,是动的吗。但是你想一想这个需要和,就假如说底层有数据库的话,他需不需要和数据库交互啊,需要吗?需要发送请求吗?这个。
05:01
需要加一个事件吗?这个事件叫on down吗?Down down什么意思啊?键盘按下。就是键盘那个键按下去之后就发生一个事件,执行一段代码,这段代码是不是发送一个请求啊,这个请求从那个服务器端拿回来之后呢,在界面在下面是不是展示一下啊,那么大家想一想,这个是不是也是浏览器和服务器交互了,你只要键盘按下去,它就会交互一次,这个数据都是来自于服务器的,你断了网这个就不行了。明白吧,那么大家想一想刷新的整个页面吗?它不是刷新的整个页面吗?他刷新的是哪啊。是不是就这个框啊,这个框是刷新的,所以这种基础叫页面的局部刷新。页面的局部刷新技术啊,这个百度呢,学的是Google的吧?啊,谁最先用的这个技术啊Google。这叫自动补全吗?Google?另外呢,大家可能还见过这种形式啊,比如说在这边呢,有一个什么呢,有一个省是吧,在这呢,你比如说点出来河北省一点,河北省选上之后呢,这边就出来一个框,这个框里面都是河北省的什么。
06:10
是啊,你比如说一点,其中一个是选中之后呢,后边全选是什么。线呢,这是什么?这叫联动啊。这叫下拉列表联动啊是吧,是不是带表现啊,下拉列表联动是不是页面局部刷新,那我们你显示这个线或者显示这个市的时候,这个省变吗。这个框是不是不刷新,整个页面只有哪部分刷新啊,是你点完这整个页面中只有这个位置刷新,这叫页面的局部刷新。明白这个意思吧,所以这种东西就不能用什么线程了,就不能用UI线程了,UI线程干不了,因为UI线程它只要一干扰这个页面,必然会导致什么全部清扫一遍,再迎接新的内容,这显然是用UI线程不太合适的。是这意思吧,所以呢,我们今天呢,要讲一个新东西啊,这个内容呢比较重要。
07:01
这个呢,咱们叫阿贾克斯讲一下页面的局部刷新,讲完之后我们再回过头来做这个东西啊,这个我看一看啊。呃,一个是封装的分析对象啊,还有一个是介绍一下UI线程啊,还有就是保存用户信息之间校验啊,这个要知道。这个存在缺点啊,就是报错之后啊,原页面的信息全部清空了。啊,这是UI线程导致的结果啊导致的结果,所以啊最好什么呢?页面上面什么页面上面变化的位置。刷新吧,啊刷新不要全部刷新啊,尽量局部刷新啊,尽量局部刷新,提高客户的什么体验吗?客户的体验大家知道,比如说像这个吧,嗯,你应该见过这种情况的,就是浏览器。
08:08
在这个浏览器上面这边呢,有一个什么呀,有一个视频啊,你正在看啊。来这边呢,你已经缓冲完了是吧,都已经缓冲完了啊,一个小时的视频完了之后,你看到这了啊,正在看呢啊一个喜剧是吧,正在看。然后呢,这个时候在这个位置上啊。有一个登录框,这个登录框呢,有用户名也有什么呀,密码完事之后呢,还有什么呢?登录按钮,当你这个点完登录之后呢,它可能会在这个位置上显示一个您是什么金牌会员的银牌啊铜牌啊是吧,反正会显示啊,你会员什么什么之类的,你登录之后可能会显示更多的服务吧,那这个时候大家正看到这儿了,连这个视频缓冲完了,完之后一登录这个时候他没有用那个阿贾克斯。他用的是UI线程,会导致什么后果?那你这一点登录,你发送这个请求,你UI线程,你如果负责发送这个UI线程干涉的话,你不将原的全部清空了,迎接新页面了吧,那这个时候这个视频是不是得重新下载了,得重新缓冲啊。
09:14
影响没有,没有影响咱们用户的体验啊,影响了是不是间断了用户的体验。间断啊,两个叫间断,间断了用户的体验,诶如果有一种技术,什么技术呢,就是我在这边,我点这个登录,我一点登录呢,整个网页中只有这个位置,这个框框里面的东西是变化的,剩下位置都不动,那这样的话,用户的体验是不会中断的。明白我意思吧,所以页面的局部刷新还是非常重要的,我们以后呢,大部分在做项目的,现在啊,大部分都用阿贾格斯来做,都是页面上局部刷新,都不会说你点完之后E全刷一遍,不是这么做,全刷一遍用户体验就间断了,所以我们最好页面局部刷新,像谷歌的地图是不是页面局部刷新啊,它能全刷一遍吗?
10:01
我我我我只只看北京,我只看天通苑,其他地方都不看,那全刷一遍啊,不是吧,他现的局部刷新吗?所以谷歌呢,它其实是第一个啊,先使用的这个技术啊,Google啊使用的第一个咱们页内局部刷新,后期呢,我们都是效仿的啊,都是效仿的,所以这个你得知道啊,那么这个东西呢,我们叫aex啊,或者叫阿贾克斯啊,嗯,这个反正的叫法都不一样,因为这个这不是英语单词啊,这是多项技术的合并,这个称不上是一项技术啊,阿贾克斯其实A它称不上是一项技术。以后我就叫,我就叫阿贾克斯了啊。这个不是一项技术。这是多项技术的共同合并的产物啊,是异步的加克和X呢?啊,所以还得先说一下这个东西来。咱们看吧,啊,如果有时间的话,咱们把联动做一下行吗。把联动做一下,选省显示市,选市显示区域或者县,对吧,这么一个功能做一下行吧,咱们这边的话。
11:09
这是这个啊,第17个这个就不看了啊,咱们看一看来这边呢,我考一个东西,我在原先的班级中啊,有一个EXX复制一下,咱们给它考到Co,然后071UV,然后给它CTRLV贴过来。好了,贴过来之后呢,咱们来看一看这个啊,打开它,然后这边呢,有它相关的一些资料啊,这是aja的一个PDM啊啊这个PDF要想看的话,是不得安装那个阅读器啊,阅读器到时候你自己装一下啊,这个我不看了啊,这个是AF的PPT啊嗯,我讲东西呢,不看那个东西啊。下面是A请求中那个中文乱码的解决方案啊,这个咱们到时候再看吧,还有这个是一块的啊,这是从网上呢给大家找的一个帮助文档啊,这块呢,点右键啊,我可以用这个浏览器打开,打开之后呢,我们一起来介绍一下啊,其中有一个对象,这个对象叫什么呢?叫xmlhttp request。
12:11
这很长嘛,大小写要注意,这是全部大写的XL htb require对项,也就是说从此之后我们再也不是用什么呢UI线程去发送请求了,因为这个东西太差劲,它会将整个页面全部干什么了,清空,清空了,变成空白了。所以咱们为了解决页面局部刷新,不用这个线程,我们可以称作用aja线程,或者用阿贾克斯的线程。要想用AX线程,必须使用一个对象,而这个对象叫X,那http request对象,这个对象就可以让我们去启动一个新的线程,而这个线程就和服务器进行交互,而这种机制可以达到页面的局部刷新,它不是将浏览器全部刷新一遍。强调一下,这个对象不同浏览器实现方式不一样,这个对象到底是属于谁?里边的是属于浏览器内置的啊。
13:01
浏览器软件,IE啊,什么firefox啊,还有什么谷歌的C浏览器,他们都内置了一个对象叫SL htt request,但是呢,需要强调一下,这个对象它不一样。这个对象呢,它浏览器不同,它可能内置的不同,比如说你看下边怎么说的啊,呃,下边有没有啊。嗯,往下走。浏览啊,在这了安装快得到了所有的现代浏览器较好的支持啊,自从有了页面局部插件这个对象啊,唯一的浏览器依赖性设及什么这个对象的创建在IE5和IE6里面必须使定使用咱们特定于IE的active X object这个构导函数去创建对象,所以要注意啊,我希望大家能够记住啊,IE5和IE6里边的。他不是这个名。但是这个我觉得也不用记啊,现在A5A6谁爱用啊。是吧,没人用了吧,最低八了。
14:02
那五个六都不八都不支持了,快。是吧,当他都都快都快都快那个什么了啊,撤了都快不维护了。那现在的话就是I5和I6的话,它需要使用这个啊active object,总之呢,您要知道这是属于谁里边,你可以理解它是个JS里边的。就是Java,它和Java有关系吗?没有,它和Java没有关系啊,它就是浏览器内置的一个对象啊,这个对象可以启动一个线程啊,这个线程可以达到页面的局部刷新,不再用什么了。U外线程了,能理解吧,这个对象不同浏览器支持不一样,I5和六里边的用这个啊,叫active object,但是我们一般用都用它就行了啊,现在浏览器一般都不用这个了啊,I有五个IE6。那另外要记住啊,这只是浏览器里边的,和Java没有关系,也就是底层,我问你啊,底层比如我使用PHP啊,或者使用那个,呃,当代呀,这些其他的语言行不行啊行BS架构呢,现在这个对象在哪呢?D这端呢,S这端是不是可以用其他语言啊,所以as呢,可以通用的啊,可以通用的,底层的语言呢,咱们现在使的是Java啊,所以咱们底层写Java什么就行了啊行了,这个的话,文档我先打开来,这个我先打开看一看。
15:17
我先简单介绍一下啊,Aja编成一共几步呢?一共四五步就完事了啊,Aja是一步的javascript and X now,其实aja这是啊,AX嘛,阿贾格斯嘛,这个名字没有一个正规的叫法,英语单词里面也没有这么一个东西啊,其实这这两项技术的合并,其实跟它也没有太大关系啊,那可能是aja里面呢,它有些数据呢,它需要用这个X2来做,来做接收啊,所以这个的话,你就理解成aja,就是咱们理解成跟Java词数是一块的就行了啊,这么去理解吧。异步呢,你现在体会不到啊,异步你现在体会不到,但是呢,你必须得记住啊,同步跟异步到底有什么区别。
16:00
同步是发生等待吧,异步是谁也不等谁,各自执行各自是吧,所以这个得知道,知道同步异步什么意思啊,现在的话这是异步的加速和s aja,知道这几个单词,再强调下,这不是一项技术,这不是一项技术啊,是多项技术合并之后的一个产物了。另外它的核心对象是浏览器内置的一个对象,叫做XL http request对象啊,你要把这个给它记住就行了,行了,接下来我就编成了啊,一共编成四步啊。我们把这几步写了,咱们aja基本上就结束了啊,来咱们看一看,这个东西虽然简单啊,但是呢它呢,其实。用嘛非常广泛,我们点右键新建一个web项目,然后呢,我在这就写上叫AX吧,行吧,然后呢,这个名字叫AX啊,1.4了finish啊no了,来这边大家想想,那肯定得建web项目吧,因为你是个什么架构啊,B架构肯定是web项目啊,所以这个时候开始了,咱们做一下它就是浏览器这端的吧,所以浏览器这端的话,咱们就直接来吧,啊这边我想想把它删了吧,然后呢,我就先写第一个例子啊,点右键新建叫AX点。
17:11
1.a上行不行,那就它吧,啊你想你的A编程是不是一定是在网页上写的,是不是一定在这种X或者直P里面写的呀,啊浏览器执行嘛,发送请求的来这个打开打开来这边咱们改一改,改成什么叫。AX一点A8行了,好了,写上之后呢,咱们接下来就开始了啊,这边呢,我画个页面啊来HT头加上去T啊X1就发送啊向使用啊s mrhttp request使用浏览器内置的啊,浏览器内置的Ms request对象啊,向web服务器发送JA请求啊JA请求解决页面的局部刷新吧,解决页面局部刷新啊当前例子主要啊,主要是基于什么呢?基于钙的请求的啊,它也有get的请求和postose的请求。
18:12
明白吧,好,这边呢,我写上body,然后呢,我就来一个什么呢,来一个这个按钮,来一个这个框嘛,啊文本框,然后name呢,我写上去,这个name呢,我写上啊叫user nameme吧,Username啊然后呢,我在这呢有一个那个按钮啊叫保存按钮,嗯,按钮来button button写上,Button写上,然后value呢,我写上这叫保存,好这边我来个换行,我是这么个意思啊,我先来部署一下这个项目啊先告诉大家我是啥意思啊,点走有有它吗?这个啊又部署到外边ABS了啊叫aja好点finish.ok然后把服务器启动,启动之后呢,把它打开,打开之后呢,你访问叫AX,这边呢写上怎么写啊,写这个叫127.0.0.1端口号八零可以省略斜杠或者干什么呀,找AXAX方向界面就有了。
19:07
这边我希望写上去,比如说张三,我写上张三之后,我再点保存,如果这个张三已经有了。我就在这个位置上写一句话,红色的啊,我说什么张三已经存在,请重新填写了,但是你要记住啊,你这出现这个信息会出现左边张三不能丢,页面局部刷新,整个网页中只有哪个位置刷新,只有这一个位置刷新,是不是这个信息是刷新的呀啊。就如果你要是你想一想,还是用我们原先那种方式,你点保存,如果这边你写个什么farm,然后这边写个action,你想那个路径,你想想这种方式,你点保存它是怎么发的,是不是意外线程发的呀,意外线程发它会不会把这页面全部刷新一遍啊刷新了,所以这个时候咱们不用这种方式,这种方式不好。不用,你如果不用这种方式的话,你得换一种方式,就是我们就是我们要马上讲的那个A,因为局部刷新的行,那这边的话大家想是不是该写上去啊,行吧,这写上啊,就这个用户什么姓名吧,啊用户姓名就这样好我们这边刷新一下。
20:12
好,写上它,然后点它就行了。你点到这出现了信息,好,那么接下来咱们在这呢,你在哪出现信息,在这个位置出现信息是吧?你既然是在这出现,那我应该会在这加个div或者span吧,加个div好还是span好。啊。加div还是span,将来信息是肯定要显示在这的吧,加span啊,不要加div div是换行的,Div读弹行,你忘了吗?加SPA吗?还加SPA来就是加,加span怎么加呀,就不是在这个后边吧,加一个span就行了,来span,这个span的话,咱们就加上去一个提示信息吧,这个提示信息谁啊?就是your name吧,Keep keep your name啊,Your name的一个提示信息,好,将来信息就显示在这了,这个信息是动态的。
21:03
啊,动态的信息。这这里是刷新的吧,啊,这里是刷新的啊,哪块呢,就是这一块是刷新的,剩下位置都不刷,这这一块是刷的,就是span标记里边是刷新的,所以现在呢,我就先把它删了啊。好,那这样的话就会在这呢,就check叫yo,点什么name吧,好,那这样的话,我是不是在这写上一个函数啊,来把这函数写一写,这边写上啊来script写上来写上function吗?来再写上,好这边测一下alert叫测试啊测试好了,这边打开刷新,好刷新之后点它来可以吧,没问题啊,这是肯定能执行到的,你点这个它就会执行这个,那只不过先原先我们是怎么写的,就在这啊写了一个放对吧,Action写上,把这个方写呢,放到下边,放到下边之后呢,你这边来,这样我缩进一下啊来缩进去这边呢,咱们在这是不是原先是叫什么documentment.sums是吧,写上点submit是不是就提交了,这种方式是UI线程。
22:10
明白吧,好,把这种方式写上吧,这算了,不写了啊,这UI写上不写了,不写这种方式,不用这种方式,好,这个X我去掉不用了。那么接下来诶,大家需要把这个用户名传进去吗?是不是传的一个方法呀,是传吧啊。但是不传的话是不是也能做呀,加个ID行吗?是不是也可以啊,然后加ID方面也给它去了啊,不写了。来,那这样的话,我在这呢,写上去这是个什么your name吧啊这个时候调他调的话,你这获取吧,要获取什么用户姓名吧,怎么获取啊,这user name document.get element by什么呀,Yo name写上后边咱们拿到点get这去就可以了,这就行了啊这就可以了。这是获取用户姓名啊。
23:02
来,我们弹出去看这用户姓名能不能拿到啊,来user nameme刷新这边写上去没问题是吧,这种方式可以啊可以。好了,咱们再换一种方式啊,输掉换一种方式怎么做呀,来把这个复制一下。这个我注掉了啊,来这边呢,我复制一下传三嘛,多多举几个例子啊,接过来,然后这边呢,我就写一个什么呢,Form吧,加个form啊,加个form,加上form之后减了啊减了之后放到下边,然后接下来呢,还有一种传单方式呢,希望大家也掌握吧啊这种传单方式在这写一个什么nameme,写上nameme行吧,写上name之后呢,我们写上去叫user form行不行,写form,这怎么传啊,叫user form点谁呀,Username啊点什么来着?行吧,这种方式也要会啊,这边写这个函数的话,大家想怎么写啊,是不是得换一种方式了,来方程方程写上啊,这边这个函数这边写什么是u name。
24:12
相等。这里面编程需要几步呢?需要四步啊来第一步是创建什么,创建aja的核心对象SLHTTP。Request啊,这个对象可以启动啊,对象可以启动啊,一个线程和服务器交互吧,和和服务器交互啊。代替谁的UI线程的啊UI线程的。第二步呢,就是什么呢?注册回调函数啊,注册回调函数,第三步就是开启通道啊,开启通道,但并不发送请求啊,并不发送请求,然后接下来第四步是什么呢?就是发送请求。
25:07
啊,如果是post和提和提交数据啊,这个不写,这是概率请求啊。这样好了,这边我们先看看这个这个能拿到吗?这个pass啊加上去另外看看啊来刷新随便写上ABC走行吧,能拿到啊能拿到啊,这个能拿到创建分定怎么创建呢?来X request我就这么写吧,行吧,我一般都这么写,我就一般都不写全了,有的人这么写啊,叫什么X什么h request这么写怎么还有还有人这么写XHR这么写更简单啊,但是我个人习惯了就叫X request了,行吗?Angry。那你也可以这样啊,叫XHR就行了,X request,然后呢,这边呢,我给上去判断一下,得判断一下啊if如果是。
26:07
如果是什么呢?Window啊,判断一下浏览器兼容shttb request这个条件成立的话,我就你用哪个对象就行了,S mxttp request啊,那当然呢,如果是其他的,比如说什么A和I6叫active X object啊,那这个时候呢,As request就又一个叫什么active as object这里面写上啊,叫做TB。叫Microsoft这个不用记啊,好,这个固定解码这个创建完了,解决浏览器兼容问题啊,IE5和IE6啊。内置的对象是active。
27:03
一般浏览器都是这个吧,一般的啊,大部分大多数啊,浏览器都是这个内置对象。X,那像这个对象串出来没有,我们是不是应该看一看啊,X request吧,好了啊,那这边X request request啊。好了,那么这边呢,我刷新一下,刷新之后呢,我就点它有吧,有对象啊有对象有这个。行了,咱们就今天上午就到这儿吧啊,该吃饭去了啊,下午咱们再继续。
我来说两句