JQuery 中的JSONP

最新推荐文章于 2022-04-21 21:28:19 发布

原创最新推荐文章于 2022-04-21 21:28:19 发布 · 637 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery中的JSONP #jsonp实现

javascript 同时被 2 个专栏收录

10 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

这篇博客介绍了JSONP的基本概念，并通过实例展示了如何在jQuery中使用JSONP进行跨域请求。文章详细讲解了如何模拟jQuery封装JSONP，重点在于理解JSONP利用script标签的跨域特性，通过传递函数名给后台，后台返回的数据会调用该函数并传入参数。

对于JSONP不太熟悉的可以先看这一篇文章 https://blog.youkuaiyun.com/zero________________/article/details/80792394

熟悉jQuery的朋友应该知道，jQuery在AJAX中方法中封装了JSONP,然而我们试用只需设置 dayaTpe值为jsonp即可开启跨域访问

那么接下来我们也模拟jQuery封装一下JSONP

我也希望通过$.ajax的方式发送请求，当传入 dataType：jsonp 的时候，希望发送一个跨域请求

 var $ ={
            ajax:function(option){
                var url = option.url;
                var callback = option.callback;
                var dataType = option.dataType;
                // 当dataType为jsonp的时候我们需要发起一个跨域请求
                if(dataType == "jsonp"){
                    // 1.创建一个script标签
                    var script = document.createElement("script");
                    // 2.为script标签设置src属性，同时在src中传入之后需要挨靠的函数名称
                    script.src = url +"?callback="+callback;
                    // 3.将生成的script标签添加到页面结构中
                    document.body.appendChild(script);
                }
            }
        };

$.ajax({
            type:'get',
            url:'corss.php',
            callback:'test',
            dataType:"jsonp"
        });

以上便模仿jQuery中的jsonp 来实现了跨域。

注意：

1.jsonp主要是利用了script标签的天然的跨域特性来发送请求
2.jsonp实现方式：在发送请求的时候传递一个函数名称给后台，后台返回数据的时候会返回这个函数的调用形式，并且在()中拼接参数
3.ajax和jsonp的本质不一样。ajax的核心是通过XMLHttpRequest来发送请求，而jsonp是通过script标签来实现请求的发送