Ajax入门

迈不过友情╰ 2022-04-05 09:18 194阅读 0赞

原生js使用ajax：  
get和post两种方式

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <script type="text/javascript">
    
    	function fn1(){
    		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
    		var xmlHttp = new XMLHttpRequest();
    		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
    		xmlHttp.onreadystatechange = function(){
    			if(xmlHttp.readyState==4&&xmlHttp.status==200){
    				//5、接受相应数据
    				var res = xmlHttp.responseText;
    				document.getElementById("span1").innerHTML = res;
    			}
    		}
    		//3、绑定地址
    		xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
    		//4、发送请求
    		xmlHttp.send();
    		
    	}
    	function fn2(){
    		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
    		var xmlHttp = new XMLHttpRequest();
    		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
    		xmlHttp.onreadystatechange = function(){
    			if(xmlHttp.readyState==4&&xmlHttp.status==200){
    				//5、接受相应数据
    				var res = xmlHttp.responseText;
    				document.getElementById("span2").innerHTML = res;
    			}
    		}
    		//3、绑定地址
    		xmlHttp.open("POST","/WEB22/ajaxServlet",false);
    		//4、发送请求
    		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    		xmlHttp.send("name=wangwu");
    		
    	}
    
    	
    </script>
    
    </head>
    <body>
    	<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
    	<br>
    	<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
    	<br>
    	<input type="button" value="测试按钮" onclick="alert()">
    </body>
    </html>

package com.itheima.ajax01;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class AjaxServlet extends HttpServlet {
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		
    		//response.getWriter().write("zhangsan");
    		
    		/*try {
    			Thread.sleep(5000);
    		} catch (InterruptedException e) {
    			e.printStackTrace();
    		}*/
    		
    		String parameter = request.getParameter("name");
    		
    		response.getWriter().write(Math.random()+parameter);
    		
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    }

jQuery方式：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    
    
    	function fn1(){
    		//get异步访问
    		$.get(
    			"/WEB22/ajaxServlet2", //url地址
    			{"name":"张三","age":25}, //请求参数
    			function(data){ //执行成功后的回调函数
    				//{\"name\":\"tom\",\"age\":21}
    				alert(data.name);
    			},
    			"json"
    		);
    	}
    	function fn2(){
    		//post异步访问
    		$.post(
    			"/WEB22/ajaxServlet2", //url地址
    			{"name":"李四","age":25}, //请求参数
    			function(data){ //执行成功后的回调函数
    				alert(data.name);
    			},
    			"json"
    		);
    	}
    	function fn3(){
    		$.ajax({
    			url:"/WEB22/ajaxServlet2",
    			async:true,
    			type:"POST",
    			data:{"name":"lucy","age":18},
    			success:function(data){
    				alert(data.name);
    			},
    			error:function(){
    				alert("请求失败");
    			},
    			dataType:"json"
    		});
    	}
    </script>
    
    </head>
    <body>
    	<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
    	<br>
    	<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
    	<br>
    	<input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>
    	<br>
    </body>
    </html>

package com.itheima.ajax02;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class AjaxServlet2 extends HttpServlet {
    
    	protected void doGet(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+"  "+age);
    		
    		
    		//java代码只能返回一个json格式的字符串
    		response.setContentType("text/html;charset=UTF-8");
    		response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
    		
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    }