34_尚硅谷_大数据JavaWEB_注册功能实现_异步请求校验用户名.avi原创

好呃，那接下来我们就围绕着我们的这个异步请求啊，来再具体的通过代码给大家去说一下，那么首先呢，我们要看一下刚刚说到了一个一波请求对象，它是怎么来获取的，那么对于这个获取来讲的话呢，呃，我们刚才也提到了，我们不必要这么麻烦了，然后呢，我们只需要通过啊最就是啊基本的这种方式，然后去打就行了，明白吧，然后我们在测试的时候呢，我们也就使用这个火狐来去测试了，我就不再使用这个IE去测试了，明白吧，啊，如果说你想使用这个IE的话呢，尽量的话呢，你还是把这部分代码都给它写全了啊，以防万一啊，它确实不兼容的话呢，你也可以去用到它，那么等我们呃，后面通过这个jaqui来去写的话，那就无所谓了，你使用IE也好，或者使用谷歌也好，或者使用火狐也好，没有任何问题，它都是可以的，好，那么接下来我们先来把这个对象的获取给大家去说一下，首先回到我们的开发工具中啊，那么我们还是来到我们。

这个啊，我们就直接在我们这个注册页面里面吧，因为我们在它里面要去使用啊，啊在这个地方的话呢，我们再去写一个script啊块，然后呢。这个里面的话，我们就来写一个什么获取我们的啊，就是这个XHR对象啊啊，那我暂时的话，我就把它封装成一个函数，然后将来的话，如果你想获取它了，那你就直接去调用这个函数就可以了，你看下啊方式，然后呢，Get我们的XHR就是来获取我们的异步请求对象，那怎么获取呢？大家可以参考着我们这里面写好的啊，就是直接通过我们的new的这种方式来把它拿到就可以了，所以说们你看看啊，就是呃哇，XHR等于又一个什么呀，叫做X ma看到了吧，然后呢，HTTP啊，Request啊，就是你只要什么写的跟他是一样的，把它什么溜出来就可以了啊然后的话呢，这个对象的话，最后呢，我们就给它啊正回去就行了啊，那么大家注意了哈，可能有同学不理解了，说你这个也没有什么返回值啊，怎么还能成数据呢？

是吧，在这个JS里面，我们的函数是不需要声明这个返回值类型的，但是呢，这个里面你是可以给他去远成这个数据的啊，但现在的话我们也不去调用它啊，我们就呃这给他了一下吧，我们把这个XHR呢给他什么去输出一下啊XHR好，但是的话呢，注意现在的话对于他来讲呢。我们也执行不了你这个函数是不是得去触发一些事件才能执行的呀，对吧啊，那我因此呢，我就直接呃这么做吧，我看一下哈，呃，我在这个外面的话，我简单的去写一个引步吧，T呢等于一个八，然后呢，给它绑定一个on格个书件啊先写一个value吧，就是这个啊测试我们的好这个对象OK，然后呢，这个on click呢就等于我们的。

啊，Get XR这个能看懂吗？像我们刚讲过吧，啊，现在的话，你再去点它的时候呢，那么它就会什么帮你把这个对象呢，给你出来了啊，那么具体你return了这个数据我们也不需要去管了，反正你return就称吧，我也暂时的也不接受了啊那么接下来我们就来验证一下下来呢，我们的JSP，那么你看了啊，我来点一下走，大家看一下是不是获取到这个对象了。获取到了吧，诶，这就是一个具体的对象啊，然后呢，啊，感兴趣的同学呢，你也可以通过这个IE去测试测试啊，或者说呢，通过别的浏览器也都是可以的啊，这样的话呢，我们就获取到了我们的XHR对象，那么接下来呢，我们就来研究我们的哎异步校验，什么叫做异步校验呢？就是我希望你在这个页面中，当你输完你的用户名以后，你再去输别的数据的时候，比如说我要紧接着去写我的密码的时候，那么他已经。

