碼上快樂

相關內容    簡體    繁體

Python學習---JSONP學習180130

本文轉載自   查看原文   2018-08-01 22:06   1451    Jsonp/ Python

同源策略機制

     同源：協議://IP:端口【協議，域名，端口相同】

     跨域：知道對方接口，同時對方返回的數據也必須是Jsonp格式的

問題描述：Ajax跨域請求數據的時候，實際瀏覽器已經拿到數據，但是瀏覽器由於同源策略隱藏了這些內容,不給我們看這些數據。換言之，Ajax不能跨域請求數據。

問題解決：<script src="">

           有src屬性的標簽都可以跨域請求數據，這也就是為什么img我們可以引用別的網站的圖片

 

JSONP的原型：創建一個回調函數，然后在遠程服務上調用這個函數並且將JSON 數據形式作為參數傳遞，完成回調。

JSONP一定是GET請求

JSONP就是用來跨域的，沒有用XmlHttpRequest對象和Ajax來發送請求，是一個偽造的請求。

JSONP的本質就是動態的創建script標簽，然后吧請求的url放入到自己的src標簽里面【你請求的URL就是他的src】,拿到數據后[本地的函數接收並處理]最后動態的刪除掉。再次發送則再次創建script標簽

<script src=''127.0.0.1:8080/XXX.do''>

例如接收的數據是： li([1,2,3,4,5])     --->這里返回的數據li是個函數

function li(data){   // 本地函數

console.log(data)

}

JSONP的約定： 用函數名括起來加上數據   函數名([數據])

 

Jsonp自己實現JSONP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="button" onclick="jsonpRequest();" value="跨域請求jsonp">
</body>
    <script>
        tag = null;
        function jsonpRequest() {
            tag = document.createElement('script');
            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
            document.head.appendChild(tag);  // 添加script到head里面
        }
        // 接收返回的JSONP的數據
        function list(data) {
            console.log(data);
            document.head.removeChild(tag);
        }
    </script>
</html>

　　

 

Jsonp實例一: 利用script標簽的src屬性

padding: 就是函數，將數據放在在函數內，然后打包發送給前台、

缺點：前台script里必須要有一個函數，處理一個寫一個函數，因為本質是利用函數接收參數

         正確應該動態添加script標簽和內容

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 設置templates的路徑為Django以前版本
# 'DIRS': [],      # 注釋掉該行，此為Django 2.0.1最新版本
# 'django.middleware.csrf.CsrfViewMiddleware',
         ...省略默認配置
STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 現添加的配置,這里是元組，注意逗號

templates/ajax_jquery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<script src="/static/jquery-3.2.1.js"></script>
<script>
    function test(data) {
        console.log(data)
    }
</script>
{#跨站請求內容#}
<script src="http://127.0.0.1:8081/jquery_ajax_test/"></script>
</html>

mysite2/urls.py

from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
      # Jquery_Ajax
  url(r'ajax-jquery/', views.ajax_jquery),
  # jquery_ajax_test
  url(r'jquery_ajax_test/', views.jquery_ajax_test),
]

views.py

from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
    return render(request, 'ajax_jquery.html')
# Jquery --> ajax
import json
def jquery_ajax_test(request):
    print('request.POST', request.POST)
    # return HttpResponse('hello')   # 錯誤,此時跨域返回給scrip標簽一個未定義的hello變量
     # return HttpResponse('var hello')   # 正確,此時跨域返回給scrip標簽一個定義但沒有內容的hello變量
    return HttpResponse('test("hello")')

頁面顯示：

image

image

動態的創建script的JSonp實例：

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 設置templates的路徑為Django以前版本
# 'DIRS': [],      # 注釋掉該行，此為Django 2.0.1最新版本
# 'django.middleware.csrf.CsrfViewMiddleware',
         ...省略默認配置
STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 現添加的配置,這里是元組，注意逗號

