JavaWeb学习笔记及案例(三)Ajax与JQuery

1.Ajax

1.1Ajax的get请求
1.在js中创建对象，固定格式

function ajaxFunction(){
		var xmlHttp;
		try{ // Firefox, Opera 8.0+, Safari
		     xmlHttp=new XMLHttpRequest();
		 }
		 catch (e){
		    try{// Internet Explorer
		          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		       }
		     catch (e){
		       try{
		          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		       }
		       catch (e){}
		       }
		 }	
		 return xmlHttp;
	}

2.页面点击

<a href="" onclick="get()">使用ajax请求</a>

2.执行get请求

 function get(){
    	//1.创建xmlhttprequest对象请求
    	var request = ajaxFunction();
    	/* 2.发送请求
    	参数1：请求的类型
    	参数2：请求的路径
    	参数3：true代表异步
    	*/
    	//传参
    	request.open("GET","DemoServlet01?name=zhangsan&&age=18",true);
    	request.send();

    //2.3接收数据
    	request.onreadystatechange=function()
    	  {
    	  if (request.readyState==4 && request.status==200)
    	    {
    	    alert(request.responseText);
    	    }
    	  }
     }

4.Servlet如下

public class DemoServlet01 extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		System.out.println("收到了请求name==="+name+"===age==="+age);
		//响应
		//传到显示页面的数据
		response.getWriter().write("收到的姓名是"+name);
	}
}

显示效果在这里插入图片描述
控制台会输出接收到的结果
1.2Ajax的post请求
1.页面点击

 <a href="" onclick="post()">使用ajax的post请求</a>

2.js处理【post方法】
ajaxFunction()为get请求里的第一步固定写法

 function post(){
    	//创建对象
    	var request = ajaxFunction();
    	//发送请求
    	request.open("post","DemoServlet01",true);
    	//传数据过去：需要首先设置这个响应头
    	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    	request.send("name=post&&age=101");
    	//接收数据
    	request.onreadystatechange=function(){
    		if(request.readyState==4 && request.status==200){//准备就绪
    			alert(request.responseText);//页面上弹出数据
    		}
    	}
    }

3.DemoServlet01里传参的处理及响应内容

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		System.out.println("收到了请求name==="+name+"===age==="+age);
		//响应
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write("收到的姓名是"+name+"and 年龄是"+age);
	}

注意post和get带数据的方式不同；post带数据放在request.send()里

1.3案例：校验用户名
步骤1：搭建一个Servlet
checkServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		try {
			request.setCharacterEncoding("UTF-8");
			response.setContentType("text/html;charset=utf-8");
			String name = request.getParameter("name");
			UserDao dao = new UserDaoImpl();
			boolean isExit = dao.checkUser(name);
			
			if(isExit){
				response.getWriter().print(0);
			}else{
				response.getWriter().print(1);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

步骤2：创建Dao及Dao的实现

public interface UserDao {
	/**
	 * @param 用于检测用户名是否存在
	 * @return
	 * @throws SQLException 
	 */
	boolean checkUser(String name) throws SQLException;
}

public class UserDaoImpl implements UserDao {
	@Override
	public boolean checkUser(String name) throws SQLException {
		QueryRunner runner = new QueryRunner(JDBCUtils.getDataSource());
		String sql = "select count(*) from t_user where username=?";
		Long query = (Long) runner.query(sql, new ScalarHandler(),name);
		//若大于0就是true
		return query>0;
	}
}

步骤3：创建demo.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxFunction(){
    var xmlHttp;
    try{ // Firefox, Opera 8.0+, Safari
         xmlHttp=new XMLHttpRequest();
     }
     catch (e){
        try{// Internet Explorer
              xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
           }
         catch (e){
           try{
              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
           catch (e){}
           }
     }  
     return xmlHttp;
}
function post(){
	var req = ajaxFunction();
	//获取输入框的值
	var name = document.getElementById("name").value;
	
	//发送请求
	req.open("post","checkServlet",true);
	//传数据过去
    req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    req.send("name="+name);
    //接收数据
    req.onreadystatechange=function(){
        if(req.readyState==4 && req.status==200){
          /*  alert(req.responseText); */
           if(req.responseText==0){
        	   alert("用户名存在");
        	   document.getElementById("span01").innerHTML="<font color='red'>用户名存在</font>"
           }else{
        	   document.getElementById("span01").innerHTML="<font color='blue'>用户名可以使用</font>"
           }
        }
    }
}

</script>
</head>
<body>
	<form action="SubmitServlet" method="post">
	     <table border="1" cellspacing="0" width="500">
	        <tr>
	            <td>用户名:</td>
	            <td>
	            <input type="text" name="name" id="name" onblur="post()">
	            <span  id="span01"></span>
	            </td>
	            
	        </tr>
	        <tr>
	            <td>密码:</td>
	            <td><input type="password" name="passwd"></td>
	        </tr>
	        <tr>
	            <td>邮箱:</td>
	            <td><input type="text" name="mail"></td>
	        </tr>
	        <tr>
	            <td colspan="2"><input type="submit" value="注册"></td>
	        </tr>
	     </table>
	</form>
</body>
</html>

2.JQuery

1.load的用法

$("#元素id").load(URL地址)；//语法格式

$("#div").load(servlet的地址);

2.get写法

$.get(URL,callback);//语法格式

$.get("day/demoServlet",function(data,status){
		$("#div1".text(data));//或者$("#div").html(data);
})

3.post语法格式

$.post(url,data,callback);//后两个为可选项

function post(){
	$.post("day/servlet",{name:"张三",age：23},function(data,status){
		${"#div"}.html(data);
	})
}

4.使用jquery改良1.3案例中用户名校验的代码
1.servlet代码

public class checkServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		try {
			request.setCharacterEncoding("UTF-8");
			response.setContentType("text/html;charset=utf-8");
			String name = request.getParameter("name");
			UserDao dao = new UserDaoImpl();
			boolean isExit = dao.checkUser(name);
			
			if(isExit){
				response.getWriter().print(0);
			}else{
				response.getWriter().print(1);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

2.jsp页面的js处理
*****body页面

 <table border="1" cellspacing="0" width="500">
            <tr>
                <td>用户名:</td>
                <td>
                <input type="text" name="name" id="name" onblur="checkUserName()">
                <span  id="span01"></span>
                </td>
            </tr>
</table>

****js处理

function checkUserName(){
    	  //1.获取输入框的内容
    	  var name = $("#name").val();
    	  //2.发送请求
    	  $.post("/HEIMA_Ajax_JQuery/checkServlet",{name:name},function(data,status){
    		   if(data==0){
    			   //3.传输数据
    			  $("#span01").html("<font color='red'>用户名存在</font>");
    		  }else{
    			  $("#span01").html("<font color='green'>用户名可用</font>");
    		  } 
    	  });    	  
      }

JavaWeb学习笔记及案例(三)Ajax与JQuery

1.Ajax

2.JQuery

猜你喜欢