<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style>
#btn1{
width: 50px;
height: 30px;
}
</style>
</head>
<body>
<input type="button" value="ajax" id="btn1"/>
</body>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclcik=function(){
ajax('a.text',function(str){
alert('成功读取到:'+str);
},function(){
alert('fail');
});
}
};
function ajax(url,success,fail){ //ajax框架,传入地址,success函数,fail函数
//1.创建ajax对象
if(window.XMLHttpRequest){ //FF,chrome
var oAjax=new XMLHttpRequest();
}
else{ //IE
var oAjax=new ActiveXObject('Microst.XMLHTTP');
}
//2.连接服务器
//true异步,open(方法,文件名,异步传输)
oAjax.open('GET',url,true);
//3.发布请求
oAjax.send();
//4.接受反馈
oAjax.onreadystatechange=function(){
//oAjax.readyState//浏览器和服务器进行到哪一步
//0 <==> (未初始化) 还没有调用open()方法
//1 <==> (载入) 一调用send()方法,正在发送请求
//2 <==> (载入完成) send()方法完成,已收到全部相应
//3 <==> (解析) 正在解析响应内容
//4 <==> (完成) 响应内容解析完成,可以在客户端调用
if(oAjax.response==4){
if(oAjax.status==200) { //success
success(oAjax.responseText); //调用success函数
}
else{
if(fail) { //如果有处理失败的函数
fail(oAjax.responseText); //调用fail函数
}
}
}
}
}
</script>
</html>
javascript 简单ajax 框架
最新推荐文章于 2023-06-22 10:18:01 发布