json跨域解决方案-jsonp

Posted 2021-04-30 树莓1201

15

1

技术现状

1. ajax禁止了不同源的url访问；

2. <script>标签的src可以访问不同源的url；

3. json数据格式被js支持。

2

解决思路

1. 加载跨域服务端上的脚本，返回一段js代码；

2. 客户端使用js代码；

3

基本实现

1. 客户端代码

<script>

var localHandler = function(data){

alert("我是本地函数，可以被跨域的remote.js文件调用，远程js的数据是：" + data.result);

}

</script>

<script type="text/javascript" src="跨域服务器/remote.js"></script>

2. 服务器代码

//remote.js

localHandler({

"result": "success"

});

3. 执行结果

4

引入callback参数

让跨域服务器的脚本知道，它要调用的本地函数名，所以加载跨域脚本时传递一个callback参数，脚本返回数据时用callback参数包裹json数据

1. 客户端代码

<div id="student"></div>

<script>

var student = function(data){

$("#student").html(data.name+

       "<br>"+data.age+

       "<br>"+data.class+

       "<br>"+data.score

);

}

var url = "跨域服务器/student.php?callback=student";

var script = document.createElement('script');

script.setAttribute('src', url);

document.getElementsByTagName('head')[0].appendChild(script);

</script>

2. 服务器代码

//student.php

<?php

$data = array(

"name"=>"Tom",

"age"=>6,

"class"=>10,

"score"=>95

);

//callback函数名称

$callback = $_GET['callback'];

//输出

echo $callback."(".json_encode($data).")";

?>

3. 执行结果

5

ajax调用

1. 客户端代码

<script>

$.ajax({

url: "跨域服务器/student.php",

method: "get",

dataType: "jsonp",

jsonp: "callback",  //请求参数名

jsonpCallback: "student",    //返回的回调函数名

success: function(data){

       alert("success\nname: "+ data.name);

},

error: function(){

       alert("错误");

}

});

</script>

2. 服务器代码

//student.php

<?php

$data = array(

"name"=>"Tom",

"age"=>6,

"class"=>10,

"score"=>95

);

?>

3. 执行结果

跨域服务器/student.php?callback=student

返回结果：

student({"name":"Tom","age":6,"class":10,"score":95})