原生js封装ajax

2018-06-24 01:53:35来源：未知阅读 ()

<!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>