JS新特性與流行框架

1.什么是Jsonp

Jsonp（JSON with Padding）是json的一種“使用模式”，可以讓網(wǎng)頁(yè)從別的域名（網(wǎng)站）獲取資料，即跨域讀取數(shù)據(jù)。
為什么從不同的域名（網(wǎng)站）訪問數(shù)據(jù)需要Jsonp呢？，這是因?yàn)?strong>同源策略的存在。

2.什么是跨域

跨域是指一個(gè)域（網(wǎng)站）下的文檔或腳本試圖去請(qǐng)求另一個(gè)域（網(wǎng)站）下的資源

image
3.同源策略

同源策略/SOP（Same origin policy）是一種規(guī)定，由Netscape公司在1995年引入瀏覽器，它是瀏覽器最核心也是最基本的安全功能，現(xiàn)在所有支持JavaScript的瀏覽器都會(huì)使用這個(gè)策略。如果缺少了同源策略，瀏覽器很容易收到XSS、CSFR等攻擊。所謂同源是指”協(xié)議+域名+端口“三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址，也非同源。

3.1 非同源策略限制以下幾種行為：
  • Cookie、LocalStorage 和 IndexDB 無(wú)法讀取
  • DOM和JS對(duì)象無(wú)法獲得
  • AJAX請(qǐng)求不能發(fā)送
4.常見跨域場(chǎng)景
image
5.解決跨域方案
  • 通過jsonp跨域
  • document.domain + iframe跨域
  • location.hash + iframe
  • window.name + iframe 跨域
  • postMessage 跨域
  • 跨域資源共享（CORS）
  • nginx 代理跨域
  • nodejs 中間件代理跨域
  • WebSocket 協(xié)議跨域
6.Jsonp的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：

它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受同源策略限制，它的兼容性很好，不需要 XMLHttpRequest 或ActiveX 的支持；并且在請(qǐng)求完畢后可以通過調(diào)用 callback 的方式回傳結(jié)果。

缺點(diǎn)：

它只支持 GET 請(qǐng)求而不支持 POST 等其它類型的 HTTP 請(qǐng)求。它只支持跨域 HTTP 請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行 JavaScript 調(diào)用的問題。

二、Jsonp的使用
1.搭建跨域場(chǎng)景
1.1 需求
  • 創(chuàng)建兩個(gè)web工程，名為jsonDemo1(8080)、jsonDemo2(9090)
  • jsonDemo1 中提供一個(gè) index.jsp。
  • 在 jsonDemo1 的 index.jsp 中通過 jQuery 的 Ajax 跨域請(qǐng)求 jsonDemo2
  • jsonDemo2 中使用 springMVC 處理請(qǐng)求，返回一個(gè) json 對(duì)象
  • 在 jsonDemo1 中將返回的結(jié)果插入到 index.jsp 中
1.2 創(chuàng)建項(xiàng)目

jsonDemo1

image

jsonDemo2

image
2.使用jsonp解決跨域
2.1 常見跨域異常
image
2.2 ajax請(qǐng)求要改變
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {

                $.ajax({
                    type:'get',
                    url:'http://localhost:9090/user/findUser',
                    dataType:'jsonp',
                    jsonp:'callback',
                    success:function (data) {
                        var str = "";
                        for (var i = 0; i < data.length; i++) {
                            str += data[i].userId +" "+ data[i].userName +" "+data[i].userAge + "  ";
                        }
                        console.log(str);
                        $('#show').html(str);
                    }
                });
            })
        })
    </script>
</head>
<body>
    <span id="show">
        <input type="button" value="ok" id="btn">
    </span>
</body>
</html>
2.3 Controller也要改變
@Controller
@RequestMapping("/user")
public class UserController {

    @RequestMapping("/findUser")
    @ResponseBody
    public String findUser(String callback){
        User user1 = new User(1,"admin",20);
        User user2 = new User(2,"tom",22);
        User user3 = new User(3,"alice",21);
        List<User> list = new ArrayList<>();
        list.add(user1);
        list.add(user2);
        list.add(user3);
        String json = JsonUtils.objectToJson(list);
        //callback({id:1,name:admin.age:20})
        return callback + "("+json+")";
    }
}
3.SpringMVC對(duì)Jsonp的支持
注意：需要導(dǎo)入jackson的jar包
    @RequestMapping("/findUser")
    @ResponseBody
    public Object findUser(String callback){
        User user1 = new User(1, "admin", 20);
        User user2 = new User(2, "tom", 22);
        User user3 = new User(3, "alice", 21);
        List<User> list = new ArrayList<>();
        list.add(user1);
        list.add(user2);
        list.add(user3);
        //json 轉(zhuǎn)換
        MappingJacksonValue mv = new MappingJacksonValue(list);
        mv.setJsonpFunction(callback);

        return mv;
    }

作者：青年心路
鏈接：http://www.itdecent.cn/p/5f5af76f54af
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

