PHP下ajax跨域的解决方案之jsonp实例分析资源-CSDN文库

85 浏览量 2020-10-15 13:54:31 上传评论收藏 62KB PDF 举报

JSONP（JSON with Padding）是JavaScript对象 notation的Padding形式，它是解决浏览器同源策略限制，实现AJAX跨域请求的一种方法。同源策略是浏览器为了安全而实施的一种机制，它规定了只有相同协议、域名和端口的网页才能互相访问其资源。然而，JSONP巧妙地绕过了这一限制。在JSONP的工作模式中，客户端（通常是JavaScript）向服务器发送请求时，会在URL中附加一个callback参数，这个参数的值是客户端预先定义好的函数名。服务器接收到请求后，不再返回纯JSON数据，而是返回一个包裹在函数调用中的JSON数据，即`callback({json数据})`。当这个包裹着JSON数据的JavaScript脚本被浏览器执行时，JSON数据会被自动传递给客户端预先定义的函数，从而实现了跨域数据交互。例如，在PHP环境下，服务器端（b.php）可以根据接收到的callback参数动态生成响应内容： ```php <?php $callback = !empty($_GET['callback']) ? trim($_GET['callback']) : ''; if (!empty($callback)) { $data = json_encode(['uid' => 1, 'name' => '测试']); echo "{$callback}({$data});"; } ?> ``` 客户端（a.com）则可以通过以下方式发起JSONP请求： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function handleData(data) { alert("uid :" + data.uid + " name :" + data.name); } </script> <script type="text/javascript" src="http://www.b.com/b.php?callback=handleData"></script> </body> </html> ``` 在这个例子中，`handleData`是客户端定义的函数，服务器端根据`callback`参数生成`handleData({"uid":1,"name":"测试"})`这样的响应，浏览器执行这个脚本时，就会调用`handleData`并将JSON数据作为参数传递。 jQuery库也内置了对JSONP的支持，使用`$.ajax`或`$.getJSON`时，只需设置`dataType: 'jsonp'`即可。例如： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://www.b.com/jquery.js"></script> </head> <body> <div class="info"></div> <script> $.ajax({ url: 'http://www.b.com/b.php', dataType: 'jsonp', success: function(data) { $('.info').html('uid : ' + data.uid + ', name : ' + data.name); }, error: function() { alert('请求失败'); } }); </script> </body> </html> ``` 在这个jQuery示例中，jQuery会自动处理callback参数的生成和JSON数据的回调，简化了开发过程。需要注意的是，JSONP的安全性和灵活性相对较弱。由于所有控制权都交给了客户端指定的函数，服务器无法验证请求的合法性，容易受到XSS攻击。此外，JSONP只能实现GET请求，不能处理POST等其他HTTP方法，也不支持HTTP头，如Cookie和自定义头信息。 JSONP是一种在特定场景下解决跨域问题的有效手段，尤其是在只支持GET请求且对安全性要求不高的情况下。随着现代浏览器对CORS（跨源资源共享）的支持，JSONP逐渐被更安全、更灵活的CORS所替代。但鉴于老版本浏览器的兼容性需求，JSONP仍然是许多开发者在进行跨域通信时的重要选择。

资源推荐

资源评论