AJAX第二例(发送POST请求)

女爷i 2022-08-05 12:19 153阅读 0赞

第二例：发送POST请求(如果发送请求时需要带有参数，一般都用POST请求)  
  
\* open：xmlHttp.open("POST" ....);  
\* 添加一步：设置Content-Type请求头：  
  > xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

\* send：xmlHttp.send("username=zhangSan&password=123");//发送请求时指定请求体

servlet类：

package cn.edu.web.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/AServlet")
    public class AServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
    	//下面是GET请求时执行的方法
    	@Override
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//设置编码(因为胡没有获取参数就不用设置request.set那个UTF-8)
    		response.setContentType("text/html;charset=utf-8");
    		//在控制台输出Hello AJAX
    		System.out.println("(GET:)Hello AJAX");
    		//在浏览器里面点击按钮局部刷新后输出
    		response.getWriter().print("(GET:)Hello AJAX<br />"+"服务器响应了页面的局部刷新，这就是AJAX");
    	}
    	//下面是POST请求执行时的方法
    	@Override
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		response.setContentType("text/html;charset=utf-8");//把信息响应到浏览器里面要设置编码为UTF-8(不然在浏览器里面的中文会乱码)
    		
    		request.setCharacterEncoding("utf-8");//获取请求的编码为UTF-8(如果获取的参数值中有中文作用就来了)
    		String username = request.getParameter("username");//utf-8,获取请求参数
    		
    		System.out.println("(POST:) Hello AJAX"+",username:"+username);
    		response.getWriter().print("(POST:) Hello AJAX<br />"+"服务器响应了页面的局部刷新，这就是AJAX"+",username"+username);//utf-8
    	}
    }

jsp页面：

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>POST-AJAX</title>
    <script type="text/javascript">
    //创建异步对象
    function createXMLHttpRequest(){
    	try {
    		return new XMLHttpRequest();//大多数浏览器支持
    	} catch (e) {
    		try {
    			return ActiveXObject("Msxml2.XMLHTTP");//IE6.0	
    		} catch (e) {
    			try {
    				return ActiveXObject("Microsoft.XMLHTTP");//IE5.5之前
    			} catch (e) {
    				alert("你的浏览器是啥呀，古董吗！");
    				throw e;
    			}
    		}
    	}
    }
    
    window.onload = function(){//文档加载完毕后执行
    	var btn = document.getElementById("btn");
    	btn.onclick = function(){//给按钮的点击事件注册监听
    		/*
    		ajax四步操作，得到服务器的响应
    		把响应结果显示到h1元素中
    		*/
    		/*
    		1.得到异步对象
    		*/
    		var xmlHttp = createXMLHttpRequest();
    		/*
    		2.打开与服务器的连接
    			指定请求方式
    			指定请求URL
    			指定是否为异步请求
    		*/
    		/****修改open方法，指定请求方式为POST*****/
    		//注意最上面要加上jstl头部标签声明
    		xmlHttp.open("post","<c:url value='/AServlet' />",true);
    		/****设置请求头，Content-Type****/
    		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		/*
    		3.发送请求
    		*/
    		xmlHttp.send("username=张三&password=123");//如果是get请求没有请求体，但也要给出null,不然FireFox可能会不能发送！
    		/*
    		4.给异步对象的onreadystatechange时间注册监听器
    		*/
    		xmlHttp.onreadystatechange =function(){//当xmlHttp的状态发生变化时执行
    			//双重判断：xmlHttp的状态为4(服务器响应结果),以及服务器响应的状态码为200
    			if(xmlHttp.readyState==4 && xmlHttp.status==200){
    				//获取服务器的响应结果
    				var text=xmlHttp.responseText;
    				//获取h1元素
    				var h1 = document.getElementById("h1");
    				h1.innerHTML=text;
    			}
    			
    		}
    	}
    }
    </script>
    </head>
    <body>
    <button id="btn">点击这里</button>
    <h1 id="h1"></h1>
    </body>
    </html>