原生js封装ajax详解编程语言

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="Generator" content="EditPlus®"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<title>AJAX</title> 
</head> 
<body> 
 
<script type="text/javascript"> 
function Ajax(parameter){ 
 
var xhr=null; 
var message=null; 
var newurl=null; 
var method=parameter.method=="post"?"post":"get"; 
var url=parameter.url; 
var sync=parameter.sync==true?true:false; 
var success=parameter.success; 
var dataType=parameter.dataType; 
//创建XML对象 
if(window.XMLHttpRequest){ 
xhr=new XMLHttpRequest();//标准浏览器 
} 
else if(window.ActiveXObject){ 
xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE 
} 
 
if(method=="post"){ 
message=url.substring(url.indexOf("?")+1,url.length);//获取?之后的内容(不包括?) 
newurl=url.substring(0,url.indexOf("?"));//获取?之前的内容(不包括?) 
xhr.open(method,newurl,sync);//准备发送请求(配置参数),还没发送 
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post提交方式不像get提交方式是默认的,post方式你需要告诉浏览器你使用post提交方式,所以就需要这个请求头 
xhr.send(message);//发送请求 
} 
 
else if(method=="get"){ 
xhr.open(method,url,isNsychronous); 
xhr.send(message);//这里面的null 有的老版本浏览器得放一个null兼容处理吧算是 
} 
 
xhr.onreadystatechange=function() 
{ 
if(xhr.readyState==4){ 
 
if(xhr.status==200){ 
var data=dataType=='xml'?xhr.responseXML:xhr.responseText; 
success &&success(data);//成功返回数据的时候调用这个函数 
} 
else{ 
alert("出错了,帅气喆");//失败的时候也可以调用函数 看你需求啦 
} 
} 
} 
 
} 
 
var parameter={ 
method:"post" 
,url:"test.php?username=admin&password=1234", 
sync:true, 
success:function(data){ 
console.log(data); 
}, 
dataType:"json" 
}; 
Ajax(parameter); 
 
</script> 
</body> 
</html>

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/12294.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论