悄悄的去帮你发送了一个请求，然后呢，去给你校验这个用户名能不能去用了，所以说我们应该怎么去实现这个过程呢？把这个思路再给大家分析一下，我我怎么就能知道你已经输完了呢，是不是光标移出去了呀，哎，叫做失去焦点事件，明白吧，当你失去焦点以后，我就获取到你输的这个值，再通过我们的adjusts呢，我就把这个请求呢，发送到我后台的一个solid中，再so中我去校验一下你这个用户名能不能用，最后呢，得到一个结果，把这个结果呢，再给我返回到这个地方，我给你往这一显示是不是行了。能明白这个流程了吧，好，接下来我们就来做这个事儿，那么首先的话呢，我们需要在这个用户名称上面呢，给它去绑定一个事件，叫做on blue，就是我们的失去焦点事件，当它失去焦点以后，我们就要去校验它的用户名，我们就叫做check user name，可以吧，好，那么这个函数呢，我们就是来写一写了啊，叫做function check user nameme。好在这个里面呢，首先我们需要获取到它的具体的这个值吧，就是你这个里面到底你输了个啥模式得获取到啊，怎么获取啊，那就是哎，就是document.get element by ID，好，那么给它个ID吧，呃，这个ID的话呢，我们就叫什么名字呀，写到这吧，啊，写到哪都无所谓，比如说ID我也叫用户名可不可以呀，只要你注意啊，I的话呢，你叫什么名字无所谓。只要。

就在整个页面中唯一不重复就可以好，所以说我也叫username吧，那我们就怎么写啊，那就写个哎，Username获取到这个值以后呢，接下来我们就要什么呀？哎，发送我们的异步请求进行校验啊。

怎么发送啊？首先你是不是拿到这个对象啊，对吧，那就把X h2，那你就直接去调用这个函数就可以了，刚刚写好的是调它呀，对吧，调到它以后呢，拿到这个对象，拿到这个对象以后呢，我们就结合上我们刚刚讲过的对象的这个方法啊，然后呢，去做一个异请求，那么大家看下面我们有一个发送一步请求的get示例，也有一个post的这个示例，因为你有两种请求方式嘛，它都是支持的，那么我们课堂上呢，就基于这个get来给大家去讲解，大家下去以后呢，你可以照着我的这个代码把它改成post，再去试一试，一会儿我来强调一下它们有什么区别啊好，首先的话呢，我们需要设置一下我们的请求信息啊，来准备设置请求信息，那就是XHR.open方法，在这个里面我们需要传三个参数，第一个就是你的请求方式，第二个就是你的请求URL，第三个就是你是异步还是同步，那么现在我发送的是一个钙的请求。

好，我要发送一个什么请求呢？我就叫做check username，当然了，注意我们需要把我们的用户名是传过去啊。能理解吗？所以说呢，我要在后面的给它拼上一个请求参数，因为你当你的so里面去校验的时候，你是不是拿到这个请求参数啊，对不对，而对于get方式来讲，他的那个请求参数是不是拼到这个URL后面的讲过吧，给大家嗯，讲概的时候我说过他都都拼到后面了吗？还不安全说过那个吧，诶那我们就把它P到后面啊，User name等于什么呢？加上你获取到的这个用户名是不是就可以了。能看懂吗？OK，第三个那就是一个处代表着我是一个异步请求，好这个设置好以后呢，接下来我们就可以什么呢发送请求了，那么就是XHR加三的，注意对于钙的请求来讲，这里面什么都不用去写。

明白了吧，那么请求发送出去了，我怎么知道他什么时候处理完了呢？那么接下来我们就要什么呀，去监听我们的ready stage的一个什么状态了，怎么监听呢？我们通过一个叫做unri stage change这样的一个属性啊，这也是我们刚刚提到的，大家可以看这个地方，它有这样的一个属性啊，就是来，哎，在这去监听一个什么呀，这个ready state属性的一个改变，那么我们的写法就是XHR点。Ready这个不能写错了啊，写错一个字母就不行了，等于什么呀？那我降低到它以后呢，那我就需要来做出一些相应的处理，所以说呢，在后面我们要写一个。函数，但是这个函数没有名字，它叫什么函数啊，诶，这是一个匿名函数，明白了吧，这是一个逆名函数，然后在这个里面写什么呢？我们来看啊，在它里面的话呢，我们就可以去写，哎，我去监听你这个状态是不是变成四了呀，如果变成四的话，代表着是不是处理完了呀，对吧，叔叔你看写了哈，就是如果说你的状态好注意哈，这个S是大写的。

理解吧，它等于等于四了，说明这个是什么呀，注意啊，就是响应处理啊完成了。明白了吧，哎，就是响应已经处理完成了，但是你处理完成以后呢，我还得判断什么呀。我判断一下你这个请求有没有成功。因为我给你想一，假如说我在里面我报了个错，那我有可能给你的是一个404，我有可能给你的是个500，如果成功的话呢，我给你的是个200，我们这个地方是不是希望它是200啊，对吧？所以我再要判断一个，如果说你的啊，Sta stas啊不要写错了，就是shr点这个sta啊来写上，如果说你的这个状态是等于等于200的，那代表的是什么呀？就是处理啊正确的就是没有报错，那么接下来的话呢，我们在这个地方呢，我们就会要获取我们。

