Ajax

1、概念

Ajax，Asynchronous JavaScript And Xml。异步的javascript和XML
JavaScript负责发送请求，XML作为一种响应的数据

Ajax主要用来增强用户体验。因为它是浏览器与服务器之间进行异步交互，而无需刷新页面的技术
它只会局部更新页面，而不用刷新整个窗口

2、异步和同步

⑴ 同步请求
当向服务器发请求时，必须得到响应成功后，才能发送其他的请求，有一个等待的过程，而且响应成功后会刷新整个页面

⑵ 异步请求
当向服务器发请求时，不用等响应成功，就可以发送其他请求，不需要等待，而且响应成功后局部刷新页面

3、发送Ajax请求

步骤

⑴ 创建XMLHttpRequest对象
Ajax的所有操作，都由该对象完成

⑵ 设置请求信息
⑶ 发送请求
⑷ 接收响应

相关函数和属性

XMLHttpRequest

new XMLHttpRequest();
创建XMLHttpRequest对象

open

open(method, url, async, username, password);
设置请求参数

method:请求方式。可选值有GET和POST，不区分大小写
url:请求地址
async:设置当前请求是否异步【true】；同步【false】。默认是true
username:用户名
password:密码
当发送的请求需要权限时，使用username和password

send

send(body);
发送请求
send方法中传入一个Object类型的请求体。GET请求没有请求体，可以不传

如果是POST请求，则可以在里面写入请求参数字符串，格式：
键1=值1&键2=值2

setRequestHeader

setRequestHeader(header, value);
设置请求头信息
一般用于：
当发送POST请求时，需要设置一个请求头对请求体中的请求参数进行URL编码

setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
注意：
⑴ 这是固定写法， 不能修改，否则无效
⑵ 当发送POST请求时，如果不添加该语句，则服务器将无法获取请求参数（null）
⑶ 该语句需要写在open函数的下面，send函数的上面
⑷ GET请求的参数是写在URL地址中的，故该方法对GET请求的参数无效

这个参数就是form表单中的enctype属性

<form enctype="application/x-www-form-urlencoded" ></form>
enctype属性规定在发送到服务器之前应该如何对表单数据进行编码
application/x-www-form-urlencoded
在发送前编码所有字符（默认）

responseText

XMLHttpRequest的属性
接收响应的文本内容

注意：不是说已发送请求，就可以接收响应。这期间有一个等待的过程。需要给XMLHttpRequest的onreadystatechange，设置一个事件，来监听是否响应已经就绪

onreadystatechange

onreadystatechange
每当 readyState 改变时，就会触发 onreadystatechange 事件

readyState

XMLHttpRequest的属性
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status

XMLHttpRequest的属性

200: "OK"
404: 未找到页面
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
responseXML

XMLHttpRequest的属性
接收响应的XML数据

同responseText一样，接收数据时，有一个等待的过程

注意：Servlet发送XML的响应时，需要提前声明响应的类型：

response.setContentType("text/xml;charset=UTF-8");
否则xmlhttp.responseXML无法获取响应的内容（null）

获取XML数据中的子元素的文本内容

⑴ 接收响应的XML数据
var docEle = xmlhttp.responseXML;

⑵ 获取子元素标签
var childEle = docEle.getElementsByTagName(“子元素标签名”)[下标];

⑶ 获取子元素标签的第一个子节点（文本节点）
var textNode = childEle.firstChild;

⑷ 获取文本节点的文本内容
var text = textNode.nodeValue;

GET请求示例

【JavaScript代码】

<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//设置请求信息
xhr.open("GET", "${pageContext.request.contextPath}/ajaxServlet");

// 发送请求【GET请求没有请求体】
xhr.send();

// 给XMLHttpRequest对象，绑定state改变的函数
xhr.onreadystatechange = function(){
// var readyState = xhr.readyState;
// var statusNum = xhr.status;
// console.log(readyState + " : " + statusNum);

// 当请求已完成，且响应已就绪【readyState等于4】
// 当响应状态码为200时
if (4 == xhr.readyState && 200 == xhr.status) {
// 获取请求内容
var text = xhr.responseText;
var h1 = document.getElementById("h1");
h1.innerHTML = text;
}
};

};
};
</script>
【body内容】

<input id="btn" type="button" value="通过按钮发送GET请求" />
<h1 id="h1"></h1>
【AjaxServlet】

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
resp.getWriter().println("响应内容");
}
POST请求示例

【JavaScript代码】

