AJAX第二例(发送POST请求)

浏览数：19 / 时间：2015年06月09日

第二例：发送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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

AJAX第二例(发送POST请求)