00:00
啊,今天我和大家一起学习一下阿贾克斯基本入门的一些知识。啊,首先啊,我将从阿贾克斯的简介及原理,以及同步异步的区别,还有杰克瑞阿贾克斯的几种请求方式,以及几个小范例来给大家详细讲解一下。首先,什么是阿贾克斯?阿贾克斯及异步的JS和XML是一种创建交互式快速动态网页应用的网页开发技术,它无需再重新加载整个网页的情况下就能够更新部分的网页。嗯,它的主要作用可以用于呈现一些动态的。还有数据显示交互啊,也可以进行数据的交换与处理啊,对于数据的进行异步的读取啊,还有数据的处理与绑定。啊,然后我们都知道传统的一些外部应用,它通常多采用一些同步的处理方式啊,什么是同步处理,同步处理及就是浏览器。通过用户接口,客户端通过浏览器,通过用户接口向服务器端嗯发送HTP请求,然后服务器端在与那个数据库等存储系统进行交互,获取业务所需要的嗯那些数据,然后经过相应的封装和处理,返回到客户端进行展示。这整个过程连续。
01:22
也就是说,嗯,当客户端发送一个请求时,我们必须等待客,等待服务器对它响应以后,才能进行下一的那些后续的操作。嗯,然后传统外部应用用户点击一个链接后啊,他需要等待直到另外一个页面完全响应刷新,但是如果我们仅仅要更新一部分内容,也不得不刷新整个页面,这样当我们对高并发以及带宽需求比较大的一些。呃,系统页面时啊,就会造成一些比较大的效率的问题,嗯,就比如我们可以看一下下面这一个代码块。
02:03
这里是通过阿贾克斯啊来嗯,后台进行一些请求。啊,这里我们可以看到当阿贾克斯部分的代码啊,没有完全的执行完毕啊,服务器端的响应啊,没有啊,服务器端对客户端的请求还没有完全响应。嗯。方二是不能执行的。也就是说,只有当服务器端完全。嗯,响应了客户端的请求,嗯,才会执行F1F2 f1f2完全执行完以后才会执行FUNCTION2。啊,这样效率会相对来说会低一些。啊,针对这种问题,然后阿贾克斯多采用异步方式来与后台交互,所谓的异步就是啊,用户在浏览器通过JS调用阿贾克斯引擎,阿贾克斯引擎发送HTTP请求到服务器,服务器在与后台业务系统进行交互,获取业务所需到的数据。
03:00
然后封装形成或者XML等数据以后返回到阿贾克斯引擎,然后阿贾克斯在对那个元素,也就是我们常说的HTM进染。然后阿贾克斯异步请求,嗯,简简明来说就是呃,当我们呃客户端向服务器端发送请求时,我们无需等待客户端服务器端完全响应。我们可以继续执行后续部分的代码。啊,然后阿贾克斯异步处理的优点就是它能够减轻服务器的负担,它只需要从服务器获取需要的数据。嗯,他不需要刷新整个页面啊,你需要刷新哪一部分,就只刷新哪一部分,减少了用户等待的一些时间。然后同时他对那个客户端的一些工作,嗯也减轻了,嗯也提高了客户端的一些嗯体验,节省了那个服务器端的网络资源。同时它是基于标准化的对象,它不需要额外的插件,它其实就是一个标准的。
04:06
嗯,代码。然后我们这一次讲的主要是基于J来实现阿贾克斯的请求啊,所谓的J就是一个丰富的一个JS库啊,这个后续给大家。重发一下。然后阿贾克斯最重要一点是它能够实现前后端的分离,在一些重要的一些企业或者公司中,它开发现在多采用前后端分离的一种方法,然后前端页面只需要嗯,编写样式,然后内容的部分后端只需要进行业务相应的处理。然后通过阿贾克斯可以实现前后端的交互。然后我们基于瑞阿贾克斯的请求方式主要是有三层。啊,所为三层就是最底层,也就是原生的方法,就是点二甲克斯,这种方法来说相对来说是比较复杂的,但是它的功能也是最全的,也是目前使用最多的。
05:02
然后第二层方法,嗯,就是对点阿贾克斯的一种简化,嗯,它多有就是漏,或者点get.post。嗯,这个方法它其实就是在点阿贾克斯中。指定向服务器端请求的方式为get或者post。然后第三层的方法就是点script和点它其实就是对二层的进一步简化,它相当于是指定指定。这个data tap就是一个参数,一个属性,它指定了你请求的从服务器端请求返回的数据的类型数据,嗯,然后script中data tapscript。啊,然后。由于阿贾克斯这个方法是最常用的,也是嗯,就是使用最多的,功能最全的,所以我们就详细讲解一下这个。
06:06
然后点阿贾克斯,它的基本语法是嗯,就是一个点阿贾克斯,然后一个中括号,中间是就是各种属性值对的这种格式。嗯,什么是属性?对,然后我通过一个详细的例子来给大家介绍一下。嗯,就是我提前写好了一个小范例,嗯,首先是一个HTML面的HTML部分,我就是定义了两个ul标签,两个列表,用于就是存放数据。嗯,然后我们可以看到,在这两个ul中,我没有添加任何的LR,也就是这只是一个空链表,它没有任何的项,学过前端同学应该很熟悉,嗯,在幼儿中必须要添加LR标签,才能指定列表中的具体的某一行、某一列。嗯,这里我们LR标签是通过。在JS代码部分,通过阿贾克斯获取Jason数据来生成的,一共定义了两个,然后还定义了一个div。
07:08
这里是用来从后台获取异步请求的一个额外的一个测试的。然后在那个JS部分。嗯,我们首先先需要从那个引用一个,呃,科瑞这个库。啊,这个一会儿发给大家。嗯,然后啊,JS代码部分首先在1DOLLAR function,这只就是指页面加载之后就调用的一个函数。其中的函数在这个function中的数就是在页面初始化以后直接加载。然后通过通过一个点阿贾克斯一个小号里面是属性值对,然后属性值对,嗯,它其实是的一种数。常用的一种数据格式,这里我定义了一个test test.jason的一个数据格式,用来就是模拟从后台返回的一种数据,因为现在从服务器端到前端传递的数据啊,多维或者XML那种形式的数据。
08:11
啊,这种son,它其实就是数据交互的一种类型,一种式种式。这里我们可以看到。啊,通过一个中一个大括号括起来,然后中间定义两个嗯,就分别为student和Co的两个数组,这是两个Jason数组,这个Jason数组中一共三项,每一项用一个中括号括起来表示是一嗯,它每一项它是JA森数组中的每一项,同时它也是一个Jason对象。嗯,也就是说,在一个名为student的数组中,存放了三三个对象。然后每个对象中又有两个属性值,对,第一个属性是S,它的值是张三,第二个属性是sid,它的值是零一,其他两个,嗯,对象也是一样,在cos这个数组中啊,它也是有三个那个对象,每个对象也是两个属性值。
09:09
分别是cid是高等数学和001JAVA。然后了解了什么是属性值,对的,大家再来看这个点,二贾格这一部分,它其实也是一个属性值,对这种格式它的属性是它的属性主要有tap,嗯,它的值是get,有URL,后面是嗯,地址,还有data tap,然后asy这些。它分别是什么意思呢?就是这个tap这个属性就指定了你前台后台请求的一种方式。嗯,咱们学过计算机网络的同学应该知道,就是。嗯。嗯。请求的页面就是那种网络请求的一种几种方式,一共常用的是有八种,嗯,但是呃,一共是有八种,但是常用的是只有get和POST2类。然后。Get和post具体什么区别啊?一会给大家通过一个范例讲解一下啊,这里我们先指定的请求方式是get。
10:07
然后。嗯,URL属性是指定那个你请求资源的那个地址,这个地址可以是一个静态的文件。然后他就直接返回这样一个数据,数据类型。然后也可以是比如是后台那种传递过来的后台接口,比如是spring的那种接口。然后这个data tap这个属性是指定从后台返回数据的格式。嗯,常用的是Jason和test。两种格式,嗯,格式就不用多说了,还有一种text text字符串。嗯,默认的是指指定是。还有syac指定的是是否请求,认的是的则为异请求。
11:00
嗯,刚刚一步和那个同步的那个区别也给大家讲了,然后你的时候就会同步请求。还有一个是success属性,这个属性是指一个成功的回调函数。嗯,什么意思呢?就是当你从服务器端成功的服务成功的得到了响应,服务器端返回数据以后。嗯,然后通过成功的回调函数对数据进行返回,在这个函数中,你可以对返回的数据进行相应的处理,比如你可以在页面中显示这些数据,或者数据进行处理,然后弹窗告诉在客户端显示等等。嗯,这里。嗯,我们先运行一下这个代码看一下。
12:11
嗯,大家可以看一下,首先是一个弹窗啊,这个弹窗对应的代码部分就是这个D,这个D,这个function,这个成功的回调函数里面一共两个参数,一个是D,这个名字可以是自己起的,下面对应起来。CD第一个位置的这个参数指定的是返回的数据集,就是你从服务器端获得的数据,然后第二个是,也就是啊,一个状态代码,比如你成功了,就是success。也就是这里的这个,呃,也就是就是success,还有一个就是。嗯,那个。或者是error就是错误,就是没有成功的响应啊,这里我们首先是返回它的结果,因为指定是Jason类型,所以这里是一个刚刚是一个Jason数组的格式,这里它是返回的是状态代码,也就是success,点击确定以后。
13:07
就会执行后面的程序,相应的对那个返回的结果进行处理。我们可以看到,就是这里我们是对那个回的这个结果指定它具体是哪一个组。这里这个A1这个数组指定的是student,这个son数组指定是cos这个Jason数组。然后通过一个for循环对这个数组中的每一项进行显示,拼接成一个字符串在这里啊,通过循环啊,从零循环到它的这个那个字,这个数组。然后指定它的具体的属性。嗯,比如是这个。如果I是一的时候,就指定了一项,也就这一项的S这个属性的值,也就是张三。然后通过三次循环,就是拼接成一个字符串ST以后。
14:03
嗯,在循环结束以后,通过点HTML对,然后将这个str渲染到页面上。然后后面这个是cos这个数组的相同的一种渲染。然后我们可以看到。嗯,Jason数,嗯Jason那个文件中的数据就这样就是被显示到页面上。同时我们这里如果地址我们知道,就是异步处理的话,就是你在响应的同时。啊,就是也会执行后续的程序,但是这里就是。我们故意给他设置一个错误的地址,然后。运行一下,我们可以看到它后续的那个这一个函数是不会受到它的执行,是不会受到任何影响的。所以这就体现了一步的特点。然后这是一个简单的一种Jason的啊,这种Jason和阿贾克斯数据交互的一种。
15:04
方式。然后刚刚给大家就是提了个问题,就是get和post的区别。嗯,Get和post,它是两种请求的方式,嗯,它们的区别主要体现在,一是参数的传递方式。然后我们知道get的请求,它的请求头通常是在URL字段里面,就是它的地址栏里,我们可以就比如这一个,它这种参数是通过在地址显器。这样做他就会存在安全隐患,如果一些黑客或者一些不法分子就是想要盗取一些数据的话,对你这一个进行拦截,然后进行处理,就会获取你整个的机密,这样显然是不安全的。然后post是这个。它的数据存放在它的。头部字那个URL字节之外的那个主体字段里面。
16:00
然后大家知道一个HT,一个文是由那个头部字段和主字组成的。然后主体,呃,头部字段是存放一些控制信息,然后主体字段是存传输的数据,这样的它是隐的存在主体字段里面是通过加密的,是相对比较安全的。啊,然后什么时候用get和post,首先考虑到安全,我们首先选用post,其次在考虑数据大小。就是get,我们知道是通,它是通过URL。图这个那个地址栏里面拼接,然后传递的,这样它如果传递的参数一多,它就会容易就是臃肿,并且传递速度效率就相对来说慢一些。嗯,而则是通过body传递的,它的容量就大一些。但是。Get有它的好处,就是它是具有缓存的功能。它就是你这一次请求,它会缓存在你的浏览器中,你下次请求的时候,它不会再去后台要数据,它只是通过浏览器的缓存就可以获得数据,这样效率会更高一些,而这个盖,这个属性,这个缓存的功能在库存中是没有的。
17:12
我们来看一看详细的例子。这里我提前编写了一个基于那个spring后台的一个简单spring和阿贾克斯的一个简单的登录的功能。嗯,然后。这里我是通过分别编写了两个方法,一个是阿盖的方法,一个是POS方法,实现那个那个向后台请求的阿贾克斯的。代码。首先大家看这个get的方法,我定义了一个函数叫做log,这个log就是定义,然后两个变量。嗯,分别是username和password,他们分别存放了。User username和PASSWORD2个。嗯,两个那个ID选择器指定的input这个输入框中的value的值。
18:02
你在输入框中输入什么这两个字,这两个。嗯,那个变量就会获取它的值,然后把这两个值作为参数拼接在它的那个URL里面。大家可以看到就是一个简单的字符串的拼接啊,指定它的值为啊,这个变量的值,也就是它前台嗯嗯,带那个览输入的值,Password也是,同时我指定了它的take为get,也就是get请求类型。然后它的data这个属性就指定它的后台递的数据,这个就不需要了,因为我们把它传递的参数就已经拼接在它的地址栏里了,指定是盖的方式。同时启动请求。嗯。然后当我们就是这里给他添加对这个log这一个ID,选择对应的元素,也就是啊那个登录。这个这个按钮添加了一个点击单击时就是单击登录,然后就跳就执行这个方法。
19:04
我们单击登录的时候,他会向个客户向那个后台进行请求。啊,然后请求这个在这个接口层。这个地址,这个URL这个一定是就是在spring中一是这一个request map这个映射的这个地址,映射的这个地址。这个映射地址,然后同时嗯,把user password作为参数传递到后台接口这里,然后对那个。这个传递的这个参数层层传递到service层,然后倒层,然后在这个嗯,用MY对那个数据进行就是。查询数据库中查询它是否有相匹配的那个。密码。啊,这里就是。因为涉及到是部分的知识,然后大家后面还会再学,所以就不详细给大家讲了,重看一下我的逻辑处理,就是在这个service就是获了接口来那个那个户名密码。
20:14
他首先判断一下,当那个密码不是空,并且从。啊,那个。从那个。套层传递过来的那个,嗯,查询以后的密码,也就是根据用户名你查到了他的密码,并且这个用户名它对应的密码不为空,嗯,然后再验证一下你前台输入的密码和这个用户名实际在数据库中存放对应的那个密码是否一致,如果一致的话,就返回一个账号密码匹配。这样一个字符字符串,否则的话返回账号密码不匹配的字符串。然后返回到那个control的这里的时候,然后。嗯,通过一个,然后把这返回。
21:00
啊,一个一个Jason数组,这里是把一个字符串转换成一个Jason格式,返回账户密码验证成功,如果验证成,如果返回的是账户密码匹配的话,则向前台返回账户密码验证成功即将跳转,否则的话就是验证失败。啊,这里我们运行一下看看。啊,这里我们进入到我们的那个登录界面,然后这里。我们输入账户和密码。大家可以看一下我的数据库是。有这么几个字,呃,字段就是。嗯,首先账户那个为的时候,账户用户名为的时候,它对应密码是一,我们用这个来测试。
22:08
这里我们显示账户密码验证成功,即将跳转。啊,也就是说我们成功的进行了验证。嗯,然后返回的值是那个。账户密码验证成功,即将跳转这个数组数据类型,但是我们输入一个错误的密码时,它就会验证失败。这里我们来看一下它的那个,通过那个控制台来看一下它的那个报文的格式。选择network。然后这个。然后刷新一下。然后登录,大家可以看到这里有logd对应的这个接口的一个返回的一个R格式的一个数据。我们点开详细的看一下。现在是一个get立项。然后我们可以看到它的详细的地址,是啊,是这样的,是在它这个log的这个接口这个地址上,后面拼接上它的传递,要传递的参数就是username等于password等于一。
23:08
我们再来看一下这个代码。我们是要请求的是这个地址。这里和我们这对应起来,就相当于是这个user name,我们获取了它的值是password,获取了它值是一,也就是我们刚刚输入的那个。嗯,然后。这是它是拼接在这个头部的。然后我们可以看他的那个。主体部分是没有任何的数据的。这里是请求的参数是username和password。我们对应的来看一下。POS的方法。
24:03
大家来看一下POS方法这个它的部分的代码。首先,这一部分就不再需要了。它是直接把这个数据指定它的类型为post,然后地址就直接是log。然后它的参数是怎么传递的,就是在中。通过这种支队的形式直接传递。将那个。ID选择器对应的那个I input的值作为参数传递到接口层。然后进而进行后续的操作。然后我们来看一下它这个的。执行的结果。因为是JSP代码的修改,所以是不需要重启服务器的,我们就重新刷新一下页面可以。这是我们还是通过我的以及。
25:43
我们可以看到,就是当账户和密码相匹配的时候,返回的人是成功的那个数据,然后成执行成功的回调函数。当我们输入一个错误的值的时候。它会出现出现验证失败。然后我们来看一下它的。
26:01
然后刷新一下。点击登录我们可以看到的这个。然后他这里的这个请求方式就改为了。然后它对应的那个地址就但没有显示的指定了它要传递的参数,然后头部就没有额外的数据的附加。然后它的传递的参数则在这个form就是主体部分进行传递。然后通过这个user传递,传递字段的值为为一。这样进行传递。就是pass post和GET2种方法的一个主要的区别。然后刚刚。嗯,给大家讲了它的那个主要的区别。然后大家再想一想就是。具体它的应用的场景。然后对于就是除了点克斯方法以外,它还有点get或者点这种二层的调用方法,它其实就是对那个阿贾克斯那个它的那个请求类型的一种简化,它直接就指定了它是通过get方式还是通过的方式来进行异步请求的。
27:17
它的基本的格式,比如get的方法是通过get方式来请求,它的结构是get中国号里面指定地址,还有要传输的数据。然后以及它的回调函数。就可以。然后get方法,它的回函数只有两个,就是必须的,就是回的内容,它可以是档或者HTML拼接的片段也可以。然后第二个就是状态代码,它可以是成功,然后错误以及not modify以及超时这四种。然后他发了整个的返回的一个值,其实是一个htp request的一个对象的那种样式。
28:02
然后点。他都可以对这个进行一些相应的。啊,就是请求操作。然后但是这些都不太常用,因为他的方法。比较受限。当然,阿贾克斯这个方法在实际开发中比较灵活和常用。今天由于时间的原因,就是给大家主要讲解了这些。然后。嗯,主要是给大家就是简要的说了,说什么是异步,什么是同步,以及他们的就是各自的特点。还有就是阿贾克斯请求的这种方式。重点是讲解了到了点阿贾克斯啊,那那种请求的方式啊,然后通过两个范例给大家看了看,它是具体怎么实现前后端分离,然后来进行相应的嗯,请求数据处理,前端是如何后台进行传递,后台是如何返回数据。
29:01
然后回调进行处理的。然后。啊,我要讲的就是这些,然后大家现在有什么问题可以就是就是问我一下。嗯,我课下把那个课件还有就是源码都发到群里,大家可以自己练一下,因为克斯这一部分的这个知识是。比较,嗯,怎么说呢,在那个开开发过程中是很常用的。嗯。就无论是前端还是后端这一部分,反正都要接触一下。大家有什么问题吗?啊,直接开麦问就行。啊,我我想问一个问题,就是如果用阿贾克斯做一个反向代理的话,容易实现吗?
30:06
阿贾克斯做反向代理。啊,或者说如果想做一个反向代理,比较推荐使用那个什么。因为阿贾克斯它其实是一个前的一种动态的异步的实现,他做反向代理的话是不太容易实现的吧。然后你的那个反向代理是想实现一种什么功能呢。是在什么场景下的?比如说就是我们有一个网站,如果那个他们都就是有客户来访问我们的网站,他必须就是通过流量来访问吧,就是我想通过一个反向代理,他们就是他们访问的流量先通过这个反向代理,再进入这个网页。因为它不是有特定的反向代理服务器吗?你为什么还需要单独用这样一种?
31:01
一种算是专门的技术来实现,咱们现在常用的还有那个阿尔法,他们不都支持反向代理吗?然后用它来实现不更好一些?我是这么认为的。我看一下那个。嗯。嗯,大家还有什么问题吗?因为是这一部分,它的其实面还是挺广的,但是因为是一个内容是比较相对简化请求的过程。嗯,就是避免了那种需要自己创建XML那个HTP那。所以实现起来比较简单。但是,如果。不去了解那些底层的东西的话,就是掌握这些请求怎么使用就足够了。我觉得。
32:27
大家还有什么问题吗?如果没有什么问题的话,那么我们这次会议就到这里吧。行,大家。
我来说两句