ajax原理,流程和实现

原理：
Ajax的原理：通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM来更新页面。

流程：
1.创建异步对象方法：
IE浏览器：var xmlHttp = new ActiveXObject("Microsoft.XMLHttp");

标准浏览器：var xmlHttp = new XMLHttpRequest();


2.建立请求，true为异步交互，false为同步交互
xmlHttp.open("GET",url,true);

xmlHttp.open("POST",url,true);


3.判断异步交互与服务器交互的状态：
xmlHttp.onreadystatechange = function(){
//xmlHttp.readyState == 4是验证服务器交互的状态是否成功，xmlHttp.status == 200是验证服务器的准备状态
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var divID = document.getElementById("divID");
//解码，将服务器的返回输出
divID.innerHTML = decodeURI(xmlHttp.responseText);
}
}


4.发送请求，使用GET即发送null，使用POST即将参数发送：
xmlHttp.send(null);
xmlHttp.send(queryStr);


实现：
<script language="javascript">
var xmlHttp;
//创建异步对象方法
function createXMLHttpRequest(){
if(window.ActiveXObject) //是否是IE浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest) //是否是标准浏览器
xmlHttp = new XMLHttpRequest();
}
function createStr(){
//获取用户录入的数据
var name = document.getElementById("name").value;
var birthday = document.getElementById("birthday").value;
var queryStr = "name=" + name + "&birthday=" + birthday;
return encodeURI(encodeURI(queryStr));//两次编码解决中文乱码
}
function doGET(){
createXMLHttpRequest();
var queryStr = "test.jsp?";
queryStr += createStr() + "&timestamp=" + new Date().getTime(); //使每次请求都发送不同的url，以便获取最新数据
//判断异步交互与服务器交互的状态，xmlHttp.onreadystatechange是当服务器状态改变的时候调用下函数。
xmlHttp.onreadystatechange = stateChange;
//建立请求，true为异步交互，false为同步交互
xmlHttp.open("GET",queryStr,true);
//发送前面的准备工作，使用GET即发送null
xmlHttp.send(null);
}
function doPOST(){
createXMLHttpRequest();
var url = "test.jsp?timestamp=" + new Date().getTime();
var queryStr = createStr();
xmlHttp.open("POST",url,true);
//判断异步交互与服务器交互的状态，xmlHttp.onreadystatechange是当服务器状态改变的时候调用下函数。
xmlHttp.onreadystatechange = stateChange;
//重置头部，即表单提交的形式
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//使用send提交数据
xmlHttp.send(queryStr);
}
function stateChange(){
//xmlHttp.readyState == 4是验证服务器交互的状态是否成功，xmlHttp.status == 200是验证服务器的准备状态
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var divID = document.getElementById("divID");
//解码，将服务器的返回输出
divID.innerHTML = decodeURI(xmlHttp.responseText);
}
}
</script>