<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "${pageContext.request.contextPath}/ajaxServlet");
// 对POST的请求参数进行URL编码
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送请求参数
xmlhttp.send("name=张三&password=1234");
xmlhttp.onreadystatechange = function(){
if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
var text = xmlhttp.responseText;
alert(text);
}
};
};
};
</script>
【body内容】

<button id="btn">发送POST请求</button>
【AjaxServlet】

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置解析请求参数的编码格式
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String password = request.getParameter("password");
System.out.println("name: " + name + ", password: " + password);

// 设置响应编码
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("响应POST请求");
}
示例响应数据是XML

【JavaScript代码】

<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "${pageContext.request.contextPath}/ajaxServlet");
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
// 接收响应的XML数据
var DocEle = xmlhttp.responseXML;
// 获取第一个name子元素
var nameEle = DocEle.getElementsByTagName("name")[0];
// 获取name元素的第一个子节点
var nameNode = nameEle.firstChild;
// 获取节点值
var name = nameNode.nodeValue;
alert("name: " + name);
}
};
};
};
</script>
【body内容】

<button id="btn">获取XML响应</button>
【AjaxServlet】

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置响应体类型为XML
response.setContentType("text/xml;charset=UTF-8");
String xml =
"<person>" +
"<name>张三</name>" +
"<age>14</age>" +
"</person>";
response.getWriter().write(xml);
}
4、兼容IE5和IE6

问题

由于IE5和IE6不认识XMLHttpRequest，所以IE5和IE6无法使用XMLHttpRequest

IE5找不到XMLHttpRequest

这时就需要使用ActiveX 对象

new ActiveXObject("Microsoft.XMLHTTP");
通过这种方式得到的对象，就可以使用Ajax了

封装一个函数，用来创建对象

function createXMLHttp() {
var xmlhttp;
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
// 出错了，就创建ActiveXObject对象
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持Ajax！");
}
}

return xmlhttp;
};
再创建对象的时候，就调用函数即可：

var xmlhttp = createXMLHttp();
5、JSON

概念

JavaScript Object Notation，JavaScript的对象表示法。是一种轻量级的数据交换格式
它是一种可以跨平台，跨语言的数据交换格式
由于XML格式的数据，解析复杂、性能查，所以现在基本已被JSON所代替

对比：
【XML格式数据】

<person>
<name>张三</name>
<age>14</age>
</person>
【JSON格式数据】

{"name":"张三", "age":14}
JSON格式

JSON对象

{“属性名1”:”属性值1”, “属性名2”:”属性值2”, …}

注意事项：
⑴ 属性名必须使用双引号（”“）引起来
⑵ 属性名和属性值之间用冒号（:）分割
⑶ 多个属性之间，用逗号（,）分割

JSON数组

[属性值1, 属性值2, 属性值3, …]

多个属性值之间用逗号（,）分割

JSON属性可以使用的类型

字符串
数字
布尔类型
null
对象
数组
在JavaScript中JSON对象与JSON字符串互转

JSON字符串转JSON对象

JSON.parse(JSON字符串);
得到一个Object类型的JSON对象

JSON对象转JSON字符串

JSON.stringify(JSON对象);
得到一个JSON字符串

使用示例

// 创建JSON字符串
var jsonStr = '{"name":"张三", "age":14}';
// 创建JSON对象
var jsonObj = {
"name":"李四",
"age":12
};

// 将JSON字符串转换为JSON对象
var Object = JSON.parse(jsonStr);
// 获取name属性值
alert(Object.name);

// 将JSON对象转换为JSON字符串
var str = JSON.stringify(jsonObj);
alert(typeof str);
alert(str);
在Java中JSON对象与JSON字符串互转

方法

需要调用Gson类里的方法，导入gson-2.2.4.jar包

new Gson();
创建一个Gson对象

public String toJson(Object src) {}
将Object对象转换为JSON字符串

public <T> T fromJson(String json, Class<T> classOfT) throws JsonSyntaxException {}
将JSON字符串转换为Object类型的对象

使用示例

【Person（JavaBean）】

String类型的name和age，提供有参构造，重写toString方法
【JavaScript代码】

<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "${pageContext.request.contextPath}/ajaxServlet");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 创建JSON字符串
var jsonStr = '{"name":"张三", "age":14}';
// 发送请求
xmlhttp.send("jsonStr=" + jsonStr);
xmlhttp.onreadystatechange = function(){
if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
var respJSONStr = xmlhttp.responseText;
alert(respJSONStr);
// 将获取到的JSON字符串转换为JSON对象
var jsonObj = JSON.parse(respJSONStr);
alert(jsonObj.name);
}
};
};
};
</script>
【body内容】

