JSONP如何使用(原生js以及Jquery方法)

因为ajax的跨域问题,导致在进行跨域操作时,数据无法接收,从而产生了这个不正规但好用的JOSNP技术。
ajax存在跨域问题,但纵观前端技术中,发现我们可以通过src去引用cdn的js,可以通过src去引用网上的某个图片。
那么,我们能通过src去引用js并执行js中的内容吗。答案是肯定的

HTML

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>JSONP的应用JS例子</title>
</head>
<body>
<script>
   var test = function(data){
       alert(data.name+data.age);//获取数据后的逻辑处理
   }
   var url = "http://localhost:63342/test/test.js"; //设置该js文件的url地址
   var script = document.createElement("script"); //创建script标签
   script.src = url; //设置script标签的src地址为设置的要跨域的js地址
   document.getElementsByTagName('head')[0].appendChild(script);  //将该script标签插入head标签内
</script>
</body>
</html>

JavaScript

/*
如在上面js中创建的函数名为test();
如此一来,当调用成功后则执行该函数,并处理数据。
则在下方使用test({//要传输的数据});
如:
  test({name:"张三",age:18,sex:"男"});
*/
test({name:"张三",age:18,sex:"男"});

如此以来,便可以通过src的方式进行跨域获取数据。

那么jquery的方式又该如何去使用呢?
尽管jsonp和ajax没有任何关联,但因为jsonp通过前端的方式解决了ajax的跨域问题,所以Jquery将jsonp和ajax封装在了一起

HTML

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>JSONP的应用JQUERY例子</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script>
    $(function(){
        $.ajax({
            url:"http://localhost:63342/test/test.js",
            type:"get",
            dataType:"jsonp",//设置请求格式为jsonp
            jsonp: "callback",//设置方式为callback回调
            jsonpCallback:"test",//设置回调函数的名称,和要请求的js中函数名称一致
            success:function(data){//Jquery直接将结果在success中写出,不需要和原生js一样去自己定义回调函数
                alert(data.name+data.age);
            }
        })
    });
</script>
</body>
</html>
/*
如在上面js中创建的函数名为test();
如此一来,当调用成功后则执行该函数,并处理数据。
则在下方使用test({//要传输的数据});
如:
  test({name:"张三",age:18,sex:"男"});
*/
test({name:"张三",age:18,sex:"男"});

通过以上方法,便可以使用jquery实现jquery的调用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容