好，获取我们这个什么呀，就是服务端，哎响应的这个，哎响应回来的数据，那么一会的话呢，我就给他响应回来一句话，比如说用户名可用，或者说用户名不可用，能理解这个意思吧，那么怎么获取呢？那就是哇，然后呢，这个message就等于XHR.response t就可以了，获取一个相应的一个文本，那么拿到这个以后的话呢，我们就会怎么着呢，是不是直接就给它放到我们这个用户名称的后面就行了吧，那么它后面的话，我们已经给他放好了一个SPA，那我们是不是放到这个SPA里面就行吧，对吧，那么这个span的话，现在我们也需要给他来一个ID了哈，那就叫什么呀，就叫做。

下划线SPA好，那么这地方我们怎么写呢？那就是来就是加入我们的好将这个什么呀，诶信息设置到我们的用户啊名这个输入框后面啊，就显示到吧，不要设置了啊。好，显示到我们的具体的地方，那么怎么显示呢？那就是document点儿get element by ID先获取到我们的下滑的SPA，是不是获取到它呀，获取到它以后呢，再给它in HTML就等于什么呀，Message就好。听明白了吧，OK，那么这样的话呢，我们就把这个效果呢，就给它做出来了，好，但是呢，我们这个请求是不是还没有处理啊，对不对，你这发送了一个请求，你的后台你肯定得给人家处理吧，所以说接下来我们还要在我们的后台呢，去给他加上一个solve来，再去写一个solve啊，我们去用一个注意哈，其实我们可以直接去拗一个什么呀，Solve。

明白了吗？但是呢，前两次的话，我建议大家呢，还是直接写一个类，然后呢手动去写啊，如果你直接new sol的话，你就直接下一步，然后呢，给它取一个名字，比如说就叫做check user name so，看到了吧，然后呢，下一步它这个位置的话呢，它需要你去设置一个呃，这个name，就是你这个sorry的一个名字，默认的话就是使用你的类名，然后呢，URL mapping，它默认的也是使用你的这个类名，就斜杠什么什么什么什么，当然你也可以进行一个什么修改的啊，我就不改了，那直接finish，你看他也帮我们去继承了一个http solve，这里面呢有一个构造器，这个构造器我们用不上，我就干掉，你看一下，剩下的不就是一个啊，剩下的不就是一个do get，以及一个什么do post的这个方法吗？而且你看一下是不是这个调用到了这个do get啊。

对吧，OK，那我们在这里面去写我们的食材就行了，明白了吗？然后呃，不仅它能帮你生成这个类，大家来看在外部的叉L里面，它也帮你已经配好了，你看到没这个solve啊，多了一个什么描述，这个描述我们就不要了哈，干掉，嗯，这个也干掉啊，就看这个就行了，你看到没有跟我们写的一样吗？一样吧，他只不过这个URL pattern的默认使用的就是我们的check user nameme，但是我们在前台提交的这个请求叫什么呀？叫做check username吧，那么这个的话，大家还是要给他去要对应一下的哈，那我就改成什么呀，Check。Username就可以了，能明白这个意思了吧，好，接下来我们在这里面写什么东西啊，这里面就去写你啊具体的业务处理就行了啊，那我们就先获取到什么呀，好获取到我们的用户名，那么还是呃，String类型的用户名等于request.get就get什么呀？呃，这个per是吧。

Get这个permit啊叫做什么呀？3NAME这个能明白是什么意思吗？因为你这个请求里面是不是给他传递了一个这个用户名啊，对吧，那么你通过这个key呢，你就可以获取到你具体的这个值嘛，那么拿到这个值以后呢，接下来我们就要做什么事啊，就是让他调用我们的DAO，所以说我们要把这个DAO呢给它扭出来了。好，等于又一个usero看到了吧，然又好一个这个DAO啊，然后呢，调用user DAO点是不是有一个叫做什么来着，Get什么by username吧，OK，它会帮你返回一个用户对象啊，如果说用户对象等于等于空，那代表着能不能用啊，就是相当于我通过我现在的用户名，我找不到对应的用户，那说明能用吧，对吧，那就是什么可用，那else呢？哎，这就是一个什么不可用，明白这个意思了吧，哎，Else就是一个不可用了啊好，那么接下来怎么做呀，如果可用的话，我就给你写出去，如果不可用，我是不是也要给你写出去啊，那么这个地方我们就可以怎么做了，你看看哈，String str就等于什么呀啊，这么写吧。

