目錄

?

什么是jsonp

首先先知道

為什么需要JSONP?

JSONP的原理

jsonp的第一種方式,將目標作為js形式加載過來,盡管其實對方是一個php

一、Ajax工作原理

二、Jsonp工作原理

三、Ajax?和?jsonp的區別

直接用jquery的ajax來請求jsonp

---

什么是jsonp

什么是jsonp,jsonp是什么,jsonp如何使用

首先先知道

jsonp的核心原理就是目標頁面回調本地頁面的方法,并帶入參數

我們常用的動態頁面有jsp,php,aspx

?

為什么需要JSONP?

由于瀏覽器安全限制,數據是不可以直接跨域(包括不同的根域名、二級域名、或不同的端口)請求的,除非目標域名授權你可以訪問。比如設置crossdomain.xml 或在http頭部里授權

但是crossdomain.xml會允許設置的網站訪問所有的數據,而頭部設置又非常麻煩。

所以可以在你授權的數據返回里設置jsonp來讓該接口允許所有的調用者獲取數據。

?

JSONP的原理

jsonp是使用方法回調的原理.

在網頁里,你如果引入其他網頁的js,那這個頁面的js是可以調用你網頁的代碼的

直接請求js 和 請求的動態頁面(jsp,php,aspx)里輸出的javascript代碼 效果一樣

function showjson(json){alert(json.url); }

如果引用的js或動態頁面里有 showjson({"url":"http://www.bejson.com"});這行代碼的話,那就會彈出?http://www.bejson.com

?

jsonp的第一種方式,將目標作為js形式加載過來,盡管其實對方是一個php

下面我們在這個頁面里來請求http://www.ibilibili.com/static/js/forbejson/userinfo.php頁面的數據,這個php頁面數據會有回調函數showjson,來調用我們這個bejson頁面里的 showjson方法 并將一個json傳入：

< ?php //這里是php頁面里,回調showjson方法,這里的方法必須和上面定義的本地頁面中的回調方法一致echo 'showjson({"url":"http://www.bejson.com"})'; ?>

請求又回調函數的php：

$("#getuserp").click(function(){$.getScript("//www.bejson.com/test/userinfop.php"); });

那如果我們抓包后就會看到(如上圖),點擊按鈕后發起了一個http請求,

請求了//www.bejson.com/test/userinfop.php頁面,

頁面里輸出了 showjson({"url":"http://www.bejson.com"}) ,

?

一、Ajax工作原理

相當于在用戶和服務器之間加了—個中間層(AJAX引擎)，使用戶操作與服務器響應異步化。對于用戶請求ajax引擎會做一些數據驗證和數據處理，不是所有請求都提交給服務器，當需要從服務器讀取新數據時由Ajax引擎代為向服務器提交請求。AJAX最大優點就是不刷新整個頁面的前提下與服務器通信維護數據。

過程：

第一步：創建一個ajax引擎對象，IE6的是new ActiveXObject，其他瀏覽器是new一個xmlHttpRequest對象；

第二步：調用open方法啟動一個請求以備發送，open方法傳入三個參數：請求類型，請求url和一個布爾值；

第三步：調用send方法發送；

第四步：處理回調函數onreadystatechange，當readState = 4 （響應數據完成），并且status=200（請求成功）時候處理響應數據。

注意：回調函數要寫在open（）和send（）之前。

二、Jsonp工作原理

動態創建一個script標簽，利用script標簽src屬性訪問沒有限制來實現跨域。

web客戶端通過與調用腳本一樣的方式來調用跨域服務器上動態生成的js格式文件(后綴.json)，服務器動態生成json文件目的是把客戶端需要的數據裝入進去。

允許用戶傳遞一個callback參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來包裹住json數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據。

三、Ajax?和?jsonp的區別

1、ajax和jsonp的調用方式很像，目的一樣，都是請求url，然后把服務器返回的數據進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝。

2、實質不同

　　ajax的核心是通過xmlHttpRequest獲取非本頁內容；

　　jsonp的核心是動態添加script標簽調用服務器提供的js腳本（后綴.json)。

3、區別聯系

　　ajax與jsonp的區別也不在于是否跨域。ajax禁止跨域，但通過服務端代理一樣跨域；jsonp是為了解決ajax禁止跨域的問題，但jsonp并不排斥同域的數據的獲取。

4、jsonp是一種方式或者說非強制性的協議，ajax也不一定非要用json格式來傳遞數據。

5、jsonp只支持get請求，ajax支持get和post請求。

因為是以javascript文件形式加載過來?,所以他會對本地頁面showjson發起回調(看綠色箭頭),并傳入json參數(看紅色箭頭),所以就會彈出了json中的url。

?

直接用jquery的ajax來請求jsonp

感謝葫蘆指出代碼錯誤，并提供正確代碼

$.ajax({url:'//www.bejson.com/test/userinfop.php',type:"GET",dataType:"jsonp",jsonp: false, jsonpCallback: "showjson", //這里的值需要和回調函數名一樣success:function(data){console.log("Script loaded and executed.");},error:function (textStatus) { //請求失敗后調用的函數console.log(JSON.stringify(textStatus));} });

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第十五篇之jsonp（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。