首先创建一个web project 项目.
新建一个ajax3.jsp页面,代码如下.
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ajax开发---验证用户名是否可以使用</title> <script type="text/javascript" src="${pageContext.request.contextPath}/my.js"></script> <script type="text/javascript"> window.onload = function() { //得到id=t的文本框 var txt = document.getElementById("t"); //给文本框注册一个失去焦点事件 txt.onblur = function() { //获取文本框中的信息 var value=txt.value; //第一步:得到XMLHttpRequest对象. var xmlhttp=getXmlHttpRequest(); //2.设置回调函数 xmlhttp.onreadystatechange = function() { //5.处理响应数据 当信息全部返回,并且是成功 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var msg=xmlhttp.responseText; //通过responseText获取服务器信息 document.getElementById("s").innerHTML=msg; } }; //post请求方式,参数设置 xmlhttp.open("POST", "${pageContext.request.contextPath}/ajax3"); xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded"); xmlhttp.send("username="+value); } }; </script> </head> <body> <input type="text" name="username" id="t"><span id="s"></span> <%-- 在文本框后面显示服务器文字 --%> <br> <input type="text"> </body> </html>
innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容; 如:<div id="aa">这是内容</div> , 我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容; 也可以对某对象插入内容,如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容。
再新建一个my.js的文件,将ajax.jsp的部分代码抽取出来,如下就是 my.js 的代码.
function getXmlHttpRequest() { var xmlhttp = null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); // 针对于现在的浏览器包括IE7以上版本 } else if (window.ActiveXObject) { // 针对于IE5,IE6版本 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; }
然后写服务器的代码.
package cn.itcast.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Ajax3Servlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); //服务器响应下面的<用户名不可使用>编码格式为utf-8 request.setCharacterEncoding("utf-8"); List<String> names = new ArrayList<String>(); //把已经占用的名字写入集合 names.add("tom"); names.add("fox"); names.add("james"); names.add("张三"); PrintWriter out = response.getWriter(); String username = request.getParameter("username"); //拿到传递过来的username if (names.contains(username)) { //contains 是包含的意思,就是判断names里面是否包含了username,如果包含就返回true,否则false. out.print("<font color='red'>用户名不可使用</font>"); } else { out.print("<font color='green'>用户名可以使用</font>"); } out.flush(); //释放掉缓冲区的数据 out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
如下图显示效果,tom是服务器里存在的用户名.
tom123是服务器里面不存在的用户名.