首先虽然jquery把它归在了ajax里,但jsonp不是ajax。因为它是个协议,它本身也是同步的;
直接上个例子:
服务端(php):
<?php
//json数据
$json_data = [
'name'=>'kervi',
'age'=>'23',
'hobby'=>'play code',
'status'=>'(*^▽^*)'
];
//转化为json数据
$json_data = json_encode($json_data);
//输出jsonp格式的数据;即函数名(参数)
echo "jsoncallback(" . $json_data . ")";
//jsoncallback({'name':'kervi'...});
浏览器端(html):
<!DOCTYPE html>
<html>
<head></head>
<script>
//1.这里的函数名和服务端回调函数名一致就行;
function jsoncallback(data){
console.dir(data);
}
</script>
// 2.加载后端文件
<script type='text/javascript' src="https://me.kervi.cn/v1/datas/jsondata.php"></script>
我们来看一下结果打印;
顺序被排序了,但结果是获取到了;
写在最后,(原理)
这种方式之所以可行,关键在
<script type='text/javascript' src="..."></script>
这句引入外部js文件
<img src=''>
<video src=''></video>
<script src=''></script>
不难发现,这些都是可以跨域的,但ajax是用过XMLHttpRequest;最基本的,方式就不一样了;因此就可以从这些标签下手(引入),实现跨域;
如果我们再看
这次我们不打印,看看network里文件引入了什么
是函数调用!参数就是我们要的数据;我们前面定义了这个函数了;
那么假设文件返回的是
var a = ‘helloworld’;
然后你在最前面引入,后面是不是可以直接引用了;
end
我博客网站放了个接口,去测试一下你的jsonp吧;正常调用就行了
https://me.kervi.cn/v1/datas/jsondata.php
**
记得为我点赞和关注~
**
服务端代码