Ajax 一
一、Ajax介绍
1. AJAX 即为 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
2. 异步交互与同步交互
* 同步：
> 发一个请求，就要等待服务器响应结束，然后才能发第二个请求！中间这段时间就是一个字“卡”；
> 刷新的是整个页面
* 异步：
> 发送一个请求后，无需等待服务器的响应，然后就可以发送第二个请求；
> 可以使用js接受服务器的响应，然后使用js来局部刷新。
二. Ajax发送异步请求的四个步骤
1. 第一步（得到XMLHttpRequest）
* ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了它，就掌握了ajax！
* 得到XMLHttpRequest
> 大多数浏览器都支持 ： var xmlHttp = new XMLHttpRequest() ;
> IE6.0 ：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") ;
> IE5.5及更早的版本： var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
> 使用Ajax准备向服务器端发送请求：
// 用POST方式发送请求，url，async ——> true
xmlHttpRequest.open("POST","AjaxServlet",true) ;
var xmlhttp;
if (window.XMLHttpRequest) // 非IE浏览器
{
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject) // IE浏览器
{
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
2. 第二步（打开与服务器的连接）
* xmlHttp.open() ：用来打开与服务器的链接，它需要三个参数：
> 请求方式：可以使GET或者POST
> 请求的URL：指定服务器端资源，例如：/day/AServlet
> 请求是否为异步：如果为true表示发送异步请求，否则为同步请求。
* xmlHttp.open("GET","register.jsp",true) ;
3. 第三步（发送请求）
* xmlHttp.send(null) ; 如果不给可能会造成部分浏览器无法发送！
> 参数就是请求体内容，如果是GET请求，必须给出null。
4. 第四步（）
* 在xmlHttp对象的一个事件上注册监听器：onreadystatechange
* xmlHttp对象一共有5个状态：
> 0状态：刚创建，还没有调用open()方法;
> 1状态：请求开始：调用了open()方法，但还没有调用send()方法
> 2状态：调用完了send()方法了；
> 3状态：服务器已经开始响应，但不表示响应结束了！
> 4状态：服务器响应结束！（通常我们只关心这个状态！！！）
* 得到xmlHttp对象的状态：
> var state = xmlHttp.readyState;//可能是0、1、2、3、4
* 得到服务器响应的状态码
> var status = xmlHttp.status;//例如为200、404、500
* 得到服务器响应的内容1
> var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
> var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象了！
xmlHttp.onreadystatechange = function() {//xmlHttp的5种状态都会调用本方法
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断：判断是否为4状态，而且还要判断是否为200
// 获取服务器的响应内容
var text = xmlHttp.responseText;
}
};
| 值 | 意义 | 值 | 意义 |
| 200 | 表示成功 | 404 | 文件未找到 |
| 202 | 表示请求被接受，但尚未成功 | 500 | 内部服务器错误 |
| 400 | 错误的请求 |
三、实际用例
1 <script type="text/javascript"> 2 var xmlHttp = null; // 声明一个空对象以接收一个XMLHttpRequest对象 3 4 function ajaxSubmit(){ 5 6 if(window.ActiveXObject) // IE浏览器 7 { 8 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 9 } 10 else if(window.XMLHttpRequest) // 除IE外的其他浏览器实现 11 { 12 xmlHttp = new XMLHttpRequest(); 13 } 14 15 if(null != xmlHttp) 16 { 17 // 用GET方式来发送请求，url,async --> true 18 xmlHttp.open("GET", "AjaxServlet", true); 19 // 关联ajax的回调函数 20 xmlHttp.onreadystatechange = ajaxCallBack; 21 // 真正向服务器端发送数据,如果是GET请求，必须给出null 22 xmlHttp.send(null); 23 } 24 } 25 26 function ajaxCallBack(){ 27 alert("test"); //双重判断：判断是否为4状态，而且还要判断是否为200 28 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) 29 { 30 var responseText = xmlHttp.responseText; // 以普通文本的方式获取文本 31 32 document.getElementById("div1").innerHTML = responseText; 33 } 34 }; 35 36 37 </script>
1 <body> 2 <input type="button" value="get content from server" onclick="ajaxSubmit();"/> 3 <div id="div1"></div> 4 </body>
注意：
在使用post方式提交时，还需要设置正确的请求头。具体代码如：
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send("v1=" + v1 + "&v2=" + v2) ;
