原理:
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() + "×tamp=" + 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>