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>

AJAX

ajax是指经过使用xmlhttprequest对象进行异步数据交互的技术，实现无刷新状态更新页面和异步提交

ajax实现过程：

建立xmlhttprequest对象
建立一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
设置向响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新

优势：

不须要插件支持
用户体验极佳
提高web程序性能
减轻服务器和宽带的负担

缺点：

前进后提按钮被破坏
搜索引擎的支持不够
开发调试工具缺少

JSON

JSON和XML同样也是一种简单文本格式。是一种比较流行的标准格式，是数据的载体，相对于XML。JSON更加易读、更便于肉眼检查。在语法的层面上，JSON与其余格式的区别是在于分隔数据的字符，JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号

优势：

做为一种数据传输格式，JSON与XML很类似，可是它更加灵巧。
JSON不须要从服务器端发送含有特定内容类型的首部信息

缺点：

语法过于严谨
代码不易读
eval函数存在风险