jsonp，ajax，json問題

時間 2019-11-25

標籤 jsonp ajax json 問題欄目 JSON 简体版

原文原文鏈接

JSONP技術

JSONP是解決跨域問題的一種常見方式css

跨域問題，由於瀏覽器有同源策略，因此當不一樣域間進行數據交互的時候就會出現跨域問題html

同源策略：只有在同協議、同域名、同端口的狀況下才能進去數據交互前端

JSONP的原理：能夠利用script標籤（會使用回調函數來接收數據）的src屬性不受同源策略的影響，能夠請求到不一樣域的數據，經過設置回調函數來接收數據web

JSONP是先後端結合的跨域方式：由於前端請求到數據後須要在回調函數中使用，因此後端得將數據放回到回調函數中ajax

JSONP屬於AJAX嗎？json

ajax是指經過使用xmlhttprequest對象進行異步數據交互的技術，JSONP是依靠script標籤的src屬性來獲取的，不屬於ajaxbootstrap

JSONP有什麼缺點，使用的時候須要注意什麼？後端

1.只能get處理，不能post跨域處理問題
2.須要注意的是：每次請求應該動態的建立script標籤和回調函數，數據獲取完成後銷燬。跨域

若是method是jsonp的話，就能夠用jsonp去跨域請求，可是注意要在url後寫關於callback的值爲JSON_CALLBACK瀏覽器

百度搜索小例子

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>
    <div ng-controller="yourController">
        <input type="text" ng-change="search()" ng-model="wd">
        <ul>
            <li ng-repeat="word in dataList"><a href="https://www.baidu.com/s?ie=utf-8&wd={{word}}">{{word}}</a></li>
        </ul>
    </div>
    <script src="./base/angular.min.js"></script>
    <script src="./base/angular-sanitize.js"></script>
    <script>
        var app = angular.module("myapp", ['ngSanitize'])
        app.controller("yourController", function($scope, $http) {
            $scope.search = function() {
                $http({
                    url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                    method: "jsonp",
                    params: {
                        wd: $scope.wd,
                        cb: 'JSON_CALLBACK'
                    }
                }).success(function(results) {
                    $scope.dataList = results.s
                })
            }
        })
    </script>
</body>

</html>