1.什么是Jsonp

Jsonp（JSON with Padding）是json的一種“使用模式”，可以讓網(wǎng)頁(yè)從別的域名（網(wǎng)站）獲取資料，即跨域讀取數(shù)據(jù)。
為什么從不同的域名（網(wǎng)站）訪問數(shù)據(jù)需要Jsonp呢？，這是因?yàn)?strong>同源策略的存在。

2.什么是跨域

跨域是指一個(gè)域（網(wǎng)站）下的文檔或腳本試圖去請(qǐng)求另一個(gè)域（網(wǎng)站）下的資源

image
3.同源策略

同源策略/SOP（Same origin policy）是一種規(guī)定，由Netscape公司在1995年引入瀏覽器，它是瀏覽器最核心也是最基本的安全功能，現(xiàn)在所有支持JavaScript的瀏覽器都會(huì)使用這個(gè)策略。如果缺少了同源策略，瀏覽器很容易收到XSS、CSFR等攻擊。所謂同源是指”協(xié)議+域名+端口“三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址，也非同源。

3.1 非同源策略限制以下幾種行為：
  • Cookie、LocalStorage 和 IndexDB 無(wú)法讀取
  • DOM和JS對(duì)象無(wú)法獲得
  • AJAX請(qǐng)求不能發(fā)送
4.常見跨域場(chǎng)景
image
5.解決跨域方案
  • 通過jsonp跨域
  • document.domain + iframe跨域
  • location.hash + iframe
  • window.name + iframe 跨域
  • postMessage 跨域
  • 跨域資源共享（CORS）
  • nginx 代理跨域
  • nodejs 中間件代理跨域
  • WebSocket 協(xié)議跨域
6.Jsonp的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：

它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受同源策略限制，它的兼容性很好，不需要 XMLHttpRequest 或ActiveX 的支持；并且在請(qǐng)求完畢后可以通過調(diào)用 callback 的方式回傳結(jié)果。

缺點(diǎn)：

它只支持 GET 請(qǐng)求而不支持 POST 等其它類型的 HTTP 請(qǐng)求。它只支持跨域 HTTP 請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行 JavaScript 調(diào)用的問題。

二、Jsonp的使用
1.搭建跨域場(chǎng)景
1.1 需求
  • 創(chuàng)建兩個(gè)web工程，名為jsonDemo1(8080)、jsonDemo2(9090)
  • jsonDemo1 中提供一個(gè) index.jsp。
  • 在 jsonDemo1 的 index.jsp 中通過 jQuery 的 Ajax 跨域請(qǐng)求 jsonDemo2
  • jsonDemo2 中使用 springMVC 處理請(qǐng)求，返回一個(gè) json 對(duì)象
  • 在 jsonDemo1 中將返回的結(jié)果插入到 index.jsp 中
1.2 創(chuàng)建項(xiàng)目

jsonDemo1

image

jsonDemo2

image
2.使用jsonp解決跨域
2.1 常見跨域異常
image
2.2 ajax請(qǐng)求要改變
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {

                $.ajax({
                    type:'get',
                    url:'http://localhost:9090/user/findUser',
                    dataType:'jsonp',
                    jsonp:'callback',
                    success:function (data) {
                        var str = "";
                        for (var i = 0; i < data.length; i++) {
                            str += data[i].userId +" "+ data[i].userName +" "+data[i].userAge + "  ";
                        }
                        console.log(str);
                        $('#show').html(str);
                    }
                });
            })
        })
    </script>
</head>
<body>
    <span id="show">
        <input type="button" value="ok" id="btn">
    </span>
</body>
</html>
2.3 Controller也要改變
@Controller
@RequestMapping("/user")
public class UserController {

    @RequestMapping("/findUser")
    @ResponseBody
    public String findUser(String callback){
        User user1 = new User(1,"admin",20);
        User user2 = new User(2,"tom",22);
        User user3 = new User(3,"alice",21);
        List<User> list = new ArrayList<>();
        list.add(user1);
        list.add(user2);
        list.add(user3);
        String json = JsonUtils.objectToJson(list);
        //callback({id:1,name:admin.age:20})
        return callback + "("+json+")";
    }
}
3.SpringMVC對(duì)Jsonp的支持
注意：需要導(dǎo)入jackson的jar包
    @RequestMapping("/findUser")
    @ResponseBody
    public Object findUser(String callback){
        User user1 = new User(1, "admin", 20);
        User user2 = new User(2, "tom", 22);
        User user3 = new User(3, "alice", 21);
        List<User> list = new ArrayList<>();
        list.add(user1);
        list.add(user2);
        list.add(user3);
        //json 轉(zhuǎn)換
        MappingJacksonValue mv = new MappingJacksonValue(list);
        mv.setJsonpFunction(callback);

        return mv;
    }

作者：愛編程的胡圖圖
鏈接：http://www.itdecent.cn/p/8369010c11df
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容