[1] AJAX简介
> 全称： Asynchronous JavaScript And XML
> 异步的JavaScript和XML
> AJAX就是通过JavaScript向服务器发送请求，并接收响应，然后我们在通过DOM来修改页面。
> XML指的是服务器响应的数据的格式。
> 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。
[2] 同步和异步
> 同步：
当我们通过浏览器向服务器发送一个请求时，浏览器会刷新整个页面。
> 异步：
当我们向服务器发送请求时，不是刷新整个网页，而是只刷新网页的一部分。
[3] XMLHttpRequest对象
> 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
> 在XMLHttpRequest对象中封装发送给服务器请求报文，同时在服务器发回响应时，响应信息也会在对象中封装。
> 如何获取XMLHttpRequest对象
- var xhr = new XMLHttpRequest();
[4] 使用步骤
1.创建XMLHttpRequest对象
大部分比较新的浏览器都支持的方式（IE7以上）
var xhr = new XMLHttpRequest();
IE6以下的
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以下的
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
通用的获取XMLHttpRequest对象的方法：
//写一个获取XHR的方法
function getXMLHttpRequest(){
try{
//大部分浏览器都支持的方式
return new XMLHttpRequest();
}catch(e){
try{
//IE6以下浏览器支持的方式
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5以下的浏览器
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("你是火星来的吧！你的浏览器不支持AJAX！");
}
}
}
}
[5].设置请求信息（请求地址，请求方式，请求参数）
xhr.open(请求方式,请求地址);
在发送post请求时，还需要设置一个请求头，如下：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
[6]发送请求
xhr.send(请求体);
get请求没有请求体，所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数。
[7].接收响应信息
//xhr绑定一个onreadystatechange响应函数，这个函数会在readyState属性发生改变时调用
xhr.onreadystatechange = function(){
//判断当前readyState是否为4 ， 且响应状态码为200
if(xhr.readyState==4 && xhr.status==200){
//读取响应信息，做相关操作。
//如果信息为纯文本
xhr.responseText
//如果信息为XML
xhr.responseXML
}
};
[8] 响应数据的格式
- 响应一个XML
- 当我们想通过servlet给ajax返回一个比较大量的信息，返回一个对象。
- 返回 User ：username：sunwukong age：18 gender：男
username:sunwukgon,age:18,gender:男
- 我们可以通过一个XML格式来返回一个大量的信息
<user>
<name></name>
<age></age>
<gender></gender>
</user>
- 响应一个JSON对象
[9]下面给出一个用ajax向后台进行请求的小例子：
1、get请求：
<%@ 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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var hxml=new XMLHttpRequest();
var method="get";
var url="${pageContext.request.contextPath}/Servlet1";
hxml.open(method, url);
hxml.send();
hxml.onreadystatechange=function(){
if(hxml.readyState==4){
var test=hxml.responseText;
alert(test);
}
}
}
}
</script>
</head>
<body>
<button id="btn" >确定</button>
</body>
</html>
2、post请求
<%@ 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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var hxml=new XMLHttpRequest();
var method="post";
var url="${pageContext.request.contextPath}/Servlet1";
hxml.open(method, url);
hxml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
hxml.send("username=zhangsan&password=lisi");
hxml.onreadystatechange=function(){
if(hxml.readyState==4){
var test=hxml.responseText;
alert(test);
}
}
}
}
</script>
</head>
<body>
<button id="btn" >确定</button>
</body>
</html>
post请求需要加上：hxml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
对于get请求如果要传递参数的话，和表单一样，需要在地址后面加上“？”然后接所要传递的参数。
后台接收数据与表单的get以及post请求接收数据的方式一样。