JSONP(JSON with Padding)是一种用于解决跨域请求的方法,它允许从一个域请求另一个域的数据。JSONP利用了'
2.目标域服务器接收到请求后,将JSON数据作为参数传递给回调函数,并将其作为JavaScript代码返回给客户端
例
myCallback({"name": "John", "age": 30});
3.客户端定义回调函数myCakkback,在接收带返回的javascript代码时,自动执行该函数,并以JSON数据作为参数
function myCallback(data) { // 处理返回的 JSON 数据 console.log(data.name); console.log(data.age); }
通过这种方式,JSONP可以绕过浏览器的同源策略限制,实现跨域请求和数据获取。
在192.168.120.84上生成PHP代码,并命名为list-json.php
set_charset('utf8'); $sql = "select * from xssdata"; $result = $conn->query($sql); //输出JSON数据到页面 $json = json_encode($result->fetch_all(MYSQLI_ASSOC)); echo $json; $conn->close(); ?>
在浏览器中直接访问,将获取以下数据
Document
(1)访问方式
将list-json.php的代码保存到192.168.120.51服务器,在浏览器中直接访问该地址,确认可以正常访问(注意改数据库连接)
(2)在84服务器发list-json.html页面访问
将list-json.html在的listUrl地址修改为51服务器的地址,此时在浏览器中访问,将无法弹窗,打开F12,看到控制台的输出如下
以上,就是跨域存在的问题。
1.修改51服务器的list-json.php
将 echo $json; 替换为 echo $_GET['callback']."(".$json.")"; //向前端输出回调函数
2.将84服务器上的list-json.html页面修改为:
Document
再次访问http://192.168.120.84/jsonp/list-json.html实现正常访问
原理:script标签不受同源策略影响,再通过回调将值作为实参传给页面。
1.当list-json.php实现了跨域访问之后,任意网站均可以访问其数据,只要知道其参数名$_GRT['callback'],从而在JS中进行函数回调,即可完成访问。
2.另外一点就是将放在