跨域是我们经常要用到的技术,在没有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 删除。