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":"西藍花"})'; ?> ~~~