2019-03-09

AJAX例子

后台：

为了更好的了解AJAX，下面使用代码来详细介绍操作：

public class LogincheckServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
          String sname=null;
          Connection conn=null;
  		  Statement stat =null;
  	      PreparedStatement prep=null;
  	      ResultSet rs=null;
          String sql="select count(*) from staff where sname =?";
          int flag=0;
		//1.读取由异步请求对象发送的参数	
		sname =req.getParameter("sname");
		
		//2.JDBC，查询当前部门名称在数据库中是否已经存在；
            try {
            	conn = DataAccess.getConnection();
            	//需要自己写DataAccess类，然后在在类里面创建getConnection()方法；
        		//执行sql语句
        		prep=conn.prepareStatement(sql);
        	    prep.setString(1, sname);
        		rs=prep.executeQuery();
        		//处理结果；
        		rs.next();
        		flag=rs.getInt("count(*)");
            	
            }catch(Exception ex){
            	ex.printStackTrace();
            }
		/*try {
			Thread.sleep(10000);//故意延长异步请求对象工作时间；
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}*/
		//3.将判断结果发送给【异步请求对象】
            resp.setCharacterEncoding("utf-8");
            PrintWriter out=resp.getWriter();
           if (flag>=1) {
			out.print("正确");
		}
           else {
        	   out.println("用户不存在");
           }
           // System.out.println("判断结果 "+flag);
		//resp.getWriter().print(flag);
	}
}
``` 
### 前台：
``` bash
<label for="user" class="label">Username</label>
<input id="user" name="username" type="text" onblur="checkSta()" class="input">
<font id="myfont" color="red">*</font>
<!--通过onblur="checkSta()"调用JavaScript（当鼠标离开这个文本框并点击其它地方时触发）-->
<!--myfont用于显示信息-->

JavaScript方法：

<script type="text/javascript">
 function checkSta()
 {
	 /*
	 //方法一：
	 
	   //1.创建一个异步请求对象
	        var xmlHttp=new XMLHttpRequest();
	   //2.设置异步请求对象工作状态监听
	   xmlHttp.onreadystatechange=function(){
		   if(xmlHttp.readyState == 4)
			   {
		   //从异步请求对象身上得到服务器端返回响应数据
		   var data=xmlHttp.responseText;
		  //局部刷新效果
		  if(data >=1)
			  {
			  document.getElementById("myfont").innerText="正确";	 
			  }
		  else{
		  document.getElementById("myfont").innerText="用户不存在";	
		  }
			   }
		 };
		 //3.初始化异步请求对象；
		var param= document.getElementById("user").value;
		 //xmlHttp.open("get","logincheckServlet?sname="+param,false);//同步；
		 xmlHttp.open("get","logincheckServlet?sname="+param,true);//异步
		 //4.通知异步请求对象发送请求；
		 xmlHttp.send();
		 
		 //5.浏览器执行的命令
		 window.alert("德玛西亚.....");
		 */
		 
		 //方法二：
		 /*$.ajax({
			 type:"get",
			 url:"logincheckServlet",
			 data:{sname:$("#user").val()},
			 dataType:"text",
			 success:fun1,
			error:fun2
		 });
		 
		 //data就是从异步请求对象取得相应数据
		 function fun1(data){
			 $("#myfont").text(data);
		 }
		 function fun2()
		 {
			 alert("服务端繁忙")
		 }
		 */
		 //方法三：
	 $.get(
		 "logincheckServlet",
		 "sname="+$("#user").val(),
		   fun1
	 )
 }
	 //data就是从异步请求对象取得相应数据
	 function fun1(data){
		 $("#myfont").text(data);
	 }
	 function fun2()
	 {
		 alert("服务端繁忙")
	 }
<!--一共写了三种方法，需要哪种就把注释去掉，把其它方法注销掉即可-->
</script>