原生JS跨域

最新推荐文章于 2024-07-16 00:30:57 发布

原创最新推荐文章于 2024-07-16 00:30:57 发布 · 920 阅读

0 ·

CC 4.0 BY-SA版权

js跨域专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种通过JSONP技术实现浏览器跨域请求的方法。利用JavaScript动态创建script标签并设置回调函数来接收服务器返回的数据，实现了跨域数据获取。文章提供了具体的代码示例，包括如何定义回调函数及动态加载脚本。

<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<button id="btn">click</button>

</body>
<script type="text/javascript">
function $(str){
return document.getElementById(str)
}
function CreateScript(src) {
var Scrip=document.createElement('script');
Scrip.src=src;
document.body.appendChild(Scrip);
}
function jsonpcallback(json) {
console.log(json);//Object { email="中国", email2="中国222"}
}
$('btn').onclick=function(){
CreateScript("http://localhost:8888/a/gct?id=001&callback=jsonpcallback")
}

/*
*兼容ie的跨域：
*/
// function cb(r){
// console.info(r.data);
// }
// function ls(url,cb){
// var h = document.head||document.getElementsByTagName('head')[0]||document.documentElement,
// s = document.createElement('script');
// s.setAttribute('src',url);
// h.appendChild(s);
// document.addEventListener ? s.addEventListener('load',cb,false):
// s.onreadystatechange = function(r){
// if(this.readyState == 'loaded' || this.readyState == 'complete'){
// h.removeChild(s);
// cb && cb(r);
// }
// }
// }

// ls('http://mystock.eastmoney.com/mystock.aspx?f=gs&cb=cb&g=35540042&0.5394658758305013',cb);

/*requirejs跨域：需要将callback的回调函数改为define，而且不需要实现*/
// require(['http://mystock.eastmoney.com/mystock.aspx?f=gs&cb=define&g=35540042&0.5394658758305013'],function(r){
// console.info(r.data);
// })

</script>
</html>