ajax jsonp其本质用原生js来处理跨域的数据（jsonp）

时间 2019-11-10

标签 ajax jsonp 本质原生处理数据栏目 Ajax 繁體版

原文原文链接

说明总结：javascript

1.ajax和jsonp其实本质上是不一样的东西。ajax的核心是经过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。php

2.可是ajax和jsonp在数据传输的过程当中都是能够用json格式的数据。css

3.其实ajax与jsonp的区别不在因而否跨域，ajax经过服务端代理同样能够实现跨域，jsonp自己也不排斥同域的数据的获取。html

4.ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也同样，都是请求一个url，而后把服务器返回的数据进行处理，所以jquery和ext等框架都把jsonp做为ajax的一种形式进行了封装；前端

服务器端代码：java

//获取客户端的信息
    if (isset($_GET['code'])) {
        if ($_GET['code'] == "CA1998") {
            $flightId = $_GET['code'];
            $price = 1000;
        }
        else if ($_GET['code'] == "CA1997") {
            $flightId = $_GET['code'];
            $price = 2000;
        }
        else{
            $flightId = 0;
            $price = 0;
        }
        $flightHandler = array('flightId'=>$flightId,'price'=>$price); 
        $flightHandler = json_encode($flightHandler);
        $flightHandler = "flightHandler(".$flightHandler .");";// 将数据进行了包装，包装成了一个调用的函数，这一步很重要。
        print_r($flightHandler);
    }

获取到的服务器数据：jquery

flightHandler({
    "flightId": "CA1998",
    "price": 20004
});
//其实就在服务器端把json数据包装成了一个js的函数，将一个对象做为参数放在函数里面。因此跟ajax用XMLHttpRequest接收数据是不同的。

传统ajax获取到的json数据：程序员

{
    "flightId": "CA1998",
    "price": 2000
}

客户端代码：ajax

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>XHR</title>
    <link rel="stylesheet" href="../templates/css/verify.css">
</head>
<body>
    <label for="flightId">输入：CA1998 或者 CA1997 </label> <input type="text" id="flightId" name="flightId"> <input type="button" value="原生js获取jsonp数据（php包装数据）" onclick="flightHandler0()"><input type="button" value="原生js获取jsonp数据（js包装数据）" onclick="flightHandler1()">
 <script type="text/javascript">

    // 获得航班信息查询结果后的回调函数
    function flightHandler(data){
        if (data.price != 0) {
             alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '航班 ' + data.flightId );
        } else{
            alert("EORROR");
        };
       
    };

    function flightHandler0(){
        var flightId = document.getElementById('flightId').value;
         //供jsonp服务的url地址（无论是什么类型的地址，最终生成的返回值都是一段javascript代码）
         //其实参数都是前端和后台程序员规定的，前端传过去，后端判断获取便可。
        var url = "flightResult.php?code=" + flightId +"&callback=flightHandler";
        // 建立script标签，设置其属性
        var script = document.createElement('script');
        script.setAttribute('src', url);
        // 把script标签加入head，此时调用开始
        document.getElementsByTagName('head')[0].appendChild(script); 
    };

    </script>
</body>
</html>

设想：json

上面的方法是在服务器端把json数据包装在回调函数里面，那能不能在客户端来作这个事情呢？可是试了一下感受行不通。

在服务器端把

$flightHandler = "flightHandler(".$flightHandler .");";

去掉。

留言中有用jquery写的jsonp的例子。

最后附上用原生js和jquery分别处理jsonp的例子：

js：http://snowinmay.net/ajax/xhr-js-jsonp.html

jsonp：http://snowinmay.net/ajax/xhr-jquery-jsonp.html

因此返回数据应该是json数据，可是在客户端好像没有很好的办法来包装这个数据。若是有的话之后再补充。

ajax jsonp其本质 用原生js来处理跨域的数据（jsonp）

ajax jsonp其本质用原生js来处理跨域的数据（jsonp）