7. 尚硅谷_佟刚_Ajax_典型应用_验证用户名是否可用

我们首先来完成这个第一个功能，大家好好看一下这个功能是什么样的啊，我来点这个注册，然后呢，呃，注册的时候呢，我们需要写一个用户名，现在我写几个A，六个A，很显然这个六个A已经被使用过了，这个时候他会给我一个信息说此用户已存在，好了，我后尾加点别的，呃，这就可以用，这就是典型的是一个Ajax检验，我们看这个应该如何来完成。这个呢，我们新建一个文件夹，就APP1第一个应用。好，我们直接来写一个JSP。这里边我来写一个index.jsp，我们这个写上去啊，因为我们也不打算去走这个数据库哈，我们直接呃在这个账号代码里边写一些呃用户名就可以了，Form还是要写的，Form也不需要，也不需要写去什么地儿，当然你要指定这个method post，行了，我指定一个username input。

Type text name user nameme，然后呢，这指定一个input type sum value sum写完好了，我现在我就希望实现那个功能，大家看我要实现那个功能的话呢，我具体我需要怎么做呢。我们来简单的跟大家说一下。第一个我需要导入j query库吧，是吧，使用j query我的快呀，第二个导入这块入库之后的话呢，我需要给哪一个元素加什么事件啊。

我应该是给name是user name的这个input加上一个什么事件change吧，呃，改的时候展示卷获取这个的节点，并来三吧，我们说这个节点获取着哈，这个节点的话呢，比方说我们这个节点就叫username。好了，然后呢，获取username的value属性值，就是说我并不是什么情况都去用AX检验，有什么前提呀，你这个值是改了的，而且不是空吧，你值都是空的，那我还那我还发什么HX请求啊，然后呢，去除前后空格且不为空，且不为空，在这个情况下，我有可能给它添加事件，那这个我们要说哈，为you name添加。

Change弦函数，然后的话呢，我获取这个值，呃，不为空的，这个时候这个什么准备发送A这请求就是说呀，我加上这个change，但加上change之后我不一定发，只有加上change了，然后我看一下，呃，去完空格之后再不会空的话，我就准备发送好了，3.2，那发送吧，发送AJ请求，检验这个u name是否可用好3.3，那我们都一招，我们都设计了哈，那你说这个时候的话呢，我怎么办呢？我这个目标就是在这U盾内幕的后边啊，诶我给它加上一行四就可以了，说它是不是可用的，应该是一行文本。

很直就可以啊，我们写个div吧，Div来ID，我们写个message好了，这块的话呢，我也加一个边。哎，我是这么一个效果，我们希望呢，把这个信息啊加到这个里边，那你说这个时候我在服务端，我传回了一个什么样的数据比较好啊。

这个数据是我们自己定的是吧？有杰森的，有HTML的，有文本的，还有XL的，你觉得穿什么最好啊？我们说杰森，杰森是比较常用的是吧，但并不意味着什么时候都传杰森，大家懂吧，你说说什么比较好啊，你是不是希望就显示你显示的可能是啥样的呀，你要加个foot呀，颜色呀，Color red，比方说呃，该用户名已经被使用，你是不是要传一个类似于这样的一个结果呀，所以说H线玩比较好吧，OK，然后我们说，诶，在服务端直接返回一个HTML的片段，HTML片段的话呢，我就可以直接用了是吧，3.4，然后在客户端浏览器。把其直接添加到什么呢？啊，ID message的HTML中，这就完了，这就是我们整个的这个步骤，好我们看一下啊。

先跑一下吧。嗯，就是这个，但我这个我现在应该是去掉的啊，应该是没有的，返回这样的一个东西，CTRLX。哎，返回的数据的话呢，是这样的一个格式，行了，那一步一步写吧。

Script src，我们说我们在这个写项目的时候是不尽可能使用绝对路径啊是吧，相对路径点点那个不好，诶你要转发几次的话就乱套了吧，绝对路径怎么写EL吧，配置contact，然后哎，Request contact pass这个下边的，Scripts这个下边的，嗯。然后这个下面的它。好了，穿好，穿好之后的话呢，下边我们来写代码。就按这个步骤写呗，首先先写方式是吧，你保证是在我们这个文档加载完之后你再写，要不的话不写function的话，是不是获取不着这个节点，嗯，然后我们写我们要获取的是是什么呢？是input吧，但前提是name等于user name.change是这么写吧，Function好了，获取Y6值等于这点VALUE6吧，然后需要去除前后空格。

是不是这样写，然后如果Y流值不等于空的情况下，我们就发送AX请求好了，这里边这个的话呢，我们依旧可以这么写。我们写成是呃。

You name可以了，Were X等于you的name。Y6吧，然后再传上一个time缓存的new date OK，然后发请求，我直接发一个post请求，URL X function，为什么写推他吧，我这个data塔我说了啊，直接加这个里边就可以了，景V点什么呀？不，诶这不HTML啊，就换结果完了，下边我写它。She is so late。

ajax.app的。嗯嗯。第一个字母小写。OK。Dopo。这里边儿的话呢，我事先我写个list。String you name就是我先提前，我先写几个点三个A。

DBBCC这三个你不能用if啊，先得获取值哈，String username等于request.get per user nameme if，如果usernames.contains，吧，如果要是包含它的话，那我就给一个结果来，String result等于now，这个时候这个result长的样子就是。Color等于red，然后说该用户名。已经被使用。否则。

哥瑞，该用户名可以使用选to不传回去啊，对，pass.get。Write than result，你也可以告他一声哈，我返回的是个什么呢？我返回的是一个text a pml，写完了，走一遍吧。AAA。哦，什么问题啊，什么乱码问题啊。但是对着红的是吧？来看ddd来，我们写个CCCC来ddd说明它是好用的吧，乱码的问题比较恶心，乱码的问题怎么解决？嗯，什么什么response.set characterco u utf，杠八，你得设置返回的这个杠八，然后我们再看看这个GSP页面，我们还可以怎么写这块是不是可以指定一个CTRC回来。

进来。好了吧。哎，这样的话呢，这个潮流就写完了，这就是我们的第一个应用，这个应用的话呢，开发的时候用的还挺多的，就是验证你这个用户名是不是可用。

那重写这个上边的话，我们重新重新看一下我们这个流程哈，这个重点在哪呢？我们重点就是确定哦，它返回的是一个HML片段，然后使用这个HTML1写就可以了，代码的话呢，也比较少。