00:00
哈喽,大家好,那么这一个小节我们来介绍一下,跨域的第一个解决方案,就是JP。杰森P呢,全称叫做杰森with party,是一个非官方的跨域解决方案啊,是靠程序员聪明才智开发出来的,只支持get请求。那么这个JP是怎么工作的呢?它的原理又是怎样的呢?它呢是借助于页面的SC的标签来实现跨越的。因为页面里边有一些标签啊,它本身就具备跨域特性,你比如说image link啊,还有script这些标签本身就具备跨域特性,而GGP呢,就是借助于script来实现跨域的。大家来看一下这个页面,Excel的HT面,这是我们前几个小节啊,介绍的Excel发送请求的一个H面文件,就这个啊,然后在这个文件当中呢,我们引了。一个远程资源。
01:00
远程资源注意啊,它的一个URL是CDN.c dn.net啊这样一个路径。好了,我们可以打开浏览器看一下。这个请求呢,它其实就是一个跨域请求。你看一下我们当前网页,它的一个协议是file协议。路径的话呢,是地盘开始一溜。啊,找到本地那个文件。它是这样的一个URL,而我们远端的excel.gs那个文件,它的一个协议是HTTPS。而且域名路径跟这个都不一样。所以说呢,他这个请求一定是一个跨域请求。因为当前页面的URL和目标请求资源URL呢,两个好。就是三个东西一个都不一样,协议、域名和端口都不一样。啊,所以说这是一个跨域请求,但是呢,这个跨域请求它丝毫没有影响代码的正常执行啊,我们还能还能够正常去使用XL里边一些相关的API。
02:00
啊,所以说标签本身就具备跨越特性。然后呢,咱们接下来给大家演示一下啊,我来举个例子,比方说我新建一个JS目录。然后在里边呢,新建一个文件叫app.gs。在这呢,我写几个代码啊,写两行代码来个data。然后内等于一个上硅谷。然后在这呢,我使用log输出一下data这个数据保存,然后呢,在页面当中呢,我们使用这个script的标签呢,对这个内容做一个引入。然后src等于一个点杠GS下边的app.gs保存。我们现在的话把这个文件呢,点打开先看一下。Sorry啊,把这个怎么给关了。点开它把这个呢往右拆分一下。然后右键我打开。打开以后呢,咱们点开控制台看看有没有输出。啊,刷新页面你看一下没有任何问题,这个对于我们来说应该是比较熟悉的啊,这是GS使用的一种方式,用src来引入一个外部资源。
03:05
那这时候你注意观察,我现在借助于Vs code里边一个插件叫live server。用live serve的方式来打开这个网页。大家看一下啊,此时你会发现呢,我们的访问方式呢,变了,变成了一个这个HTTP的一个协议。啊,这块的话没有为我们呈现啊,我可以来给你复制一份,让你看一下。要拿过来。放到这儿。啊,看这看前面它是有HTTP协议的,没有问题啊好了,既然有HTTP协议。那么这个GS资源的访问也一定是一个HTC的请求。大家注意观察,鼠标放上去之后在下边儿的一个显示内容。你看这啊幺二七点零点零点一五千,下边一串就是鼠标放上去之后,下边那个文本。啊,就是它,所以说我们接下来怎么办呢?哎,我们这样来做。
04:02
走,然后呢,把这个也卡掉,我回到这个页面里边当中来,我把URL呢换一下。换成完整的一个书写方式。看好了啊,这是一个完整的书写方式啊,中间这些百分号呢,都是对中文做了编码的,它不影响啊,它不影响好了,现在的话呢,我再次右键通过本地协议来打开这个文件,看着啊,我这个是file协议,然后呢,我的script的标签的那个GS资源呢,它是一个HTTP协议。我们来看看有没有影响。然后点开这个网络控制台来看一下,然后顺便点开cancel直接看吧,这个结果这是没有问题的啊,通过这一点咱们也验证了它标签确实是可以跨域的。那么咱们说了,JP就是借助这个特性来实现了跨越。啊,我来举个例子,比方说我这写一个div井号的result。
05:00
然后呢,在上面呢,咱们做一个style标签,井号的result,宽度呢等于一个300PX,高度等于一个100PX,然后边框等于一个萨力的一个PX,井号的78A。来保存切过来你再看一下。好了没有问题啊,然后呢,咱们想把这个数据注意啊,我想把这个数据呢,放到这里边儿去。那怎么办呢?啊,就是我想把这个data,把这个name属性里边的值啊放到div里边,这个咱们怎么办呢?咱们可以这样来做,哎,这是处理数据。啊,然后我这写一个函数啊,来一个handle。来个data。然后在这呢,咱们来一个handle。好啊,说说咱们这应该是呃。在这呢,来获取一下这个元素啊,在这儿呢,获取一下result这个元素cost result。然后等于一个document,点儿get element by ID,然后把result放进来。
06:02
放进来以后呢,咱们来一个result.inner HTML等于一个data.name搞定,然后呢,在下边这个位置呢,咱们这样来做一下。写一个handle,然后。把data传进来,这个代码的话,咱们应该是可以能看懂的啊,函数呢做了一个封装,然后把数据传进来,就可以把对象里边这个属性。然后设置给咱们这个啊,Div的一个文本啊,切过来刷新页面可以看一下。没有问题,然后呢,大家注意我们在做一个事情,做一个什么事情呢。把代码挪一个位置。啊,我把这个东西呢。拿过来,放到这儿。看好了啊,我把这个函数放到前边。放到主文件里边。而在app.gs这块呢,咱们就直接。一是数据,二呢是这个数据的一个函数的一个调用,来对这个数据做一个处理,咱们来看看效果可不可以啊,切过来刷新一面,你看一下我呢,为了验证啊,为了咱们确认,咱们把内容呢,再换一下艾特硅谷保存,切过来刷新一面。
07:10
也没有问题,对不对啊,你会发现的话,我们的返回结果这一块。就是这个GS返回结果是一个什么呢?是一个数据外加一个函数的调用。外加一个函数调用啊,好了,我们可以点开网络控制台,看的更加清楚一些啊,点开network。刷新页面把这个卡掉。然后点开这个app.js看response,你看这个结果,这就是app.js这个资源给我们返回的结果就是它。然后咱们SC的标签对里边内容做一个解析,做一个处理,然后就可以把这个结果呢,啊,然后。在咱们页面当中做一些相关的操作,你像咱们现在就是把里边内幕属性在div里边做一个呈现。那么这其实就是JP的一个原理,当然你可能会感觉这块内容这个很简单啊,很容易就可以想到了啊。
08:06
不过你先别急,我呢,接下来给你变一个形看好了,现在呢,我在。点GS里边单独为当前的这个资源呢。做一个调整。折一折。这个是样子,走在这儿。然后我们这块是一个JP的服务。好,然后APP点二里边咱们写一个JP-server,注意啊,咱们别忘加这个JNP,跟它上面这个区分开,Response。代码的话,咱们往这边拉一拉啊,再往咱们往这边拉一拉。然后拿过来。好了,然后在里边咱们返回,结果response.send之前咱们怎么返回,大家还记不记得?看我就直接把数据做一个返回,现在呢,我们也试一试吧,比方说我们这就写一个j NP server。
09:02
Hello。啊,就返回一个单词的字符串。然后注意咱们在页面当中呢,这个SC的标签就要注意一下了。我把这个呢注掉,下边呢我写一个标签,然后src指向谁呢?指向HGDP127.0.0.1冒号,然后8000斜杠接3P-S。就是我们要向他呢发一个请求,来获取他的一个结果,咱们这个也是一个跨域请求。你看看这样做可不可以切过来刷新页面。然后你看看这。然后他说connect review啊,就是已经拒绝了是吧,拒绝的话,咱们这服务应该是出了一点点小问题,不过问题不大啊,咱们把这个先停掉。然后在。在这个位置我们点开看一看啊,真的是没有了,没关系,重新启动一下。然来个node mon serve GS小。
10:02
好,重启之后呢,咱们切过来刷新一面,你再看一下。看这啊。Network这块你先看一看结果有没有返回。结果呢,返回来这个没有问题,但是你看一下cons他这块就出问题了。他说了unexpected啊,这是意料之外的一个标识符,为什么会这样子呢?你可以看一下network这块的返回结果,就是我一个堂堂正正的SC的标签去给你发请求,你居然给我返回结果是这么一个玩意儿。那我GS引擎能够对里边内容做解析吗?很显然解析不了。解析不了,那么咱们应该怎么办呢?我们应该返回的是标准的GS代码。比方说我在这儿看好了。啊,我在这个位置啊,我稍微调整一下。把它换一下,换成一个console。点log,我们这写一个hello,然后呢P。保存你再看结果啊,刷新页面请求过去没有问题啊,点开你看结果回来了,然后点开console,你看这J3P输出了。
11:06
所以说你会发现呢,我们这个请求过去之后。要什么结果回来?啊,我们这个请求script SR这个请求过去之后要什么回来,要的是一个函数的调用的内容。再往下说,应该是一段GS代码。啊,是一段GS代码,这样的话,我前端的这个浏览器的引擎才能够解析并执行里边的内容。OK,下边一步你再看一下,咱们再换一个形,再变形啊,我把这块内容拿过来。先把数据拿过来啊。先把数据拿过来,这是data,然后呢,接下来我要对这个数据呢做一个处理,首先呢,我需要先转一下字符串啊,将这个数据转化为字符串,Let s tr等于一个jason.string。
12:01
然后把这个data放进来。然后接下来的话呢,我来返回结果,这个结果返回要注意我们肯定是不能直接返数据的,因为你返回数据之后没法去处理。啊,没法去处理,那我应该怎么返回呢?看好了。Response send。咱们应该写一个N,为什么写N呢?因为N的话它不会加特殊响应头。然后在这呢,我们来一个。太好了。客服。为了方便拼接,我们这写上一个模板字符串。Str。保存。来看一下啊,刷新页面首页,你看这上硅谷at硅谷就在div里边做了呈现了,你点开network再看一看。啊,我重新刷新点开它,你看它的返回结果是什么。你看它的返回结果是什么?这个地方的返回结果是一个函数调用,而函数的实参就是我们想给客户端返回的结果数据。
13:08
再说一遍啊,返回的结果的形式是一个函数调用。而这个函数参数就是我们想给客户端返回的结果数据。啊,然后你注意这个函数前端必须要提前声明,要不然的话回来之后没有这个函数就会报错,这就是JP它实现跨域的一个原理。就是返回函数作用,并且把参数呢放到里边,让咱们前端的这个函数呢,去对它做一个处理。看这个结果。我把这个也拆分一下。是不是很眼熟?很眼熟啊。只不过这次的话,咱们是在服务端用服务端代码的话啊,这样去响应的GS代码。响应的是GS代码。好了,那么这个小节关于JP的一个实验原理,我们就先说这么多。
我来说两句