script标签快速实现跨域访问-求索网

在切入主题之前先看一下以下的一个引用：

<script src="http://api.qiusuoweb.com/api.php?m=api1" type="text/javascript" charset="utf-8"></script>

当你初次看到这样一个src路径的时候是不是充满疑问，为什么src不是引入的一个.js文件而是一个接口地址。

没错！它就是一个跨域调用接口数据的方式。

切入正题我们通过demo来完整呈现这种跨域方式。

步骤：

1.先在本地搭建一个服务器，利用虚拟主机的方式映射出两个域出来：a.qiusuoweb.com 和 api.qiusuoweb.com

2.在a.qiusuoweb.com域下的目录创建页面访问api.qiusuoweb.com域下的接口，其页面代码如下：

<!DOCTYPE html>
<html>
o<head>
o<meta charset="UTF-8">
o
o<title></title>
o</head>
o<h1 id="h1"></h1>
o<body>
o<script type="text/javascript">
ovar apiCallback = function(data){//函数名要和接口callback的字符保持一致
odocument.getElementById('h1').innerHTML = data.name;
o}
o</script>
o</body>
o<script src="http://api.qiusuoweb.com/api.php?m=api1" type="text/javascript" charset="utf-8"></script>
</html>

3.api.qiusuoweb.com接口服务器创建一个api.php，api代码

$m      = isset($_GET['m'])?$_GET['m']:'';
$data   = array(
o'url'=> 'www.qiusuoweb.com',
o'name'=> '求索网',
o'time'=> time(),
o'author'=> 'chenxing'
);
if($m){
o$m($data);
}

/**
 * jsonp跨域测试接口
 */
function api1($data){
oecho 'apiCallback' . '(' . json_encode($data) . ')';//apiCallback和前端的js函数保持一致
}

4.访问a.qiusuoweb.com域下的页面测试页面，结果：

script请求结果

以上结果说明拿到了接口数据，跨域成功。

注意：

callback函数名前端和后端要一致。demo中是apiCallback，已在代码中备注。

callback函数必须是全局的。

如何理解？

script src 虽然请求的不是一个.js的静态文件，但它获取的依然是一个js文件，只是这个js文件是动态生成的。那么以上行代码就是js函数执行的代码，那么之前前端定义的那个函数就会被执行。现在重新回到注意的那两个点是不是很好理解的呢？

像这种用接口数据用一个字符串（前端回调函数的函数名）将json数据包裹起来，前端用这个字符串作为回调函数的函数名，包裹起来的json数据作为此函数的一个参数被人们起了一个名字叫“jsonp”。

一种优雅的写法

通过封装的动态加载js，实现完全通过js跨域调用接口api。这一种写法是比较常用的，相比于直接在页面中添加script标签，它实现了按需加载数据，也可以说是异步处理的数据，能够像ajax那样去处理数据，这个是我们真正需要的。

/**
 * 动态加载远程js
 * @param {远程链接} b
 * @param {回调函数} c
 */
function LoadScript(b, c) {
oc = c ||
ofunction() {};
ovar a = document.createElement("script");
oa.type = "text/javascript";
oif (a.readyState) {
oa.onreadystatechange = function() {
oif (a.readyState == "loaded" || a.readyState == "complete") {
oa.onreadystatechange = null;
oc();
o}
o};
o} else {
oa.onload = function() {
oc();
o};
o}
oa.src = b;
odocument.getElementsByTagName("head")[0].appendChild(a);
}

function apiCallback(){
    document.getElementById('h1').innerHTML = data.name;
}

LoadScript('http://api.qiusuoweb.com/api.php?m=api1');

优缺点：

这个好处就是不用使用jquery依然能够快速的实现跨域访问数据及其异步处理数据。不好的一点就是当你无法控制服务器端的时候（纯前端人员），你必须按照接口callback的字符来命名你的函数，还有在你使用它之前你得先祈祷接口做了这样的处理；第二不好的一点就是函数名必须是全局的，这个很容易造成全局变量的污染。

 最新评论

 tradeOff: 08月30日 10:19

在某些领域国产化是一个迫不得已的事儿

来源：聊聊国产化

 sue: 07月03日 10:24

可以

来源：微信小程序如何获取单个input值

 流年: 07月02日 11:31

不错的尝试

来源：博客系统如何用markdown编辑器发布文章

 诚心: 09月29日 23:01

学到了

来源：如何一次性推送百万级别的消息

 Nick: 04月14日 12:26

网上的资料还是太老，都只是取一个元素，解决了一大难题

来源： redis set集合取出一组数据并删除

 skywalker: 11月03日 18:21

简洁明了

来源： mysql 获取某个日期的前一天或后一天

script标签快速实现跨域访问

发布评论

 评论(0)

相关阅读

 近期文章

聊聊国产化

内网穿透工具frp配置详情

mac在终端复制出现乱码00~ *** 01~

php html生成图片

scp命令使用说明

如何在当前目录打开终端

 最新评论