Ajax之跨域訪問與JSONP

時間 2019-12-14

標籤 ajax 訪問 jsonp 欄目 Ajax 简体版

原文原文鏈接

前言

　　同源策略的限制，使得ajax沒法發出跨域請求。在許多狀況下，咱們須要讓ajax支持跨域。如下是其中一種解決方案（JSONP）。JSONP解決了跨域數據訪問的問題。javascript

　　在html中，具備src屬性的標籤支持跨域，例如<script>、<img>。php

　　其中，<script>特別適合解決ajax跨域問題。首先當咱們經過src引入js文件時，便會對其中的js代碼進行執行。咱們知道json是文本，js也是文本，那咱們就把json假裝成js。也就是將請求地址放入到<script>標籤的src中，那怎麼樣將json假裝成js，且可以在瀏覽器獲取json數據呢？css

　　答案就是經過調用方法，將json假裝成調用方法的語句，其中真正的json數據做爲該方法的參數，當經過script標籤引入這些文本時，就至關於執行了這個方法。而在前端，咱們只須要編寫對應的方法，而從服務器發過來的script腳本將會執行該方法而且傳入真正的json數據。這樣，就能夠輕鬆實現跨域訪問了。如下爲大概流程圖（醜）：html

實現

使用javascript與php簡單實現以下：

前端代碼：前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
</head>
<body>
<script>
    ajax("http://localhost/province/json.php");
    function ajax(url) {
        var script = document.createElement("script");
        script.src = url + "?jsonp=callback";
        document.getElementsByTagName("head")[0].append(script);
    }
　　// 編寫回調函數
    function callback(data) {
        alert(data.msg);
    }
</script>
</body>
</html>

後端代碼：java

<?php
header("Content-Type", "application/json");
$fun = $_REQUEST["jsonp"]; // 獲取調用的方法名
echo "$fun({'msg': 'jsonp'});";

使用jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
</head>
<body>
<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
    $.ajax({
        url: "http://localhost/province/json.php",
        type: "get",
        data: {},
        dataType: "jsonp",
        jsonp: "jsonp",
        success: function (data) {
            alert(data.msg);
        },
        error: function () {//...}
    });
</script>
</body>
</html>

　　使用jquery提供的$.ajax能夠快速實現跨域請求。首先設置dataType爲"jsonp"，表示使用jsonp。參數jsonp是傳遞將被調用函數名，服務器經過使用該屬性的值來得到函數名。使用jquery後也不須要本身寫調用函數了，它將由jquery自動生成，正在的json數據將經過success屬性回調自定義函數進行傳遞。jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。