成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

利用Jsonp實現(xiàn)跨域請求，spring MVC+JQuery

xiangzhihong / 2736人閱讀

摘要：慣例上瀏覽器提供回調(diào)函數(shù)的名稱當作送至服務(wù)器的請求中命名查詢參數(shù)的一部分，例如服務(wù)器會在傳給瀏覽器前將數(shù)據(jù)填充到回調(diào)函數(shù)中。

1 什么是Jsonp?

JSONP（JSON with Padding）是數(shù)據(jù)格式JSON的一種“使用模式”，可以讓網(wǎng)頁從別的網(wǎng)域要數(shù)據(jù)。另一個解決這個問題的新方法是跨來源資源共享。

由于同源策略，一般來說位于www.42du.cn的網(wǎng)頁無法與不是 www.42du.cn的服務(wù)器溝通，而HTML的 < script >元素是一個例外。利用 < script >元素的這個開放策略，網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的JSON數(shù)據(jù)，而這種使用模式就是所謂的JSONP。用JSONP抓到的數(shù)據(jù)并不是JSON，而是任意的JavaScript，用 JavaScript解釋器運行而不是用JSON解析器解析。

2 Jsonp基本原理

為了理解這種模式的原理，先想像有一個回傳JSON文件的URL，而JavaScript 程序可以用XMLHttpRequest跟這個URL要數(shù)據(jù)。假設(shè)我們的URL是 http://tools.42du.cn/jsonp/st... 。假設(shè)iFat3的st_no是3，當瀏覽器通過URL傳遞iFat3的st_id，也就是抓取http://tools.42du.cn/jsonp/st...，得到：

{"st_no":3,"st_name":"iFat3","st_desc":"iFat3是學校的超級學渣"}

這個JSON數(shù)據(jù)可能是依據(jù)傳過去URL的查詢參數(shù)動態(tài)產(chǎn)生的。

這個時候，把 < script >元素的src屬性設(shè)成一個回傳JSON的URL是可以想像的，這也代表從HTML頁面通過script元素抓取 JSON是可能的。

然而，一份JSON文件并不是一個JavaScript程序。為了讓瀏覽器可以在 < script >元素運行，從src里URL 回傳的必須是可運行的JavaScript。在JSONP的使用模式里，該URL回傳的是由函數(shù)調(diào)用包起來的動態(tài)生成JSON，這就是JSONP的“填充（padding）”或是“前輟（prefix）”的由來。

慣例上瀏覽器提供回調(diào)函數(shù)的名稱當作送至服務(wù)器的請求中命名查詢參數(shù)的一部分，例如：

服務(wù)器會在傳給瀏覽器前將JSON數(shù)據(jù)填充到回調(diào)函數(shù)（callback）中。瀏覽器得到的回應(yīng)已不是單純的數(shù)據(jù)敘述而是一個腳本。在本例中，瀏覽器得到的是：

/**/callback({"st_no":3,"st_name":"iFat3","st_desc":"iFat3是學校的超級學渣"});
3 服務(wù)端生成Jsonp

本例中的Jsonp利用的是Spring Framework的JSonp處理部分生成，詳細內(nèi)容請閱讀官方文檔。鏈接見相關(guān)資料中的spring部分，本人強烈建意您在實際開發(fā)過程中，先閱讀官方文檔，再進行代碼編寫。

3.1 模型(model)對象

Student模型對象的get和set方法未列出。

public class Student extends BaseBean implements Serializable {
    private Integer st_no;
    private String st_name;
    private String st_desc;
}
3.2 spring的Jsonp處理 
@ControllerAdvice
@RequestMapping("/jsonp")
public class StudentJsonpAdvice extends AbstractJsonpResponseBodyAdvice {
    private List students = new ArrayList();
    public StudentJsonpAdvice() {
        super("callback");
        initData();
    }
    @RequestMapping(value="/student/all",method= RequestMethod.GET)
    @ResponseBody
    public List list(){
        return students;
    }
    @RequestMapping(value="/student/{st_no}",method= RequestMethod.GET)
    @ResponseBody
    public Student info(@PathVariable Integer st_no){
        if(st_no != null) {
            if(st_no > 0 && st_no <4) {
                return students.get(st_no -1);
            }
            return students.get(0);
        }
        return null;
    }
    private void initData() {
        Student st1 = new Student(1,"王美麗","王美麗是學校的校花");
        Student st2 = new Student(2,"毛三胖","毛三胖是學校的學霸");
        Student st3= new Student(3,"iFat3","iFat3是學校的超級學渣");
        students.add(st1);
        students.add(st2);
        students.add(st3);
    }
}
4 客戶端取得Jsonp數(shù)據(jù)

利用JQuery的ajax方法取得所有學生的數(shù)據(jù)，并利用回調(diào)函數(shù)(callback)將數(shù)據(jù)插入到頁面中。更多JQuery的ajax方法參見相關(guān)資料中的JQuery部分。

function callback(data) {
        $(data).each(function(i,item){
            $("#stu_ul").append("
  • "+item.st_name+"
    • ");
        });
    }
    $(document).ready(function () {
        $.ajax({
            type:"get",
            dataType:"jsonp",
            url:"http://tools.42du.cn/jsonp/student/all",
            jsonpCallback:"callback"
        });
    })
    5 相關(guān)資料

    Spring處理Jsonp文檔

    JQuery Ajax官方文檔

    維基Jsonp條目

    菜鳥Jsonp教程

    JSON中文介紹

    學生列表Jsonp地址

    學生信息Jsonp地址

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83305.html

    相關(guān)文章

    • 慕課網(wǎng)_《Ajax跨域完全講解》學習總結(jié)

      摘要：時間年月日星期三說明本文部分內(nèi)容均來自慕課網(wǎng)。當預(yù)檢請求通過的時候，才發(fā)送真正的請求。 時間：2018年04月18日星期三說明：本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng)：https://www.imooc.com教學源碼：https://github.com/zccodere/s...學習源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介...

      fredshare 評論0 收藏0

    • AJAX 跨域解析

      摘要：這里只講解了兩種常見的跨域方式，因為存在一些弊端，因此推薦使用等方式來解決跨域問題。 一、什么是 AJAX 跨域問題 同源策略規(guī)定，AJAX 請求（XMLHttpRequest）只能發(fā)給同源的網(wǎng)址，否則就會出錯。所謂的同源策略是指 3 個相同：協(xié)議相同、域名相同、端口相同。 比如 http://www.example.com/index.html 這個網(wǎng)址，協(xié)議是http ，域名是 w...

      tinylcy 評論0 收藏0

    • PHP面試總結(jié)

      摘要：而在面試過程中，也是經(jīng)常會遇到的，所以，無論是面試準備還是日常開發(fā)，我們都應(yīng)該關(guān)注這方面的東西。二分法的基本做法是確定要查找的區(qū)間。區(qū)間內(nèi)選取二分點。根據(jù)二分點的值，綜合左右區(qū)間情況以及求解的目的，舍去一半無用的區(qū)間。 showImg(https://images.pexels.com/photos/935977/pexels-photo-935977.jpeg); 前言 面試是你進入...

      alin 評論0 收藏0

    • PHP筆試面試題精選（一）

      摘要：，跨站腳本攻擊。實際發(fā)的請求就是，用于表示這是一個請求。，用于告知服務(wù)器根據(jù)這個參數(shù)獲取回調(diào)函數(shù)的名稱，通常約定就叫。，回調(diào)函數(shù)的名稱，也是前面參數(shù)的值，可省略，會自動生成。 本次課程主要圍繞 PHP 面試和筆試中經(jīng)常會出現(xiàn)的一些知識點，但是面試官會在筆試題基礎(chǔ)上深入擴展，那么你知道如何更好的回答讓面試官滿意嗎？題目收集自騰訊，迅雷，美圖等公司的筆試面試題，以及本人面試經(jīng)歷中印象中的知...

      JohnLui 評論0 收藏0

    • JSONP原理及JQUERY JSONP的使用

      摘要：同源策略在中有一個很重要的安全性限制，被稱為同源策略。然而，當進行一些比較深入的前端編程的時候，不可避免地需要進行跨域操作，這時候同源策略就顯得過于苛刻。 JSONP原理 JSON和JSONP 　　JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。對于JSON大家應(yīng)該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。 　　...

      suosuopuo 評論0 收藏0

    發(fā)表評論

    0條評論

    閱讀需要支付1元查看
    <