jsonp原理學習筆記

一、什么是jsonp

1）瀏覽器的同源策略：瀏覽器出于安全考慮具有跨域的安全限制，即限制從一個源加載的文檔或腳本與來自另一個源的資源進行交互，而服務器端不存在跨域安全限制；
2）同源：兩個頁面的協(xié)議、域名、端口相同則為同源；

二、js如何發(fā)起jsonp

1）跨域方法：要在js里直接用XMLHttpRequest請求不同域上的數(shù)據(jù)時是不可以，解決方法一種是在前端進行一些特殊處理；二是可以把請求發(fā)到服務端，通過后臺代碼發(fā)起請求，將數(shù)據(jù)返回給前端；
2）jsonp原理：在頁面直接發(fā)起一個跨域的ajax請求是不可以的，但是可以通過<script>標簽在頁面上引入不同域的js腳本來請求別的域的資源，就像可以直接在頁面上使用<img src="">標簽來請求其他頁面的資源一樣；
3）js使用<script>標簽來跨域：

// html代碼
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head>
   <title>跨域測試</title>
   <script src="js/jquery-1.7.2.js"></script>
   <script>
       //回調函數(shù)
       function showData (result) {
          var data = JSON.stringify(result); //json對象轉成字符串
          $("#text").val(data);
       }
      // 跨域請求
      $(document).ready(function () {
          $("#btn").click(function () {
          //向頭部輸入一個腳本，該腳本發(fā)起一個跨域請求
          $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
       }); 
     });
   </script>
 </head>
 <body>
    <input id="btn" type="button" value="跨域獲取數(shù)據(jù)" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea> 
 </body>
 </html>

???????當點擊"跨域獲取數(shù)據(jù)"的按鈕時，添加一個<script>標簽，用于發(fā)起跨域請求，注意看請求地址后面帶了一個callback=showData的參數(shù)；
???????showData即是回調函數(shù)名稱，傳到后臺，用于包裹數(shù)據(jù)。數(shù)據(jù)返回到前端后，就是showData(result)的形式，因為是script腳本，所以自動調用showData函數(shù)，而result就是showData的參數(shù)。
???????至此，我們算是跨域把數(shù)據(jù)請求回來了，但是比較麻煩，需要自己寫腳本發(fā)起請求，然后寫個回調函數(shù)處理數(shù)據(jù)，不是很方便。

// 服務器端
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   response.setCharacterEncoding("UTF-8");
   response.setContentType("text/html;charset=UTF-8");
   //數(shù)據(jù)
   List<Student> studentList = getStudentList();
   JSONArray jsonArray = JSONArray.fromObject(studentList);
   String result = jsonArray.toString();
   //前端傳過來的回調函數(shù)名稱
   String callback = request.getParameter("callback");
   //用回調函數(shù)名稱包裹返回數(shù)據(jù)，這樣，返回數(shù)據(jù)就作為回調函數(shù)的參數(shù)傳回去了
   result = callback + "(" + result + ")";
   response.getWriter().write(result);
 }
屏幕快照 2018-07-25 下午10.59.59.png

三、jquery如何發(fā)起jsonp

1）服務端代碼不變，js代碼配置一個dataType:'jsonp'，就可以發(fā)起一個跨域請求，jsonp指定服務器返回的數(shù)據(jù)類型為jsonp格式，可以看到發(fā)起的請求路徑，自動帶了一個callback=xxx，xxx是jquery隨機生成的一個回調函數(shù)名稱，這里的success就跟上面的showData一樣，如果有success函數(shù)則默認success()作為回調函數(shù)。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
  <head>
     <title>跨域測試</title>
     <script src="js/jquery-1.7.2.js"></script>
     <script>
        $(document).ready(function () {
          $("#btn").click(function () { 
             $.ajax({
                url: "http://localhost:9090/student",
                type: "GET",
                dataType: "jsonp", //指定服務器返回的數(shù)據(jù)類型
                success: function (data) {
                   var result = JSON.stringify(data); //json對象轉成字符串
                   $("#text").val(result);
                  }
               });
            });
         });
    </script>
  </head>
 <body>
    <input id="btn" type="button" value="跨域獲取數(shù)據(jù)" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
 </body>
 </html>
屏幕快照 2018-07-25 下午11.00.12.png

