【相關(guān)學(xué)習(xí)推薦：java基礎(chǔ)教程】

創(chuàng)新互聯(lián)公司長(zhǎng)期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為前進(jìn)企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站，前進(jìn)網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

1、什么是JSONP

一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的<script> 元素是一個(gè)例外。利用 <script> 元素的這個(gè)開(kāi)放策略，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。

JSONP是一種協(xié)議，為了解決客戶端請(qǐng)求服務(wù)器跨域的問(wèn)題，但是并非是正式的傳輸協(xié)議。該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)了.

2、Ajax 請(qǐng)求其他域接口

我這個(gè)項(xiàng)目要請(qǐng)求另外一個(gè)第一個(gè)后臺(tái)接口請(qǐng)求數(shù)據(jù)，在頁(yè)面渲染的時(shí)候，通過(guò)ajax加載數(shù)據(jù)如下：

$.ajax({
        url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',
        type: 'GET',
        dataType: 'json',
        timeout: 5000,
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
          alter("aaaa");
        }
      });

這樣就出現(xiàn)跨域的錯(cuò)誤，如下所示：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.

這里就說(shuō)明不允許跨域請(qǐng)求，那么怎么辦？ 換成jsonp好了。就改了dataType這個(gè)字段。

$.ajax({
        url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',
        type: 'GET',
        dataType: 'jsonp',
        timeout: 5000,
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
          alter("aaaa");
        }
      });

結(jié)果： Uncaught SyntaxError: Unexpected token!

what the fuck！ 明明請(qǐng)求回來(lái)數(shù)據(jù)，結(jié)果還是報(bào)錯(cuò)。原因是ajax請(qǐng)求服務(wù)器，而返回的數(shù)據(jù)格式不符合jsonp的返回格式，那么jsonp格式是什么樣的？

Callback({msg:'this is json data'})

這是什么叼東西，奇葩誰(shuí)定義的！如果你這么想，看來(lái)你沒(méi)有仔細(xì)看第1點(diǎn)，JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，像xml一樣。JSONP是一種使用JSON數(shù)據(jù)的方式，返回的不是JSON對(duì)象，是包含JSON對(duì)象的javaScript腳本。但是上圖是一段json串，所以報(bào)錯(cuò)啦。

3、參數(shù)返回處理

有一點(diǎn)你會(huì)發(fā)現(xiàn)在你是用jsonp協(xié)議請(qǐng)求時(shí)，在參數(shù)中除了自己填寫(xiě)的參數(shù)外還有名為callback的參數(shù)，如圖：

看看這個(gè)參數(shù)是什么東西，因?yàn)槲以赼jax請(qǐng)求的時(shí)候沒(méi)有指定，jsonp這個(gè)參數(shù)，那么系統(tǒng)默認(rèn)參數(shù)名為“callback”。沒(méi)有指定jsonpCallback參數(shù), 那么jquery會(huì)生成隨機(jī)的函數(shù)名，如上圖所示。

比如我如下配置：

$.ajax({
      url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',
      type: 'GET',
      dataType: 'jsonp',
      jsonp:'callbacka',//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(默認(rèn)為:callback)
      jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名
      timeout: 5000,
      contentType: 'application/json; charset=utf-8',
      success: function (result) {
        alter("aaaa");
      }
    });

那么服務(wù)器亦可以通過(guò)下面方法獲取回調(diào)的函數(shù)名：

代碼如下:

string callbackFunName =request.getParameter（"callbacka"）;//獲取的就是success_jsonpCallback 字符串

注意：系統(tǒng)會(huì)區(qū)分函數(shù)名大小寫(xiě)。

那么下面按照格式包裝一下看看咯：

String callback = request.getParameter("callback"); //不指定函數(shù)名默認(rèn) callback

return callback+ "(" + jsonStr + ")"

包了一下，結(jié)果真的不報(bào)錯(cuò)，看下返回?cái)?shù)據(jù)如下圖：

4、JSONP的執(zhí)行過(guò)程

首先在客戶端注冊(cè)一個(gè)callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)傳給服務(wù)器。注意：服務(wù)端得到callback的數(shù)值后，要用jsonp1236827957501(......)把將要輸出的json內(nèi)容包括起來(lái)，此時(shí)，服務(wù)器生成 json 數(shù)據(jù)才能被客戶端正確接收。

然后,以 javascript 語(yǔ)法的方式，生成一個(gè)function， function 名字就是傳遞上來(lái)的參數(shù) 'jsoncallback'的值 jsonp1236827957501 .

最后,將 json 數(shù)據(jù)直接以入?yún)⒌姆绞?，放置?function 中，這樣就生成了一段 js 語(yǔ)法的文檔，返回給客戶端?？蛻舳藶g覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)javascript文檔數(shù)據(jù)，作為參數(shù)， 傳入到了客戶端預(yù)先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里。

相關(guān)文章推薦：ajax視頻教程

當(dāng)前文章：一起看看JavaAjaxjsonp跨域請(qǐng)求
文章分享：http://www.ekvhdxd.cn/article44/cjoehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、云服務(wù)器、外貿(mào)建站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)