先附上此次测试的相关页面名称及代码，共有三个文件：web.xml、index.jsp以及放在包 com.ajax.com下的AjaxServerlet.java。
代码及解释如下：
(1) index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1、获取到xmlhttprequest
function getXmlhttp() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
window.onload = function() {
document.getElementById('mybtn').onclick = function() {
//1、获取到xmlhttprequest 对象
var xmlhttp = getXmlhttp();
//2、xmlhttprequest的响应事件
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//5、操作获取到的信息
//5.1ajax返回的数据,转换为javascript对象
// 5.1.1 利用eval实现转换
var ajaxResult = eval("(" + xmlhttp.responseText + ")");
//5.1.2 利用jquery的方法,对于jQuery.parseJSON(),键值必须为双引号
/* var ajaxResult = jQuery.parseJSON(xmlhttp.responseText); */
alert(ajaxResult)
//5.2获取JavaScript对象的属性
var age = ajaxResult.age;
var name = ajaxResult.name;
//5.3获取到页面的DIV,并设置内容
var mydiv = document.getElementById("myAjax");
mydiv.innerHTML = "name:" + name + "," + "age:" + age;
}
}
//3、准备获取ajax请求
//3.1 对于get请求,带参数的方式,直接在open函数的请求地址带上参数
xmlhttp.open("POST", "AjaxServerlet", true);
//4、发送ajax请求
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
/*
*使用post方法提交时，通过send("age=18&name=zhang")传递参数
*使用get方法提交时，必须调用send(null)
*使用post或get都必须使用调用send()
*/
xmlhttp.send("age=18&name=zhang");
};
}
</script>
</head>
<body>
<button id="mybtn">点击</button>
<div id="myAjax"></div>
</body>
</html>
xmlhttp.readyState 的取值有0,1,2,3,4。readyState的值每一次改变都会自动调用 onreadystatechange 。
| ReadyState取值 | 描述 |
|
0
|
描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。 |
|
1
|
描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 |
|
2
|
描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 |
|
3
|
描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。 |
|
4
|
描述一种"已加载"状态；此时，响应已经被完全接收。 |
在点击按钮后，从创建XMLHttpRequest对象开始到数据交互结束，虽然ReadyState一直在变化，但由于会自动调用 onreadystatechange ，故能在整个过程中实现监听数据交互的整个流程并做出相应的回应，在这里，当 (xmlhttp.readyState == 4 && xmlhttp.status == 200) ，即数据发送完毕且连接正常时，获取后台传过来的数据并显示到 id 为 myAjax 的 div 中。
当不需要传递参数到后台时，可将send()方法中的字符串替换为null,即 send(null)，或在 open() 方法中使用 get 方式连接。
(附上 全面剖析XMLHttpRequest对象 链接：https://www.cnblogs.com/hyian/p/10675190.html ）
(2) web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <servlet> <servlet-name>AjaxServerlet</servlet-name> <servlet-class>com.ajax.com.AjaxServerlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServerlet</servlet-name> <url-pattern>/AjaxServerlet</url-pattern> </servlet-mapping> </web-app>
配置servlet的目的是响应 index.jsp 页面中点击按钮出发事件时交由后台java类处理，<url-pattern>标签中的"/AjaxServerlet"即为前端使用ajax时需要连接的url地址，使用时应去掉“/”。
(3) AjaxServerlet.java
package com.ajax.com; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxServerlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String age = request.getParameter("age"); String name = request.getParameter("name"); String personJSON = "{"name" + "":"" + name + ""," + ""age" + "":" + age + "}"; System.out.println(personJSON); response.getWriter().write(personJSON); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
获取前端传过来的数据并传参给前端。
-----end-----