手写一个jsonp格式的跨域
原创
跨域是我们经常要用到的技术，在没有cors跨域的以前，大家一般都是用jquery的jsonp来进行跨域。
jsonp跨域的原理是，是利用了一些支持跨域访问的标签的原理，比如比如script，都可以链接不同域名下的资源，jsonp也就由此诞生了。
jsonp会在请求地址后面自动加上一个参数，后台接受这个参数这个值，把返回的json字符串包含在这个值里面，比如：
xxx.com?callback=jquery19390;那么后台返回的数据就应该是jquery19390(json数据)，这种格式的。这样我们用script标签，src为这个地址，然后加入html页面中，就执行了jquery19390这个函数，jsonp的原理就是这样的。代码如下：
<html>
<head>
<title>手写jsonp</title>
<script src="https://www.sammh.com/js/jquery.js"></script>
</head>
<body>
<input id="btn" type="button" value="jsonp" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
<script>
(function (window) {
//使用立即执行函数不影响全局变量
var jsonp = function (url,callback) {
var FuncName = 'handeler' + Math.random().toString().replace('.','');
var parameter = '?jsoncallback=' + FuncName;
var scriptEle = document.createElement('script');
scriptEle.src = url + parameter;
window[FuncName] = function (data) {//将随机函数名定义在window上
callback(data);
document.body.removeChild(scriptEle);
}
document.body.appendChild(scriptEle);//添加到页面中，马上调用随机函数
}
//添加到window对象上
window.jsonp = jsonp;
})(window);
$("#btn").click(function () {
jsonp("https://www.sammh.com/jsonp.aspx", function (data) {
var result = JSON.stringify(data); //json对象转成字符串
$("#text").val(result);
})
})
</script>
</body>
</html>大家可直接复制以上代码直接运行。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读