1.什么是AJAX？
Asynchronous JavaScript and Xml (异步的JavaScript 和 Xml)
AJAX是一种用来改善用户体验的技术，通过浏览器提供的AJAX对象(即XMLHttpRequest对象)异步的向服务器发送请求，服务器返回部分数据而不是一个完整的页面，以页面无刷新的效果更改页面中的局部数据。
关键点：1.浏览器端的页面不会被销毁
2.浏览器向服务器发送请求的同时用户可以继续操作页面
3.页面只是局部更新，而不是更新整个页面
4.AJAX对象即XMLHttpRequest对象（两者说的是同一个对象）
5.XMLHttpRequest是浏览器提供的对象
6.网络传输性能提升（网络不再传输整个页面，而是传输部分数据，避免了大量冗余数据的传输占用网络带宽）
7.由AJAX对象向服务器发送请求以及接收服务器返回的请求，所以AJAX对象提供了一些属性和方法可以对发送的请求以及接收到的请求进行处理。
2. 如何获得AJAX对象？
function getXmlHttpRequest(){
var xhr=null;
if(window.XMLHttpRequest){
//这种方式适用于非IE浏览器，比如：火狐，Chrome.....
xhr=new XMLHttpRequest();
}else{
//这种方式适用于IE浏览器
xhr=new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
//注意：IE从IE11开始支持XMLHttpRequest()方式（当然也支持ActiveXObject()方式）
//AJAX的思想最初是由微软提出的并使用ActiveXObject()方式获得AJAX对象，随后由W3C组织统一为XMLHttpRequest()方式获得AJAX对象，所以其他浏览器厂商统一为使用 //XMLHttpRequest()方式获得AJAX对象，而微软在IE11之前一直坚持使用ActiveXObject()方式获得AJAX对象，微软从IE11之后才开始支持XMLHttpRequest()方式获得AJAX对象。
}
3.AJAX对象提供了一些常用的属性和方法
1>常用的属性
(1) readystate
---表示请求的状态，即AJAX对象与服务器通信的状态
---总共有五个值可以取：分别为 0,1,2,3,4
0---表示尚未初始化 1---表示正在发送请求 2---表示请求完成 3---表示请求成功，正在接收服务器响应的数据
4---数据接收成功（此状态比较重要，表示ajax对象已经获得服务器返回的全部数据，可以进行下一步的操作）
(2) onreadystatechange
---表示当readystate发生变化的时候会触发onreadystatechange属性绑定的事件处理函数（注意：onreadystatechange属性的值是一个事件处理函数）
(3) status
---表示服务器返回的http请求的响应值
---常用的返回值有：
200：表示请求成功（OK） 202：表示服务器已接受请求，但处理未完成（Accept）
302：表示重定向（Move temporarily）
400：表示错误的请求（Bad Request） 404：表示资源未找到（Not Found）
500：内部服务器错误（Internal Server Error）
(4) responseText
---表示服务器返回的是文本信息（此种方式用于返回简单的数据信息）
(5) responseXML
---表示服务器返回的是XML(此种方式现在不常用 ，现在一般使用JSON对象来返回比较复杂的数据信息)
2>常用的方法
(1) open(method,url,True/False);
---用于创建请求
---method:表示请求的方式，常用的有GET和POST两种方式；
---url：表示请求的地址，GET请求方式可以在url后面指定请求参数信息
---True：表示以异步请求方式请求服务器，False：表示以同步请求方式请求服务器。
(2) send()
---用于发送请求
---send(null)：用于GET请求方式
---send(name=value&name=value....)：用于POST请求方式，括号中用于指定请求参数信息
(3) setRequestHeader()
---用于指定请求的Http头
(4) getResponseHeader()
---用于获取指定的Http头
(5) getAllResponseHeaders()
---用于获取响应的所有Http头
(6) abort()
---用于取消请求
4. AJAX的使用步骤
1> 获得AJAX对象
2> 创建请求
3> 设置回调函数
4> 发送请求
5> 编写服务器端代码
实例演示：
1>获得AJAX对象
function getXmlHttpRequest(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
2> 创建请求
(1) GET方式创建请求
<script type="text/javascript">
function check(){
var xhr=getXmlHttpRequest();
xhr.open('get','check.form?code=xxx',true);
......
}
</script>
(2) POST方式创建请求
<script type="text/javascript">
function check(){
var xhr=getXmlHttpRequest();
xhr.open('post','check.form',true);
//注意：因为HTTP协议要求发送post请求时，必须有content-type消息头，所以当使用AJAX对象发送post请求时需要明确指定请求消息头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
......
}
</script>
3>编写回调事件处理函数
<script type="text/javascript">
function check(){
var xhr=getXmlHttpRequest();
xhr.open('get','check.form?code=xxx',true);
//注意：xhr.onreadystatechange=function(){.......}; 的作用是为onreadystatechange属性绑定事件处理函数，当readystate发生改变的时候会调用此函数内部的处理逻辑进行 //相应的处理。
xhr.onreadystatechange=function(){
//readyState==4 表示ajax对象已经获得服务器返回的所有数据; status==200 表示请求成功
//下面的判断条件保证了数据的完整性和正确性
if(xhr.readyState==4 && xhr.status==200){
var txt=xhr.responseText;
$("span_msg").innerHTML=txt;
}
};
......
}
</script>
4> 发送请求
(1) GET方式发送请求
<script type="text/javascript">
function check(){
var xhr=getXmlHttpRequest();
xhr.open('get','check.form?code=lily&pwd=123',true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var txt=xhr.responseText;
$("span_msg").innerHTML=txt;
}
};
//GET请求方式下send方法传入null
xhr.send(null);
}
</script>
(2) POST方式发送请求
<script type="text/javascript">
function check(){
var xhr=getXmlHttpRequest();
xhr.open('post','check.form',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var txt=xhr.responseText;
$("span_msg").innerHTML=txt;
}
};
//POST请求方式下通过send()方法传递参数
xhr.send('code=lily&pwd=123');
}
</script>
5> 编写服务器端代码
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ActionServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
req.setCharacterEncoding("utf-8"); //设置服务器端解码方式为utf-8,防止出现中文乱码的情况发生
String uri=req.getRequestURI(); //获得请求资源路径
String action=uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf(".")); //分析请求资源路径，获得路径中最后一个 / 和最后一个 . 之间的内容
res.setContentType("text/html;charset=utf-8"); //设置服务器端编码方式为utf-8,防止出现中文乱码的情况发生
PrintWriter out=res.getWriter();
//依据分析的结果，进行不同的处理
//要学会使用下面的方式进行相等的判断，好处是：防止当action为空时系统抛出空指针异常。
if("/Login".equals(action)) {
String code=req.getParameter("code");
if(......){
//服务器端通过out.println("....") 方法返回部分数据给ajax对象，ajax对象可以在浏览器端通过responseText属性值获得此方法返回的数据。
out.println("账号正确，欢迎登录");
}else{
out.println("账号有误，请重新输入");
}
}else(......){
......
}
}
}
5. AJAX的应用
1>用户输入的数据需要校验（例如：检测注册时用户输入的用户名是否有效）
2>搜索时出现的自动提示列表
3>级联显示（级联菜单）
4>数据录入和列表显示在同一个页面（例如：创建对象/修改对象和显示所有对象记录在同一页上）
5>不需要刷新的翻页