Ajax学习内容 Java——Servlet

Ajax学习内容 Java——Servlet

Ajax部分代码，没有使用Ajax框架处理。

<script type="text/javascript">
  var xmlHttp;
  function createXmlHttpRequest(){
   
   if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
   }else{
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   }
  }
  
  //用户输入完用户名，将光标移动到密码框输入密码时，验证用户名是否被占用
  function checkUser(){
   createXmlHttpRequest();
   var userName = document.getElementById("userName").value;
   /*
    如何此处为get提交方式，应该写成：
    xmlHttp.open("get","checkU?userName" + userName,true);
    去除 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    把 xmlHttp.send("userName=" + userName); 修改成 xmlHttp.send(null);
    已URL行驶传递过去。
   */
   xmlHttp.open("post","checkU",true);//Ajax核心方法之1：指定发送方式，指定发送路径
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //定义一个函数接收返回数据
   xmlHttp.onreadystatechange = function(){
    //注意状态值，需要为4的时候才能可以满足条件
    if(xmlHttp.readyState == 4){
     document.getElementById("checkResult").innerHTML = xmlHttp.responseText;//接收返回结果
    }
   }
   xmlHttp.send("userName=" + userName);//发送值
    
    /*
    发送值在方法onreadystatechange后，必须这么去写，请注意
    */
   
  }
 </script>


-----------------------------------------------------------------------------------


HTML部分代码
<!-- 用一个span标签来处理加载内容 -->
<input type="text" name="userName" id="userName" onblur="checkUser();"/><span id="checkResult"></span><br/>


-------------------------------------------------------------------------------------

Servlet代码

  response.setCharacterEncoding("utf-8");
  //取的传入的请求参数
  String userName = request.getParameter("userName");
  //判断是否为abc，然后响应输出信息到界面
  if(!userName.equals("abc")){
   response.getWriter().print("恭喜您，用户名可以使用!");
  }else{
   response.getWriter().print("对不起，用户名已被占用！");
  }