<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = function() {
var button = document.getElementById("button");
button.onclick = function() {
var xmlRequest = new XMLHttpRequest();//1.创建异步请求对象
//2.打开服务器的连接,参数：Get/post url 异步为true，同步为false
xmlRequest.open("Get", "/MyServlet/OtherServlet", true);
//3.发送请求
xmlRequest.send(null);//Get()方法没有请求体
//给异步请求对象添加状态监听事件
xmlRequest.onreadystatechange = function() {//当异步对象状态发生改变触发该事件
/*5种状态：
0状态：刚创建，未调用open（）方法
1状态：请求开始，调用open（）方法，未调用send()方法
2状态：请求完成，调用send（）方法
3状态：服务器开始响应，但未响应完全
4状态：服务器响应完全，结束响应（通常只关心这个状态）
*/
//判断服务器是否相应完全并且是否相应成功200状态码
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
/*获取响应内容，要和servlet的响应类型对应
responseText:获取响应的文本内容，包括普通文本内容（text/html;charset=utf-8）和json串（也就是字符串）
responseXml:获取响应的xml格式，（text/xml;charset=utf-8）,这时获取的是document对象，需要进行xml的解析
*/
var text = xmlRequest.responseText;
var h2 = document.getElementById("h2");
//将相应信息放入h2标签中完成局部刷新
h2.innerHTML = text;
}
};
// 消除缓存带来的麻烦
// 1）在路径后面直接加个随机参数（缺点：占浏览器资源，每次请求都缓存起来，不推荐）
//2） setRequestHeader(“If-Modified-Since”,0);(推荐使用，完美解决方案。)
//post方式多了个请求体和请求头的设置，setRequestHeader("Context-Type","application/x-www-form-urlencoded")
xmlRequest.open("Post", "/MyServlet/OtherServlet", true);
/*
text/html:文本类型为text/html，浏览器在接受该文本会用html解析器解析
text/plain:普通文本，浏览器在接收该文本不做任何操作
text/xml:文本类型为text/xml,需要自己解析，一般不用
application/x-www-form-urlencoded:序列化处理，键值对形式。
application/json:json格式
设置文本类型：
html和jsp：页面都写好了contentType="text/html; charset=UTF-8"，不用自己写
servlet：response.setContentType();参数可为："text/html;charset=utf-8"或"text/xml;charset=utf-8"
所以要用对应格式接收servlet的响应数据，比如：
异步请求对象.responseText:可接收普通文本和json串（也就是字符串）
异步请求对象.responseXml:可接收xml文本
ajax的Content-Type:需要自己写，格式如下（jQuery中做过封装，另当别论）(Post方式)
application/x-www-form-urlencoded:序列化处理，键值对形式。（Post方式）
application/json:json格式（post方式）
json:
格式：属性只能用双引号括起来，属性值格式就是对应类型的形式
例如：{"name":"张三","age":25}
对象：用{}表示
数组：用[]表示
字符串：""
json串：
格式：将json变成字符串。注意：js中双引号和单引号一样，但是Java中是不一样的，要进行转义
例如：'{"name":"张三","age":25}',Java中："{\"name\":\"张三\",\"age\":25}"
*/
xmlRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlRequest.send("userName=张三&passWord=123");//不同于Get这里要给出要传递的数据
};
};
</script>
</head>
<body>
<button id="button">添加</button>
<h2 id="h2"></h2>
</body>
</html>