我们在上面呢，先给他定一个字符串类型的这个啊message吧，就是等于一个空字符串，如果可用的message就等于用户名。可以啊，使用好这就可以了，然后如果不可用呢，那我message告诉他什么呀，哎，用户就是什么已存在。好，请什么呀？请更换，能明白了吧，那么最后的话呢，我们就直接把这个数据给它写出去，怎么写出去呢？那就是response点，首先我们要去set一个count ta明白了吧，HTML，然后呢查set等于utf杠八，就是你把这个编码一定要设置好了，之后呢，我们再把这个呃，Response掉，Get write.print LN就是把我们这个message写出去。

这样的话呢，你看一下，不管你是可用不可用，我最终是不是把这个数据给你写出去一个，那么写出去的这个数据呢，那么最后呢，就来到了这个位置，我们就会要在我们的这个地方呢，把它获取到，获取到以后呢，就把它设置到我们的这个span里面了。明白这个流程了吗？OK，那么接下来我们就来做一个测试啊。好，重新启动一下。来启动完成以后呢，我们就来访问一下，先来到JSP里面。

好，现在呢，我先去写一个，比如说像这个din是不是已经存在的呀，对吧，来进来了吧，然后我光标失去走哎，他给你看了一下，说明这个事件是有的，是不是确定他告诉你用户名可以使用，这不对吧啊。怎么还可以使用了呢，那我再试一个吧，啊，我看看这个呢。他说也可以使用啊，那我输个不能用的呢，比如说输个能用的吧，ABC这肯定是能用的吧，他们是不是也可以使用。这怎么了？那肯定出问题了呗，这还能怎么了，那就看看呗，是吧，看看你哪地方写的有问题啊，来看这个地方，呃。哎，这个地方出问题了哈，因为什么这个你获取到的是谁呀？你这个获取到的是什么？是那个get element username是获取到这个input了呀，你是不是得获取input的这个value那个属性吧。

是不是你得获取，就是你得获取它这个值嘛，你不能获取这个框框啊，对不对，哎，少写个东西啊，说这个地方我们得加上什么呀，得加上一个表。完了。明白了吗？哎，这加上一个点Y，这就是来获取我们的。来获取我们的这个。用户输入的这个用户名啊，就是你得获取到人家框框里面的那个值，那个值呢，就是它的value属性，你直接把它获取到就可以了啊，这样的话我们再来做个测试啊，那么这个呢，我就注释掉了，要不每次他妆也挺烦的啊，好再来试一下。啊，刚才还少写东西了哈，那我还是试me走来，你看是不是已经存在了，对吧？那我换个是不是可以使用了，看明白了吗？啊，那么这个效果我们就实现了，所以说了，你看一下，当我输完这个的密，好，那我输完了，我准备输它的时候呢，诶，他就告诉我已经存在了，请更换，这样的话呢，我们是不是就可以啊及时的给他做出一个更改了吧，明白这个意思了吗？OK。

啊，这就是我们的一个异步请求校验我们的表单。听得懂了吗？同学们啊，那你说这个好呢，还是等你输完以后点注册再提示你好啊。肯定是这个好吧，对不对，诶肯定是这个好了啊，而且它还有什么好处啊，这个一步请求呢，它支持你局部刷新，就是你看一下整个这个过程中，我有没有刷新页面吗？没有，他只是做了一个局部的，就这个位置做了一个什么修改，它没有刷新整个页面，所以说它相对来说这个传输起来这个效率也是比较快的，因为它数据量小啊。明白这个意思了吧，OK，好，这就是我们的异步请求，呃，那么我们现在发送的呢，是一个盖的请求，那么大家下去以后呢，你照着我这个PPT，呃，这个word文档里面的这个，呃，代码是吧，你把这个POS请求呢也去试一试，对于POS请求来说的话，我们需要注意两个地方，第一个地方了啊，注意三个地方，第一个地方就是请求方式要改成post了，第二个地方就是你的那个参数啊，请求参数呢，不要再往这个URL后面写了，而是要把它写到S的方法里面。

这是人家的一个要求，另外一个呢，就是我们需要设置一个请求头啊，这个请求头你就照着我的这个去把它抄上就可以了，这个不需要大家去记的。听懂了吧？那么你只需要把这个地方一改，那么你就可以把一个get请求换成一个post请求了，听明白了吗？理解什么意思了吧？OK，好。