JavaScript的Ajax封装GET和POST
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript的Ajax封装GET和POST相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title>封装ajax</title>
</head>
<body>
<script type="text/javascript">
function createXHR()
{
if(typeof XMLHttpRequest != "undefined")
{
return new XMLHttpRequest();
}
else if(typeof ActiveXObject != "undefined")
{
var versions = [
"MSXML.2.XMLHttp.6.0",
"MSXML.2.XMLHttp.3.0",
"MSXML.2.XMLHttp"
];
for(var i = 0; i<versions.length;i++)
{
try{
return new ActiveXObject(version[i]);
}catch(e){
// 因类循环会报一个错，跳过些错
}
}
}
else
{
throw new Error("你的系统或浏览器不支持XHR对象！");
}
}
// 名值对转换字符串
function params(data)
{
var arr = [];
for(var i in data)
{
arr.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i]));
}
return arr.join("&");
}
// ajax
function ajax(obj)
{
var xhr=createXHR();
obj.url=obj.url+"?rand="+Math.random();
obj.data = params(obj.data);
if(obj.method === "GET")
{
obj.url+=obj.url.indexOf("?") == -1 ?"?"+ obj.data:"&"+obj.data;
}
// if it‘s asynchronous
if(obj.async === true)
{
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
callback();
}
}
}
xhr.open(obj.method,obj.url,obj.async);
if(obj.method === "POST")
{
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(obj.data);
}
else
{
xhr.send(null);
}
// iF It‘s synchronization
if(obj.async === false)
{
callback();
}
// 封装重复调用代码
function callback()
{
if(xhr.status === 200)
{
obj.success(xhr.responseText);
}
else
{
alert("错误代码："+xhr.status+"-错误信息："+xhr.statusText);
}
}
}
// use ajax
addEventListener("click",function(){
ajax({
method:"POST",
url:"test.php",
data:{
"na&me":"ping",
"age":18
},
// 将对象传到text，然后对象又回调
success:function(text)
{
console.log("接收success数据为："+text);
},
async:false
});
},false);
</script>
</body>
</html>以上是关于JavaScript的Ajax封装GET和POST的主要内容，如果未能解决你的问题，请参考以下文章
Ajax（Asynchronous Javascript And XML）