00:00
Hello,大家好,这一个小节我们来演示一下,阿贾克斯呢,发送POS的请求。我们还是能以一个案例来为载体来去讲解。我们这列列还是一样,列一个需求啊。阿贾克斯post的请求。首先的话,我们先来写一个div井号的result。这个位置呢,做一个样式。井号的result。然后宽度呢,等于一个。200,然后高度呢来个100,然后边框等于一个3D的,一个PX井号的。903。好看,效果怎么样?右键点开。把其他都关掉。然后呢,咱们现在需求是这样子啊,当我把鼠标放到这个div上面的时候。向服务端发请求。然后呢,结果回来以后,把响应体结果在div当中做一个呈现。
01:01
再说一遍啊,当我把鼠标放到div上面的时候,发请求,发pose的请求。然后回来,结果将显应体在div当中做一个呈现。好了,我们来一起做一下。首先的话呢,第一步肯定要先来获取元素对象。然后cost result等于一个document get element by ID。然后来个result。那么第二步的话需要绑定事件。那我们使用的是DO2的方式去绑定。然后事件的话,来一个mouse over。写上一个事件处理程序。在里边还是一样,先做一个测试。保存。切过来,打开控制台打开。然后呢,放上去。放上去,放上去没有出来。啊,当然不是,哦哟,这是mouse move是吧?咱们写错了,应该是mouse over。
02:04
保存,然后把ID没有问题切过来,刷新上去。发上去,发上去没有问题。好了,那么出来之后呢,下一步咱们就开始绑定事件四步走。第一步呢,先来创建对象。然后cost X HR等于一个new的xmlhttp request。第一步。然后第二步呢,是做一个初始化。设置。请求的一个类型与urlx 2.open。咱们这写一个第一个参数啊,Post。第一个参数这块设置就是请求的类型。你要说是get请求,你就设置get,如果说你是一个post请求,你就设置post。然后第二个呢,是URL写一个HTTP还是给谁呀,还是给这个8000端口去发请求。
03:03
派127.0.0.1冒号8000。路径这块咱们还是选择server。好,这是第二步,第三步呢,做一个发送XHR点三。第四步呢,去做一个时间绑定。XHR.re change。然后在事件处理程序当中呢,我们就要去对状态做一个判断。如果XHR.ready state要是等于一个四。然后XHR.statuss要大于等于200,并且X h2点要小于一个300。表示的是响应状态码,是成功的一个值。好在这里处理服务端。返回的结果。咱们说啊,这个结果呢,我们把响应体要放在div当中做一个呈现。
04:00
所以说我们写一个result.inner HTML,把这鼠标放放开。等于谁呀?等于一个XHR.response。这个response的话是我们的响应体。好了,搞定。搞定之后咱们来看效果怎么样啊,切过来刷新页面,然后放上去大家看一下,报错了。说什么has been blocked by course policy是吧?No,这个为什么会这样子呢?切过来,这是因为呢,咱们服务端并没有一个与之匹配的路由规则。而且呢,咱们并没有设置一个响应头,所以说哎,咱们这不是有的吗?有是有,但是规则是一个get。就当客户端的发送get请求。并且URL路径为斜杠server时。它去运行后边这个函数。但是如果是post呢,他如果发的是一个post,那对不起。匹配不上。啊,所以说的话没有办法呢,去执行里边代码,那我们怎么办呢?诶我们可以呢,复制一份。
05:02
把这个get呢换成一个post。然后咱们再想结果这块呢,做一个变化,跟上边区分开保存。注意GS代码的话,我们在改完之后一定要重新启动服务,我们把终端需要打开一下诶。打开终端。然后找找到刚才咱们那个服务啊,就是这个no的这个啊,把它停掉,然后摁上再来一次。他说app.post哦,Sorry,写错了,这块应该是一个小写。好,再来摁上敲回车。辅位已经启动,接下来切过来,刷新页面放上去。你可以看一下此时。咱们这个结果就已经在div当中呈现出来了。然后咱们顺便呢,再看一看谁的network。哎,把这个呢先清掉,咱们再来一次放上去,请求来点开它。先看一看这个请求的信息,点开走。类型是post,路径是斜杠,没有问题。
06:03
然后再来看看这个响应结果。啊,这是响应的行。啊,200状态,状态码,还有状态字符串,还有下边这些头。体在哪呢?体在response响应体啊在response这。先看在这。好,这是当前的话,关于发了一个POS请求的一个操作。那么POS请求啊,咱们知道是可以传递参数的。传递参数的啊,这样子我们这个小节呢,关于POS请求的一个发送呢,就先到这儿,我们先。保存一下下一个小节咱们来讲一下啊,关于参数的一个设置。
我来说两句