您的位置：首页 > Web前端 > JavaScript

原生javascript封装ajax和jsonp

2016-01-30 09:30 585 查看

在我们请求数据时，完成页面跨域，利用原生JS封装的ajax和jsonp：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//ajax 和jsonp 跨域的封装
var $={
//封装ajax，堪比jquery中的ajax
ajax:function(option){
//判断输出的async真假
var async=typeof(option.async)==="undefined"?true:option.async;
var xhr=null;
//判断在各浏览器的请求
if(window.XMLHttpRequest){
// 主流浏览器
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
// IE浏览器
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
//打开
xhr.open(option.type || "get",option.url,async);
xhr.onreadystatechange=function(){
// 请求成功执行的
if(this.readyState==4 && this.status==200){
var data=this.responseText;
if(option.dataType=="json"){
// data=JSON.parse(data);
data=eval("("+data+")");
}
option.success && option.success(data);
}
};
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送
xhr.send();
},
loadScript:function(url){
//创建一个script标签
var script=document.createElement("script");
script.src=url;
//插入到head标签中
document.getElementsByTagName('head')[0].appendChild(script);
},
jsonp:function(option){
//利用随机数给函数其一个函数名
var cbName="JSONCallback"+Math.random().toString().substr(2,10);
//将url中的callback=?替换成callback=生成的函数名
option.url=option.url.replace(/callback=\?/,'callback='+cbName);
//创建一个用cbName作为函数名的函数
window[cbName]=function(data){
option.success && option.success(data);
window[cbName]=null;    //window清空 ,避免污染全局变量
}
//调用loadScript方法，生成script的标签，设置src；
this.loadScript(option.url);
}
}
$.ajax({
url:"json.php",
type:"post",
async:false,
dataType:"json",
success:function(data){
console.log(data)
},
error:function(){

}
})

$.jsonp({
url:"http://www.bjuga.com/demo.php?callback=?",//后台给得接口
success:function(data){
console.log(data)
}
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航