免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

JavaAjaxjsonp跨域請求的案例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹Java Ajax jsonp跨域請求的案例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)、做網(wǎng)站與策劃設(shè)計(jì),湄潭網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:湄潭等地區(qū)。湄潭做網(wǎng)站價(jià)格咨詢:18980820575

1、什么是JSONP

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

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

2、Ajax 請求其他域接口

我這個(gè)項(xiàng)目要請求另外一個(gè)第一個(gè)后臺接口請求數(shù)據(jù),在頁面渲染的時(shí)候,通過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.

Java Ajax jsonp跨域請求的案例分析

這里就說明不允許跨域請求,那么怎么辦? 換成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!Java Ajax jsonp跨域請求的案例分析 明明請求回來數(shù)據(jù),結(jié)果還是報(bào)錯(cuò)。原因是ajax請求服務(wù)器,而返回的數(shù)據(jù)格式不符合jsonp的返回格式,那么jsonp格式是什么樣的?

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

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

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

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

Java Ajax jsonp跨域請求的案例分析

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

比如我如下配置:

$.ajax({
      url: 'http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10',
      type: 'GET',
      dataType: 'jsonp',
      jsonp:'callbacka',//傳遞給請求處理程序或頁面的,用以獲得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ù)器亦可以通過下面方法獲取回調(diào)的函數(shù)名:

代碼如下:

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

注意:系統(tǒng)會區(qū)分函數(shù)名大小寫。

Java Ajax jsonp跨域請求的案例分析

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

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

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

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

Java Ajax jsonp跨域請求的案例分析

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

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

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

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

以上是Java Ajax jsonp跨域請求的案例分析的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道!

本文標(biāo)題:JavaAjaxjsonp跨域請求的案例分析-創(chuàng)新互聯(lián)
鏈接地址:http://m.newbst.com/article22/jgicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序自適應(yīng)網(wǎng)站ChatGPT網(wǎng)站建設(shè)網(wǎng)站營銷品牌網(wǎng)站制作

廣告

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

搜索引擎優(yōu)化