templates/ajax_jquery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button onclick="f()">submit</button>
</body>
<script src="/static/jquery-3.2.1.js"></script>
{#動態跨站請求內容#}
<script>
    function addScriptTag(src){
     var script = document.createElement('script');
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
        {# document.body.removeChild(script); #}
    }
    function SayHi(arg){
         alert("Hello " + arg)
    }
    function f(){
         addScriptTag("http://127.0.0.1:8081/jquery_ajax_test/?callback=SayHi")
    }
</script>
</html>

mysite2/urls.py

from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
      # Jquery_Ajax
  url(r'ajax-jquery/', views.ajax_jquery),
  # jquery_ajax_test
  url(r'jquery_ajax_test/', views.jquery_ajax_test),
]

views.py

from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
    return render(request, 'ajax_jquery.html')
# Jquery --> ajax
def jquery_ajax_test(request):
    print('request.GET', request.GET)
    func = request.GET.get('callbacks', None)
    print('func;', func)
    return HttpResponse("%s('world')" % func)

頁面顯示：

image

注意：

這里運行了2個環境： python manage.py runserver 8081

項目本身是：http://127.0.0.1:8080/ajax-jquery/

jQuery對JSONP的實現

 

1. 使用Jquery定義的回調函數名：

$.getJSON("http://127.0.0.1:8081/jquery_ajax_test?callback=?",function(arg){
    console.log("successfully, hello " + arg)
});

注意的是在url的后面必須添加一個callback參數，這樣getJSON方法才會知道是用JSONP方式去訪問服務，callback后面的那個問號是內部自動生成的一個回調函數名。

  2.  使用自定義的函數名：

形式一： 自定義函數 + 調用指定函數 【不推薦】
function SayHi() {
      ...
}
$.ajax({
    url:"http://127.0.0.1:8002/get_byjsonp",
    dataType:"jsonp",  # 要求服務器返回一個JSONP格式的數據，一個函數套着一個數據形式，否則返回原類型
    jsonp: 'callback',
    jsonpCallback:"SayHi"
});
注意：jsonp: 'callback' + jsonpCallback:"SayHi"  --拼湊一個鍵值對發送過去---->  'callback':'SayHi'

形式二：自定義函數 + 不用指定函數名  【推薦】
$.ajax({
    url:"http://127.0.0.1:8002/get_byjsonp",
    dataType:"jsonp",            //必須有，告訴server，這次訪問要的是一個jsonp的結果。
    jsonp: 'callback',          //jQuery幫助隨機生成的：callback="wner"
    success:function(data){  # 接收后台傳遞過來的data數據即可
        alert(data) 
    }
});

getJSON之使用JQuery定義的函數名--實例

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 設置templates的路徑為Django以前版本
# 'DIRS': [],      # 注釋掉該行，此為Django 2.0.1最新版本
# 'django.middleware.csrf.CsrfViewMiddleware',
         ...省略默認配置
STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 現添加的配置,這里是元組，注意逗號

templates/ajax_jquery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="f()">submit</button>
</body>
<script src="/static/jquery-3.2.1.js"></script>
{# jQuery對JSONP的實現#}
<script type="text/javascript">
   function f() { 
   $.getJSON("http://127.0.0.1:8081/jquery_ajax_test?callback=?",function(arg){
        console.log("successfully, hello " + arg)
    });
}
</script>
</html>

mysite2/urls.py

from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
      # Jquery_Ajax
  url(r'ajax-jquery/', views.ajax_jquery),
  # jquery_ajax_test
  url(r'jquery_ajax_test/', views.jquery_ajax_test),
]

views.py

from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
    return render(request, 'ajax_jquery.html')
# Jquery --> ajax
def jquery_ajax_test(request):
    print('request.GET', request.GET)
    func = request.GET.get('callback', None)
    print('func;', func)
    return HttpResponse("%s('world 2020')" % func)

頁面顯示：

image

getJSON之使用自定義的函數名--實例：

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 設置templates的路徑為Django以前版本
# 'DIRS': [],      # 注釋掉該行，此為Django 2.0.1最新版本
# 'django.middleware.csrf.CsrfViewMiddleware',
         ...省略默認配置
STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 現添加的配置,這里是元組，注意逗號

templates/ajax_jquery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="f()">submit</button>
</body>
<script src="/static/jquery-3.2.1.js"></script>
{# jQuery對JSONP的實現#}
<script type="text/javascript">
    $.getJSON("http://127.0.0.1:8081/jquery_ajax_test?callback=?",function(arg){
        console.log("successfully, hello " + arg)
    });
</script>
</html>

mysite2/urls.py

from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
      # Jquery_Ajax
  url(r'ajax-jquery/', views.ajax_jquery),
  # jquery_ajax_test
  url(r'jquery_ajax_test/', views.jquery_ajax_test),
]

views.py

from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
    return render(request, 'ajax_jquery.html')
# Jquery --> ajax
def jquery_ajax_test(request):
    print('request.GET', request.GET)
    func = request.GET.get('callback', None)
    print('func;', func)
    return HttpResponse("%s('world 2020')" % func)

頁面顯示：

image

.ajax 跨域請求之指定函數

settigs.py：

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 設置templates的路徑為Django以前版本
# 'DIRS': [],      # 注釋掉該行，此為Django 2.0.1最新版本
# 'django.middleware.csrf.CsrfViewMiddleware',
         ...省略默認配置
STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(BASE_DIR,  'templates'),)  # 原配置
# 靜態資源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),)   # 現添加的配置,這里是元組，注意逗號

templates/ajax_jquery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="f()">submit</button>
</body>
<script src="/static/jquery-3.2.1.js"></script>
{# jQuery對JSONP的實現#}
<script type="text/javascript">
    function SayHi() {
        console.log("hello, json")
    }
    function f() {
        $.ajax({
        url:"http://127.0.0.1:8081/jquery_ajax_test",
        dataType:"jsonp",
        jsonp: 'callback',
        jsonpCallback:"SayHi"
   });
}
</script>
</html>

mysite2/urls.py

from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
      # Jquery_Ajax
  url(r'ajax-jquery/', views.ajax_jquery),
  # jquery_ajax_test
  url(r'jquery_ajax_test/', views.jquery_ajax_test),
]

views.py

from django.shortcuts import render, HttpResponse
# Jquery --> ajax
def ajax_jquery(request):
    return render(request, 'ajax_jquery.html')
# Jquery --> ajax
def jquery_ajax_test(request):
    print('request.GET', request.GET)
    func = request.GET.get('callback', None)
    return HttpResponse("%s('world 2020')" % func)   # func為[]，因為根本不需要調用，前台已定義好

頁面顯示：

image


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 從 AJAX 到 JSONP的基礎學習 JSONP jsonp jsonp跨域請求學習筆記 Python自動化之跨域訪問jsonp jsonp詳解 jsonp詳解 JSON 與 JSONP jsonp請求 JSONP劫持
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM