JSONP和AJAX相同,都是客戶端向服務器端發送請求:給服務器端傳遞數據或者從服務器端獲取數據的方式javascript
AJAX屬於同源策略,JSONP屬於非同源策略(跨域請求,跨域請求有不少中,JSONP只是最經常使用的一種)html
JSONP的原理(JSONP請求必定須要對方的服務器作支持才能夠)java
在script的世界中,沒有同源跨域這一說,只要你給個人src屬性中的地址是一個合法的地址,script均可以把對應的內容請求回來,web
JSONP就是利用了script的這個原理,跨域
1. 首先把須要請求數據的那個跨域的API數據接口地址賦值給script的src 服務器
2. 把當前頁面中的某一個函數名看成參數值傳遞給跨域請求數據的服務器(url跨域傳參)函數
3. 服務器接收到請求後須要特殊處理:把你傳遞進來的函數名和它須要的數據拼接成一個JSON格式的字符串 例如:咱們傳遞進去的函數名是fn。他準備好的數據是‘fn([{"name":"zhangsan"}])’,我傳遞的函數名fn(須要給咱們的數據)url
4. 最後服務器把準備的數據經過HTTP協議返回給咱們的客戶端,客戶端發現其實就是讓咱們的fn執行,並且還給fn傳遞了一堆數據,那些數據就是咱們想要的spa
<!DOCTYPE html> <html> <head></head> <body> <script charset="utf-8" type="text/javascript"> function fn(data) { console.log(data) } </script> // 以騰訊的接口爲例 <script charset="utf-8" type='text/javascript' scr="http://matchweb.sports.qq.com/kbs/calendar>columnId=100000&callback=fn"></script> </body> </html>