JQuery 中的JSONP

对于JSONP不太熟悉的可以先看这一篇文章 https://blog.csdn.net/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标签来实现请求的发送

猜你喜欢