Ajax初级


传统Web与Ajax的区别：

servlet层

@javax.servlet.annotation.WebServlet(name = "AjaxServlet",urlPatterns = {"/AjaxServlet"})
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         String name=request.getParameter("uname");
         if (name.equals("admin")){
            response.getWriter().write("true");
         }else{
             response.getWriter().write("false");
         }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       doPost(request,response);
    }
}


ajax.jsp页面

</head>
<body>
    <form id="form1">
        <input name="uname"/><span id="msg"></span>
        <input name="upwd" value="000000"/>
        <div id="box">

        </div>
    </form>
</body>


最原始的提交方式：

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">

$(function () {
    $("[name=uname]").blur(function () {
     //原始方法的调用
      oldajax();
});

  /*
  * 最原始的方法
  */
  function oldajax() {
      //1.发送ajax请求
      var xhr=null;
      if(window.XMLHttpRequest){  //非IE浏览器（版本比较高的IE）
          xhr=new XMLHttpRequest();
      }else{
          //code execute here,说明是IE
          xhr=new ActiveXObject("Microsoft.XMLHTTP");
      }
      //01.能准备发送请求的   方式   目标地址    是否异步 true 异步
      xhr.open("post","/AjaxServlet",true);
      xhr.onreadystatechange=function () {
          if(xhr.readyState==4 && xhr.status==200){  //认为请求已经成功发送，并且客户端浏览器已经成功获取到服务器响应的数据
              //一个系统对象的属性，获取到响应回来的文本
              var data=xhr.responseText;
              // alert(data);
              $("#msg").html(data);
          }
      };
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      xhr.send("uname="+$("[name=uname]").val());
  }

  }

</script>

效果如下：
输入的值与判断的值相同时：


输入的值与判断的值不同：