JSONP和AJAX
相同點：都是客戶端向服務器端發送請求文本：給服務器端傳遞數據，或者，從服務器端獲取數據的方式
不同點：
AJAX屬於同源策略
JSONP屬於非同源策略（跨域請求） --- > 實現跨域請求的方法有很多種，只不過JSONP（利用script標籤的跨域能力）是最常用的
其他幾種跨域方式：
區分同源和非同源
用當前的頁面的地址 && 數據請求的接口地址 之間的比較
1.協議
2.域名或者IP
3.端口號
以上三部分完全相同屬於同源策略，我們使用AJAX技術回去數據
只要有一個不一樣，就屬於非同源策略，我們一般使用JSONP獲取數據
-->當前也頁面的URL地址（在WebStorm預覽頁面的時候會默認的創建一個本地虛擬的服務，端口號是63342）
http://localhost:63342/www/exp/09JSONP跨域請求/index.html
-->我們需要在index.html中做一件事情
[把本地在同一個服務下的data.txt中的內容獲取到]
我們需要請求數據的地址是http://localhost:63342/www/exp/09JSONP跨域請求/data.txt
由於兩個地址的協議，域名，端口號都相同，屬於同源策略，則使用AJAX請求數據
<script type="text/javascript">
var xhr = new XMLHttpRequest;
xhr.open("get", "data.txt", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send(null);
</script>得到的結果圖如下所示：
-->我們需要獲取的是騰訊體育項目中的數據
我們需要請求的地址是：http://video.qq.com/fcgi-bin/logout?clear=1
由於兩個地址的域名，端口號不相同，只要有一處不相同，屬於非同源策略，則使用JSONP請求數據
<script type="text/javascript">
function fn(data) {
console.log(data);
}
</script>
<script type="text/javascript" src="http://video.qq.com/fcgi-bin/logout?clear=1&callback=fn"></script>原本請求的地址裏面包含這些數據
請求成功後返回數據用console.log顯示得到的結果是
JSONP的原理：
（JSONP請求一定需要對方的服務器做支持纔可以）
--> 在script標籤的世界中，沒有同源跨域這一說，只要給script標籤的SRC屬性中的地址是一個合法的地址，script標籤都可以把對應的內容請求回來
-->JSONP就是利用了script的這個原理
①我們首先把需要請求數據的，那個跨域的API數據接口的地址，賦值給script的SRC
②把當前頁面中的某一個函數名當做參數值，傳遞給騰訊（需要跨域請求的）服務器，URL問號傳參
③騰訊（需要跨域請求的）服務器接收到你的請求後，需要進行特殊的處理，把你傳遞進來的函數名和她需要給你的數據拼接成一個字符串 例如：我們傳遞進去的函數名是fn，它準備好的數據是[{"name" : "qianduan"}] --> 拼接後的結果就是'fn([{"name" : "qianduan"}])'
格式爲：'我傳遞的函數名（需要給我們的數據）'
④最後騰訊的服務器把準備的數據通過HTTP協議返回給我們的客戶端，客戶端發現其實就是讓我們的fn執行，而且還給fn傳遞了一堆的數據，那些數據就是我們想要的
