<form > 用户名:<input id="usernameID" type="text" name="username" maxlength="10" /> <span id="resID"></span> </form>
因为有的浏览器可能会不支持ajax，所以我们需要来判断一个浏览器是否兼容。这里也就是先创建一个ajax对象。

function createAJAX(){ var ajax=null; try{ ajax=new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax=new XMLHttpRequest(); }catch(e2){ alert("您的浏览器不支持ajax，请更换浏览器试试！"); } } return ajax; }
然后就是按照前面分享的编码步骤进行：

//定位文本框，同时提供焦点事件 document.getElementById("usernameID").onblur=function(){ //获取文本框中输入的值 var username=this.value.trim(); //如果内容为空 if(username.length==0){ document.getElementById("resID").innerHTML="用户名不能为空"; }else{ //对汉字进行utf-8编码 username=encodeURI(username); var ajax=createAJAX(); var method="GET"; var url="${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime()+"&username="+username; ajax.open(method,url); ajax.send(null); ajax.onreadystatechange=function(){ if(ajax.readyState==4){ if(ajax.status==200){ var tip=ajax.responseText; document.getElementById("resID").innerHTML=tip; } } } } }
这里我们需要用到servlet来做服务器的接收和验证操作。这里是通过get方法来实现的。

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username=request.getParameter("username"); byte[] buf = username.getBytes("ISO-8859-1"); username = new String(buf,"UTF-8"); //System.out.println(username); String tip="<font color='green'>可注册</font>"; if("朱培".equals(username)){ tip="<font color='red'>该用户已存在</font>"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw=response.getWriter(); pw.write(tip); pw.flush(); pw.close(); }
运行Tomcat服务器。通过地址进行访问。

效果如下：当鼠标移开的时候，如果库中有则会提示用户已存在。

若用户不存在，则可以进行注册。

post方式很多都与get方法类似，但是还是有区别的，例如post方法需要设置ajax请求头为post，它会将请求的汉字自动进行utf-8的编码。这里用图片提示为例：

//定位文本框，同时提供焦点事件 document.getElementById("usernameID").onblur=function(){ //获取文本框中输入的值 var username=this.value.trim(); //如果内容为空 if(username.length==0){ document.getElementById("resID").innerHTML="用户名不能为空"; }else{ var ajax=createAJAX(); var method="POST"; var url="${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime(); ajax.open(method,url); //设置ajax请求头为post，它会将请求的汉字自动进行utf-8的编码 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); var content="username="+username; ajax.send(content); ajax.onreadystatechange=function(){ if(ajax.readyState==4){ if(ajax.status==200){ var tip=ajax.responseText; var imgElement = document.createElement("img"); //设置img标签的src/width/height的属性值 imgElement.src = tip; imgElement.style.width = "15px"; imgElement.style.height = "15px"; //定位span标签 var spanElement = document.getElementById("resID"); //清空span标签中的内容 spanElement.innerHTML = ""; //将img标签加入到span标签中 spanElement.appendChild(imgElement); } } } } }这段代码的第6布就是将从服务器中读取到的图片进行解析并且显示到span中，也就是我们前面设置的那个html页面。

对于selvet，使用post方法：

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String username=request.getParameter("username"); String tip="images/b.jpg"; if("朱培".equals(username)){ tip="images/a.jpg"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw=response.getWriter(); pw.write(tip); pw.flush(); pw.close(); }
效果如下：

关于省市级联的案例非常非常多，这里主要是通过客户端使用ajax进行无刷新拿到服务器中的数据。