AJAX
一、Ajax的基础知识
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对象的方法：1 function getXMLHttpRequest(){ 2 try{ 3 //大部分浏览器都支持的方式 4 return new XMLHttpRequest(); 5 }catch(e){ 6 //IE6以下浏览器支持的方式 7 return new ActiveXObject("Msxml2.XMLHTTP"); 8 }catch(e){ 9 //IE5以下的浏览器10 return new ActiveXObject("Microsoft.XMLHTTP");11 }catch(e){12 alert("你是火星来的吧！你的浏览器不支持AJAX！");13 }14 } 2.设置请求信息（请求地址，请求方式，请求参数）
xhr.open(请求方式,请求地址);
在发送post请求时，还需要设置一个请求头，如下：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
问题：
在IE浏览器中，get请求使用ajax存在缓存问题，会使用上一次请求的结果处理请求，而不向服务器发送请求
解决办法：
在请求url尾部带一个随机参数，如：var url="/MyProject/user?t="+Math.random();
post请求：通过send()方法传递参数，需要设置请求头，没有浏览器缓存问题
3.发送请求
xhr.send(请求体);
get请求没有请求体，所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数。
4.接收响应信息
//xhr绑定一个onreadystatechange响应函数，这个函数会在readyState属性发生改变时调用
xhr.onreadystatechange = function(){
//判断当前readyState是否为4 ， 且响应状态码为200
if(xhr.readyState==4 && xhr.status==200){
//读取响应信息，做相关操作。
//如果信息为纯文本
xhr.responseText
//如果信息为XML
xhr.responseXML
}
};
readyState属性存有 XMLHttpRequest 的状态。从 0 到 4 发生变化0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
5、 响应数据的格式1） 响应一个XML
- 当我们想通过servlet给ajax返回一个比较大量的信息，返回一个对象。
- 返回 User ：username：sunwukong age：18 gender：男
username:sunwukgon,age:18,gender:男
- 我们可以通过一个XML格式来返回一个大量的信息
<user>
<name></name>
<age></age>
<gender></gender>
</user>
2） 响应一个JSON对象
代码演示：
1 function getXMLHttpRequest(){ 2 try{ 3 //大部分浏览器都支持的方式 4 return new XMLHttpRequest(); 5 }catch(e){ 6 try{ 7 //IE6以下浏览器支持的方式 8 return new ActiveXObject("Msxml2.XMLHTTP"); 9 }catch(e){10 try{11 //IE5以下的浏览器12 return new ActiveXObject("Microsoft.XMLHTTP");13 }catch(e){14 alert("你是火星来的吧！你的浏览器不支持AJAX！");15 }16 }17 }18 }19 window.οnlοad=function(){20 var btn=document.getElementById("btn");21 btn.οnclick=function(){22 //创建XMLHttpRequest对象，相当于打开浏览器23 var xhr=getXMLHttpRequest();24 var method="get";25 var url="/WEB_Ajax/ajax?t="+Math.random();26 //设置请求方式及请求路径27 xhr.open(method,url);28 xhr.send();29 30 xhr.onreadystatechange=function(){31 if(xhr.readyState==4&&xhr.status==200){32 var respText=xhr.responseText;33 alert(respText);34 }35 }36 };37 38 var btn2=document.getElementById("btn2");39 btn2.οnclick=function(){40 var xhr=new XMLHttpRequest();41 var method="post";42 var url="/WEB_Ajax/ajax";43 xhr.open(method,url);44 45 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");46 xhr.send("username=zoumengjie");47 xhr.onreadystatechange=function(){48 if(xhr.readyState==4&&xhr.status==200){49 var respText=xhr.responseText;50 alert(respText);51 }52 }53 };54 };