00:00
哈喽,大家好,这一个小节我们来演示一下阿贾克斯请求服务端响应阶层的这样一个操作。在实际工作当中呢,我们向服务端发送请求,服务端返回结果,绝大多数情况呢,都是一个阶层格式的数据。所以说呢,我们要知道这个结果,我们应该怎么样去处理。那么接着的话呢,我们还是以一个案例为依托去演示。这一次的话还是一个div。不过呢,我们不再是鼠标移入,还有呢,鼠标离开,而是键盘按下。在在在这个窗口下边,我们只要按下任何一个键盘按键,就会向服务端的发送请求,服务端返回结果。然后我们把结果呢在div当中做一个呈现。后我们来做一下啊,首先第一步要先绑定键盘,按下事件。键盘按下事件。Window on key down。还是一样,先做一个测试啊,Log,来一个test。
01:04
保存,然后切过来刷新页面开始按,然后A。CD啊,你看这test都能够正常输出,证明一点咱们的事件绑定是没有问题的,好,那下来的话我们开始向服务端发请求。然后写一个cost X HR等于一个new的h mlhttp request。第一步。然后第二步呢,是做一个初始化。啊,调用一下这个方法。发什么类型get第二个呢,URLURL咱们给谁发呢?咱们现在的话换一个。不给这个server去发了。咱们给这个杰森杠server去发。可以接三杠四去发,然后呢,这个数据这块的话,咱们先放一放。先把它呢,先定义好不急啊,待会儿咱们再去设置响应。
02:00
就是给他发这个是定额。好,接下来开始写URL。127.0.0.1冒号8000斜杠J3-server。给他去发请求好,然后呢,第三步是做一个发送。然后呢XHR点,然后第四步呢,是一个事件绑定。处理服务端返回结果on。这里面我要做判断判断状态啊,是不是没事了啊。Ready等于一个四。然后里边还要判断这个状态码是不是大于等于200。并且呢,要小于一个300。然后在这的话呢,我们开始处理服务端访问结果,我们在这呢,来一个consult log。然后写一个。XHR.response。
03:00
然后最终结果呢,是要把它放到div当中。所以说咱们这儿呢,在上面像先获取一下result这个元素对象啊,Result等于一个document点。Get element by ID。把result放进来。好,然后呢,在这设一个设,做一个设置啊,应该HTML等于Xh2.response。好了,咱们先看看那请求能不能发过去服务呢,我先重新启动一下。然后切过来刷新页面。按键一。三没有问题,看这啊,我按下一,按下二,按下三,你们可以看到这个结果能回来,这个结果是什么?这个结果是服务端返回的响应题。我按了一个按键。发请求。然后服务端返回的响应体就在控制台做了一个输出。好,然后现在的话,咱们回过头来在服务端做一些事情。咱们改一改啊,比如说先把这改一个好,阿贾克斯杰森。
04:03
改完之后重新启动一下服务。然后呢,切过来看看会不会变化啊,在这儿呢,我再按一下四。六你发现内容是发生了改变。注意我页面没有刷新,为什么页面没有刷新就可以看到最新结果呢?这是因为呢,我页面当中的代码没有做任何的变化,只是刚才服务端代码呢,我改了一下,并且重新启动了一下服务。做了这么一个事情。所以说的话,我只要在嗯前端页面呢,再次去按键请求再次发送,此时服务器访问结果发生了改变。所以说我呢,页面的显示结果和控制台结果也就发生了改变。好,那么内容改变之后证明了一点,咱们确实呢是在这儿做了响应,但是我们的目标呢,却不是如此,我们的目标呢,是要响应一个。数据。比方说呢,我们来一个得塔等于一个对象。
05:00
Name等于一个at硅谷。我想把这个对象。返回给客户端浏览器。就说你浏览器不是给我发请求吗?我给你返回一个对象。这个对象能不能直接往里面放呢?对不起,直接放啊,还不行。因为这个S的方法里边啊,它只能接收字符串和八法。啊,大家可能不知道八法是什么啊,你就知道这块呢,必须是一个字符串类型,所以说在这呢,我们需要对。这个对象呢,做一个转换。啊,进行字符串的一个转换。怎么转换呢?这个时候咱们可以借助于。杰森点string这样一个方法来做一个处理。处理完之后呢,它就变成一个字符串好了。把它放进来,放进来之后呢,咱们把服务重新启动一下,摁上。咱们再来看结果怎么样啊,然后这时候我摁一下五。六你看这个结果就回来了。
06:00
结果在回来之后。那么这个结果呢?它是一个阶层格式字符串。数据简单呢,咱们其实获取里边结果还比较方便,一旦结果比较复杂,想要提取其中某一个数据就变得很麻烦。那么这个时候咱们可以怎么办呢?好。我们可以这样来做。第一种方式就是我可以呢,手动。对数据。做一个转换。啊,注意啊,服务器访问结果是一个字符串,所以说h X HR response这块它是一个字符串,我们想把它变成一个对象,Let data等于一个。杰森点pass。XHR.response。这个时候你再来看看结果得塔。注意,因为代码前端代码我已经改了,所以我要重新的刷新页面。然后按键一看这。然后我们可以把这个属性值放到里边做一个显示。
07:00
然后来个result。点inner HTML等于点。保存,切过来刷新nab。结果就来了。好了,那么这个是一个手动转换,那么其实呢,还有另外一种方式就是自动转换。啊,自动转换。那么自动转换怎么办呢?自动转换就是借助于XHR对象上边的一个属性来设置。设置。响应起。数据的一个类型。HR.response type。等于一个GS。保存大家来看这个结果啊,我直接呢,在这儿呢,打印谁啊,在这直接打印一下这个。X r response。然后把下边这个呢,我先注掉保存。看好了,刷新一面abcd我已经刷新了啊,我已经刷新了。
08:02
你看下结果。at硅谷。那么接下来的话,我们要去设置的话,就不需要再干嘛,不需要再做这个data转换了。咱们可以怎么办呢?咱可以直接这么去做。就是点inner HTML等于XR.response点。然后切过来刷新页面。A,你看这个结果at硅谷就来了。这就是咱们当前对阶层数据响应的两种处理方式啊,第一种方式就是手动。哎,我们可以手动去做一个转换,第二种方式就是自动转换。直接在这做一个response type的一个设置,这个结果就自动帮我们转成了一个对象,我们直接拿里边结果就可以了。对比来看,明显这种方式会更加方便一些。好了,那么这个小节的话,关于杰森数据的响应,以及前端代码的一个处理,我就先介绍这么多。
我来说两句