* 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> 原文链接：https://www.f2er.com/ajax/163496.html