目錄

?

什么是jsonp

首先先知道

為什么需要JSONP?

JSONP的原理

jsonp的第一種方式,將目標(biāo)作為js形式加載過來,盡管其實(shí)對(duì)方是一個(gè)php

一、Ajax工作原理

二、Jsonp工作原理

三、Ajax?和?jsonp的區(qū)別

直接用jquery的ajax來請(qǐng)求jsonp

---

什么是jsonp

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

首先先知道

jsonp的核心原理就是目標(biāo)頁面回調(diào)本地頁面的方法,并帶入?yún)?shù)

我們常用的動(dòng)態(tài)頁面有jsp,php,aspx

?

為什么需要JSONP?

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

但是crossdomain.xml會(huì)允許設(shè)置的網(wǎng)站訪問所有的數(shù)據(jù),而頭部設(shè)置又非常麻煩。

所以可以在你授權(quán)的數(shù)據(jù)返回里設(shè)置jsonp來讓該接口允許所有的調(diào)用者獲取數(shù)據(jù)。

?

JSONP的原理

jsonp是使用方法回調(diào)的原理.

在網(wǎng)頁里,你如果引入其他網(wǎng)頁的js,那這個(gè)頁面的js是可以調(diào)用你網(wǎng)頁的代碼的

直接請(qǐng)求js 和 請(qǐng)求的動(dòng)態(tài)頁面(jsp,php,aspx)里輸出的javascript代碼 效果一樣

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

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

?

jsonp的第一種方式,將目標(biāo)作為js形式加載過來,盡管其實(shí)對(duì)方是一個(gè)php

下面我們?cè)谶@個(gè)頁面里來請(qǐng)求http://www.ibilibili.com/static/js/forbejson/userinfo.php頁面的數(shù)據(jù),這個(gè)php頁面數(shù)據(jù)會(huì)有回調(diào)函數(shù)showjson,來調(diào)用我們這個(gè)bejson頁面里的 showjson方法 并將一個(gè)json傳入：

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

請(qǐng)求又回調(diào)函數(shù)的php：

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

那如果我們抓包后就會(huì)看到(如上圖),點(diǎn)擊按鈕后發(fā)起了一個(gè)http請(qǐng)求,

請(qǐng)求了//www.bejson.com/test/userinfop.php頁面,

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

?

一、Ajax工作原理

相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層(AJAX引擎)，使用戶操作與服務(wù)器響應(yīng)異步化。對(duì)于用戶請(qǐng)求ajax引擎會(huì)做一些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理，不是所有請(qǐng)求都提交給服務(wù)器，當(dāng)需要從服務(wù)器讀取新數(shù)據(jù)時(shí)由Ajax引擎代為向服務(wù)器提交請(qǐng)求。AJAX最大優(yōu)點(diǎn)就是不刷新整個(gè)頁面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)。

過程：

第一步：創(chuàng)建一個(gè)ajax引擎對(duì)象，IE6的是new ActiveXObject，其他瀏覽器是new一個(gè)xmlHttpRequest對(duì)象；

第二步：調(diào)用open方法啟動(dòng)一個(gè)請(qǐng)求以備發(fā)送，open方法傳入三個(gè)參數(shù)：請(qǐng)求類型，請(qǐng)求url和一個(gè)布爾值；

第三步：調(diào)用send方法發(fā)送；

第四步：處理回調(diào)函數(shù)onreadystatechange，當(dāng)readState = 4 （響應(yīng)數(shù)據(jù)完成），并且status=200（請(qǐng)求成功）時(shí)候處理響應(yīng)數(shù)據(jù)。

注意：回調(diào)函數(shù)要寫在open（）和send（）之前。

二、Jsonp工作原理

動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽，利用script標(biāo)簽src屬性訪問沒有限制來實(shí)現(xiàn)跨域。

web客戶端通過與調(diào)用腳本一樣的方式來調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件(后綴.json)，服務(wù)器動(dòng)態(tài)生成json文件目的是把客戶端需要的數(shù)據(jù)裝入進(jìn)去。

允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來包裹住json數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)。

三、Ajax?和?jsonp的區(qū)別

1、ajax和jsonp的調(diào)用方式很像，目的一樣，都是請(qǐng)求url，然后把服務(wù)器返回的數(shù)據(jù)進(jìn)行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進(jìn)行了封裝。

2、實(shí)質(zhì)不同

　　ajax的核心是通過xmlHttpRequest獲取非本頁內(nèi)容；

　　jsonp的核心是動(dòng)態(tài)添加script標(biāo)簽調(diào)用服務(wù)器提供的js腳本（后綴.json)。

3、區(qū)別聯(lián)系

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

4、jsonp是一種方式或者說非強(qiáng)制性的協(xié)議，ajax也不一定非要用json格式來傳遞數(shù)據(jù)。

5、jsonp只支持get請(qǐng)求，ajax支持get和post請(qǐng)求。

因?yàn)槭且詊avascript文件形式加載過來?,所以他會(huì)對(duì)本地頁面showjson發(fā)起回調(diào)(看綠色箭頭),并傳入json參數(shù)(看紅色箭頭),所以就會(huì)彈出了json中的url。

?

直接用jquery的ajax來請(qǐng)求jsonp

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

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

本面試題為前端常考面試題，后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠，一個(gè)沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。