JSONP · 学习AJAX

[TOC] >[success] # JSONP <br/> [jsonp菜鸟教程](https://www.runoob.com/json/json-jsonp.html) [关于jsonp帖子](https://segmentfault.com/a/1190000008445998) <br/> ~~~ 1. 'JSONP'是'json'的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即'跨域'读取数据。 2. 为什么我们从不同的域（网站）访问数据需要用到'JSONP'呢？这是因为同源策略。 3. 'JSONP'实现跨域请求的原理简单的说，就是动态创建'<script>'标签，然后利用'<script>'的‘src’不受同源策略约束来'跨域'获取数据。 ~~~ <br/> >[success] ## 前端代码 <br/> 1. index.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jsonp</title> </head> <body> 1.  <img src="https://www.baidu.com/img/bd_logo1.png"> 2.    3.   4. <script> function doSomething(data) { // 第一步 console.log(data) // 第三步这里接口数据返回了 } </script>  <script src="http://10.1.2.160/backData.php?callback=doSomething"></script> </body> </html> ~~~ <br/> >[success] ## 后端代码 <br/> ~~~ <?php // 接收前端传过来的参数doSomething $methodName = $_GET['callback']; // 把数据拼接回调函数中 echo $methodName.'({"name":"杰克","food":"西蓝花"})'; ?> ~~~