2）指定特定的回調函數(shù)名稱

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
  <head>
    <title>跨域測試</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
       function showData (data) {
          console.info("調用showData"); 
          var result = JSON.stringify(data);
          $("#text").val(result);
       }
       $(document).ready(function () {
          $("#btn").click(function () { 
             $.ajax({
                url: "http://localhost:9090/student",
                type: "GET",
                dataType: "jsonp",  //指定服務器返回的數(shù)據(jù)類型
                jsonpCallback: "showData",  //指定回調函數(shù)名稱
                success: function (data) {
                  console.info("調用success");
                }
            });
          }); 
       });
     </script>
 </head>
 <body>
     <input id="btn" type="button" value="跨域獲取數(shù)據(jù)" />
     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
 </body>
 </html>

??????請求時帶的參數(shù)是：callback=showData；調用回調函數(shù)的時候，先調用了指定的showData，然后再調用了success，所以，success是返回成功后必定會調用的函數(shù)。


屏幕快照 2018-07-25 下午11.53.06.png

3）改變callback這個名稱

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
  <head>
    <title>跨域測試</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script> 
       function showData (data) {
           console.info("調用showData"); 
           var result = JSON.stringify(data);
           $("#text").val(result);
        }
        $(document).ready(function () {
           $("#btn").click(function () {
              $.ajax({
                 url: "http://localhost:9090/student",
                 type: "GET",
                 dataType: "jsonp",  //指定服務器返回的數(shù)據(jù)類型
                 jsonp: "theFunction",   //指定參數(shù)名稱
                 jsonpCallback: "showData",  //指定回調函數(shù)名稱
                 success: function (data) {
                 console.info("調用success");
                }
             });
          });
      });
   </script>
 </head>
 <body>
     <input id="btn" type="button" value="跨域獲取數(shù)據(jù)" />
     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
 </body>
 </html>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   response.setCharacterEncoding("UTF-8");
   response.setContentType("text/html;charset=UTF-8");
   //數(shù)據(jù)
   List<Student> studentList = getStudentList();
   JSONArray jsonArray = JSONArray.fromObject(studentList);
   String result = jsonArray.toString(); 
   //前端傳過來的回調函數(shù)名稱
   String callback = request.getParameter("theFunction");
   //用回調函數(shù)名稱包裹返回數(shù)據(jù)，這樣，返回數(shù)據(jù)就作為回調函數(shù)的參數(shù)傳回去了
   result = callback + "(" + result + ")";
   response.getWriter().write(result);
 }

???????jsonp方式不支持POST方式跨域請求，就算指定成POST方式，也會自動轉為GET方式；而后端如果設置成POST方式了，那就請求不了了，jsonp的實現(xiàn)方式其實和<script>腳本請求地址的方式一樣，只是ajax的jsonp對其做了封裝，所以可想而知，jsonp是不支持POST方式的。


屏幕快照 2018-07-25 下午11.53.38.png

4）服務器端設置
??????有時候其它地方都沒問題，結果服務端拒絕跨域訪問，如果出現(xiàn)這個錯誤，就需要在服務端設置允許跨域請求。

response.setHeader("Access-Control-Allow-Origin", "*"); //設置允許任何域名跨域訪問

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8"); 
    // * 表示允許任何域名跨域訪問
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 指定特定域名可以訪問
    response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");
     //數(shù)據(jù)
    List<Student> studentList = getStudentList();
    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();
    //前端傳過來的回調函數(shù)名稱
    String callback = request.getParameter("callback");
    //用回調函數(shù)名稱包裹返回數(shù)據(jù)，這樣，返回數(shù)據(jù)就作為回調函數(shù)的參數(shù)傳回去了
    result = callback + "(" + result + ")";
    response.getWriter().write(result);
 }

四、vue如何跨域

1）vue-resouce有jsonp方法，而axios不提供jsonp方法
2）axios跨域方法請參考axios跨域學習總結

本文參考鏈接：http://www.cnblogs.com/chiangchou/

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

相關閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 28,880評論 1贊 45
  • JavaScript是一種在Web開發(fā)中經(jīng)常使用的前端動態(tài)腳本技術。在JavaScript中，有一個很重要的...
    西瓜w閱讀 1,931評論 0贊 1
  • 一：什么是同源策略 同源策略是瀏覽器上為安全性考慮實施的非常重要的安全策略。 同源：URL由協(xié)議、域名、端口和路徑...
    南方小小姑娘閱讀 886評論 0贊 1
  • 第一章 入門 基本功能：訪問和操作 dom 元素，控制頁面樣式，對頁面的事件處理，與ajax完美結合，有豐富的插件...
    X_Arts閱讀 1,155評論 0贊 2
  • 【陽光男孩 張文哲 3月30日 星期五 晴 堅持原創(chuàng)分享第152天】 冬天大雪紛飛，雪花像鵝毛一樣飄落下來...
    張文哲閱讀 523評論 7贊 2

友情鏈接更多精彩內容