<button id="btn">发送JSON对象，获取JSON字符串</button>
【AjaxServlet】

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置请求字符集编码
request.setCharacterEncoding("UTF-8");
// 设置相应字符类型
response.setContentType("text/html;charset=UTF-8");

// 获取请求参数【JSON字符串】
String jsonStr = request.getParameter("jsonStr");
// 创建Gson对象
Gson gson = new Gson();
// 转换为Object
Object obj = gson.fromJson(jsonStr, Person.class);
System.out.println(obj);

// 创建一个Person对象
Person person = new Person("李四", "12");
// 将对象转换为JSON字符串
String respJSONStr = gson.toJson(person);
response.getWriter().write(respJSONStr);
}
测试将Map集合转换为JSON字符串

Map<String, Person> map = new HashMap<String, Person>();
map.put("p1", new Person(1, "张三", 14));
map.put("p2", new Person(2, "李四", 17));
map.put("p3", new Person(3, "王五", 12));

Gson gson = new Gson();

/*
* {
* "p1":{
* "id":1,
* "name":"张三",
* "age":14
* },
* "p2":{
* "id":2,
* "name":"李四",
* "age":17
* },
* "p3":{
* "id":3,
* "name":"王五",
* "age":12
* }
* }
*/
String jsonStr = gson.toJson(map);
System.out.println(jsonStr);

/*
* {
* p1={
* id=1.0,
* name=张三,
* age=14.0
* },
* p2={
* id=2.0,
* name=李四,
* age=17.0
* },
* p3={
* id=3.0,
* name=王五,
* age=12.0
* }
* }
*/
Object obj = gson.fromJson(jsonStr, Map.class);
System.out.println(obj);
6、使用jQuery发送Ajax请求

发送GET请求

$.get(url, [data], [callback], [type]);
url:待载入页面的URL地址
data:待发送 Key/value 参数。一个Object类型的对象
callback:载入成功时回调函数
type:返回内容格式，xml, html, script, json, text, _default

发送POST请求

$.post(url, [data], [callback], [type]);
其参数和get函数里的参数一样

默认获取的响应类型为JSON

$.getJSON(url, [data], [callback]);
其参数和get函数里的前三个参数一样

Tips：该函数等同于

$.get(url, [data], [callback], "json");
即最后一个参数【获取到的响应的格式】指定为了json

注意：
⑴ 该函数需要调用Servlet中的doGet方法来处理请求
⑵ 响应参数是JSON字符串，其会被自动转换为JSON对象[object Object]

测试GET和POST请求

【jQuery代码】

<script type="text/javascript">
$(function(){
$("#getBtn").click(function(){
// 请求地址
var url = "${pageContext.request.contextPath}/ajaxServlet";
// 请求参数
var data = {
"name":"张三",
"age":14
};
// 响应成功的回调函数
var fun = function(data){
alert(data);
};
// 响应类型
var type = "text";
$.get(url, data, fun, type);
});

$("#postBtn").click(function(){
var url = "${pageContext.request.contextPath}/ajaxServlet";
$.post(url, function(data){
alert(data);
}, "text");
});
});
</script>
【body内容】

<input id="getBtn" type="button" value="发送GET请求" /><br /><br />
<input id="postBtn" type="button" value="发送POST请求" />
【AjaxServlet】

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name: " + name + ", age: " + age);

response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("响应GET请求");
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("响应POST请求");
}
测试接收JSON响应

【Person（JavaBean）】

String类型的name和age，提供有参构造
【jquery代码】

<script type="text/javascript">
$(function(){
$("#getJSONBtn").click(function(){
var url = "${pageContext.request.contextPath}/ajaxServlet";
$.getJSON(url, function(data){
alert(data);
alert(data.name);
});
});

$("#getBtn").click(function(){
var url = "${pageContext.request.contextPath}/ajaxServlet";
$.get(url, function(data){
alert(data);
alert(data.name);
}, "json");
});
});
</script>
【body内容】

<input id="getJSONBtn" type="button" value="通过getJSON函数获取JSON字符串响应" /><br /><br />
<input id="getBtn" type="button" value="通过get函数获取JSON字符串响应" />
【AjaxServlet】

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Person person = new Person("张三", "14");
Gson gson = new Gson();
String jsonStr = gson.toJson(person);

response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(jsonStr);
}