天天看點

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>


      
效果如下:
輸入的值與判斷的值相同時:


輸入的值與判斷的值不同:

      

轉載于:https://www.cnblogs.com/sujulin/p/7635116.html