首页 > 代码库 > Ajax基础

Ajax基础

2024-08-10 09:30:56   219人阅读

       前几天用到了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/>";
}

}


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

3——发送请求

//发送请求

xhr.send(null);

4——接收返回值

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

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

 

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

<body><input type="button" value="http://www.mamicode.com/获取时间" 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/>";
}

}
//设置请求方式和URLxhr.open("GET","showTime.jsp");
</script>

 

 

 

　　　　Jquery中的Ajax有很很多种，这里只是基础，以下几种下次再说。

 

 

 

　　

Ajax基础


联系
我们