Jsonp请求的原理实现_jsonp 请求-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40677590/article/details/109446861

jsonp解决ajax的跨域原理

jsonp只能解决ajax类型的get跨域请求
jsonp并不是ajax情况，而是一般的get请求，并且在后端动态拼接一个函数调用，在前端执行该函数

实现原理

浏览器端：设置我们需要的script标签和请求的回调函数的执行体，并把函数名传到后端做进一步处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript">
           //定义了一个名叫testData的函数
    var  testData= function(data){
        alert('得到的jsonp请求的结果是:',data);
    };
    var url = "xxxxx?&callback=testData";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>
</head>
<body>
 
</body>
</html>

服务器端：服务器端其实是一个js文件，获取到前端传来的callback函数名，并把数据需要返回的数据传入

testData({
"name":'looper',
"city":'sichuan'
});

实现：

当前端获取到定义好执行函数之后，去访问后端的js文件，该js文件里有一个函数的执行，其实就是你本地定义好的回调函数的执行函数，参数就是需要传入到前端的数据，所以就可以拿到我们需要的数据，利用的是回调函数的执行

再举一个简单的例子

远程服务器test.com根目录下有个test.js文件代码如下：

localJosnpTest({"result":"我是一个测试数据"});

然后我们前端有个页面去请求该js文件


<head>
    <script type="text/javascript">
    var localHandler = function(data){
        alert('jsonp跨域请求的结果：' + 
        data.result);//我是一个测试数据
    };
    </script>
    <script type="text/javascript" src="http://test.com/test.js"></script>
</head>
<body>
 
</body>
</html>

jsonp的npm包：npm i jsonp -S

地址：点击这里

最后这里针对ajax与jsonp的异同再做一些补充说明：

ajax和jsonp这两种技术在调用方式上”看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。
但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加，前端回调函数执行获取数据。
仅仅用于get请求。