ajax库封装
function ajax(url,fnWin,fnFaild){ //1.创建ajax对象 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //2.与服务器建立连接 xhr.open("GET",url,true); //3.发送请求 xhr.send(); //4.接收服务器返回的信息 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ fnWin && fnWin(xhr.responseText); }else{ fnFaild && fnFaild(); } } } }
ajax库封装2
//url,data,type,timeout,success,error function ajax(options){ //-1 整理options options=options||{}; options.data=options.data||{}; options.timeout=options.timeout||0; options.type=options.type||'get'; //0 整理data var arr=[]; for(var key in options.data){ arr.push(key+'='+encodeURIComponent(options.data[key])); } var str=arr.join('&'); //1 创建ajax对象 if(window.XMLHttpRequest){ var oAjax=new XMLHttpRequest();//[object XMLHttpRequest] }else{ var oAjax=new ActiveXObject('Microsoft.XMLHTTP') } if(options.type=='get'){ //2. oAjax.open('get',options.url+'?'+str,true); //3. oAjax.send(); }else{ //2. oAjax.open('post',options.url,true); //设置请求头 oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); oAjax.send(str);//身子 } //3.5 超时 if(options.timeout){ var timer=setTimeout(function(){ alert('超时了'); oAjax.abort();//中断ajax请求 },options.timeout); } //4. oAjax.onreadystatechange=function(){//当准备状态改变时 if(oAjax.readyState==4){//成功失败都会有4 clearTimeout(timer); if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){ options.success && options.success(oAjax.responseText); }else{ options.error && options.error(oAjax.status);//http 0 } } }; };
非封装，详解版及其实例↓
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
//获取页面元素
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("box");
oBtn.onclick = function(){
//1.创建ajax对象
//var xhr = new XMLHttpRequest(); //ie7及以上和标准浏览器
//var xhr = new ActiveXObject("Microsoft.XMLHTTP");
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
//alert(xhr);
//alert(xhr.readyState);
//2.与服务器建立连接
//open("GET/POST"，"请求的文件"，boolean); true:异步 false : 同步
xhr.open("GET","abc.txt",true);
//alert(xhr.readyState);
//3.发送请求
xhr.send();
//alert(xhr.readyState);
//4.接收服务器返回的信息
//onreadystatechange:状态改变事件
xhr.onreadystatechange = function(){
//alert(xhr.readyState);
if(xhr.readyState == 4){
//alert(xhr.status);
if(xhr.status == 200){
//alert("成功了");
//alert(xhr.responseText);
oDiv.innerHTML = xhr.responseText;
}
}
}
}
}
</script>
</head>
<body>
<p>通过ajax请求，将服务器上的abc.txt文件中的内容获取回来</p>
<input type="button" id="btn" value="读取文件">
<div id="box"></div>
</body>
</html>
adc.txt文件内容↓
55555555555555555555555555555
效果图↓
