Ajax基础

浏览数：34 / 时间：2015年06月09日

前几天用到了Ajax，突然感觉有点生疏了，于是上网查询资料把这一块知识补全。

　　　　ajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），Ajax可以实现页面的无刷新。

　　Ajax操作一般可以分为五步：

1——创建Ajax对象

　　由于浏览器对XMLHttpRequest对象的支持不足，只能被IE5.0及以后的版本支持，所以创建对象的时候需要对浏览器进行区别，具体代码如下：

 try{  
       //先尝试使用标准的方式创建（Firfox,Ie8,Chrome） 
xhr=new XMLHttpRequest();       
        }catch (e){
    //出现异常说明是IE7 以前额版本，则使用ActiveXObject创建
 xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2——设置状态变化回调函数

//设置状态变化回调函数
xhr=new onreadystatechange=resCallback;//本次的回调函数是resCallback;
function resCallback(){
　　//判断请求是否成功完成并且成功返回
if(xhr.readyState==4&& xhr.status==200){
var resDiv=document.getElementById("result");
var old=resDiv.innerHTML;
resDiv.innerHTML=old+xhr.responseText+"<br/>";
}

}



//设置请求方式和URL
xhr.open("GET","showTime.jsp");

3——发送请求

//发送请求

xhr.send(null);

4——接收返回值

这一步是在回调函数里面执行

5——根据返回值操作页面节点对象

--__以下是本次案例的全部代码：

<body>

<input type="button" value="获取时间" onclick="getTime()"/>
<div id="result">这里将显示时间，但是不会刷新全部页面</div>

</body>

<script>

var xhr;
function getTime(){

 try{  
       //先尝试使用标准的方式创建（Firfox,Ie8,Chrome） 
xhr=new XMLHttpRequest();       
        }catch (e){
    //出现异常说明是IE7 以前额版本，则使用ActiveXObject创建
 xhr=new ActiveXObject("Microsoft.XMLHTTP")//设置状态变化回调函数

xhr=new onreadystatechange=resCallback;//本次的回调函数是resCallback;
function resCallback(){
　　//判断请求是否成功完成并且成功返回
if(xhr.readyState==4&& xhr.status==200){
var resDiv=document.getElementById("result");
var old=resDiv.innerHTML;
resDiv.innerHTML=old+xhr.responseText+"<br/>";
}

}

//设置请求方式和URL
xhr.open("GET","showTime.jsp");