00:00
哈喽,大家好,那这个小节我们来做一个原生接3P的一个实践。我们有一个需求。就有用户名。我们呢,会在里边输一些用户的用户名啊输。说完之后呢,我会丧失焦点,丧失焦点的时刻呢,我们向服务端发送请求,对用户名呢,做一个是否存在的一个检测。那么在这呢的话,咱们的服务端呢,就直接返回一个已存在,注意我们不会去比对它到底存在不存在,因为咱们没有自个儿的一个数据库,我们直接就返回一个不允许使用。啊,虽然就是不不是不存在,而是不允许使用,就是已存在。返回这样一个结果,然后呢,这个结果回来之后呢,我们做判断,然后把div的颜色啊,把数量,把这个英布的框的颜色变成一个红色。做一个这样的事情。好了,我们一起来做一下。首先的话呢,这个元素咱们必须得先获取到啊,获取。Input元素。
01:00
Input等于一个document.query select。然后在这儿的话,咱们来input。然后完成之后呢,下一步开始绑定事件。然后input点丧失,焦点事件onblur等于function。在这的话,我们第一个事情呢,是先来获取用户的输入值。然后cost,咱们写一个let啊,User name等于一个this.value。这是放元素获取输入值的一个。API属性啊,Value,通过它可以得到用户的输入值。好,那么下边一步的话,像远远端向远端啊,像这个服务端服务端。发送请求。检测用户名呢是否存在。这个时候呢?注意,我们这个页面的访问方式是用file协议去访问的,可以看一下,而我们在哪去检测呢?咱们的检测服务在这呢?
02:02
哎,好了。就是用户名检测是否存在。好,我把这个呢直接复制一份拿过来,路径这块的话,我就直接写一个check username。然后呢,Data数据这块呢,我做一个这个啊,然后呢。Exist。来等于一,然后呢,MSG用户名。已经存在。好了就写这个信息,然后把这个结果呢做一个返回。大家注意这块的返回结果呢,我这儿写一个handle。啊,写这个handle啊,我这个地方的名字啊,我就不改了,就写handle,那既然是这块写handle的话,Handle的话,那么咱们前端的这个全局的作用下边呢,就必须得有一个handle的函数。啊,声明。这个handle函数。好,Function,来一个handle。哪个?那我们如何对这个数据做一个处理呢?我们一呢是要把元素的边框呢变成一个红色,二呢,咱在下边呢补一个P标签。
03:08
补一个P标签,然后呢,把服务端这段文字呢,往这儿做一个显示。做两个事情啊,好了,那咱们先把这个函数先写出来啊,这个数据待会儿回来之后到这儿啊。我们应该怎么办呢?首先是先把input它的一个style。边框等于一个萨利的一个PX,井号的F00还一个红色,然后下一步呢,是修改P标签的一个提示文本。啊,然后在这咱们需要把P标签也获取一下啊,Comes,咱直接一步到位吧,在这。来一个P搞定。然后在这写一个p.in HTML等于个塔点MSG搞定。求了,那么下边一步啊,注意咱们请求还没开始呢,只是先把返回的结果以及回调函数这块已经做好了,然后接下来咱们开始向远端去发请求,怎么向这儿去发请求呢?
04:06
注意,我们第一步要先。创建一个标签。然后script等于一个的。Create element。放进来。好标签有了之后呢,第二步设置标签的。Src属性。script.src等于一个给谁发写到这儿啊,咱们是给127.0.0.1冒号,然后8000斜杠check。然后username。咱们需要给他去发请求,就是把这个路径呢给他写上。那么写完之后要注意,你光这样去设置属性还没有完事啊,第三步还需要将这个script呢插入到文档中。啊,如果你不插入到文档中的话呢,浏览器是不会向远端去发送请求的,所以咱们这来个这样的事情,document.body.child做一个节点的插入script。
05:08
这行代码的意思是我要把这个script标签插入到body标签的啊,最后。是这样的一个作用。好了,这样一来的话,我们整个的效果就已经完成了,看一看怎么样啊,有问题咱们调试一下,切过来刷新,我输个内容123321是吧,哎,走起没有成功没有关系啊,我们打开控制台去看一看,首先呢,咱们先看有没有报错。拿过来。放上去走走走走走走,你看这啊,它显示是一个404CHECK username。Check your name是一个404,好,我们检查一下自个儿的服务有没有问题,普及。点开终端。往上提一提。我在这呢,保存一下。发现。咱们可以先对这个去做一个请求,看有没有返回结果。
06:00
时候点开network就是它。好,这个有已经有结果了啊,是咱们这块它并没有读取到啊,咱们再强制刷新一下。发射器。走,你们可以看一下已经有了。刚才应该是缓存出了问题啊,咱们刚才强刷了一下,我摁了一下CTRL加F5,结果就出来了。你可以看一下边框已经变红了,然后文本呢也已经提示了,我们重点来看一下check your name它的一个返回结果。看这。看这handle里边呢,是一个对象。啊,Handle是一个函数。啊,因为这个函数呢,咱们已经在全局作用下边已经声明了,此时你借助于script标签向远端发一个请求,服务端的返回结果呢,是一个handle函数的调用。那么浏览器啊,在解析器一看啊,能执行没有问题,于是乎呢,把这个代码做了一个解析和执行,顺便把数据就处理了。这样一来,我们就实现了一个跨越。
07:01
好了,那么这个小节咱们做的一个原生的跨域的阶层P这样一个练习就先到这儿。
我来说两句