欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生js封装ajax

程序员文章站 2022-03-30 09:44:59
原生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>