【前端学习笔记】原生Javascript中通过JSONP(前端常用方法)进行跨域

最新推荐文章于 2024-07-13 12:26:55 发布

Reven_凯

最新推荐文章于 2024-07-13 12:26:55 发布

阅读量1.2k

点赞数

分类专栏：前端学习记录文章标签： javascript ajax 前端 jsonp

本文链接：https://blog.csdn.net/u014420383/article/details/47333485

版权

前端学习记录专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Ajax跨域—————————————————————————-

跨域: 跨域名

一个域名下的文件去请求了和他不一样的域名下的资源文件，那么就会产生跨域请求

这是ajax的跨域限制问题

跨域的解决 : jsonp: json width padding
核心: 
    1.script标签
    2.用script标签加载资源是没有跨域问题的
    3.script只认文件的实际内容，而不是后缀。只要内容是合法的js就能用
流程:
    1.在资源加载进来之前定义好一个函数，这个函数接受一个参数(要取的数据)
    ，而将要加载过来的文件里执行这个函数并将要取的数据作为参数来传递。

    2.在需要的时候，通过script标签加载对应远程文件资源，当远程资源被加载进来
    的时候，就会执行定义好的函数，并将要取的数据作为参数传递到当前文件。

原理拓展:
    动态地加载文件，例如点击以后才加载文件，就在点击事件里给body添加script标签
    然后让该sciprt的src为文件地址,用url后面的callback参数来控制调用方法的方法名。

实例：
以下代码需要在服务器环境下运行
布局代码

<body>
    <input type="button" value="加载数字" />
    <ul></ul>
    <input type="button" value="加载字母" />
    <ul></ul>
    <input type="button" value="加载数字" />
    <ul></ul>
</body>

JS代码

function fn0(data){
    var aUl = document.getElementsByTagName('ul');
    for(var i = 0; i < data.length; i++)
    {
        var oLi = document.createElement('li');
        oLi.innerHTML = data[i];
        aUl[0].appendChild(oLi);
    }

}
function fn1(data){
    var aUl = document.getElementsByTagName('ul');
    for(var i = 0; i < data.length; i++)
    {
        var oLi = document.createElement('li');
        oLi.innerHTML = data[i];
        aUl[1].appendChild(oLi);
    }

}
function fn2(data){
    var aUl = document.getElementsByTagName('ul');
    for(var i = 0; i < data.length; i++)
    {
        var oLi = document.createElement('li');
        oLi.innerHTML = data[i];
        aUl[2].appendChild(oLi);
    }

}
window.onload=function(){
    var aInput = document.getElementsByTagName('input');
    var aUl = document.getElementsByTagName('ul');
    for(var i=0;i<aInput.length;i++)
    {
        (function(i){
            aInput[i].onclick=function(){
                var oScript = document.createElement('script');
                oScript.src = 'data.php?t=num&callback=fn'+i;
                document.body.appendChild(oScript);
            }
        })(i);
    };

}

后端代码（php）

//data.php
<?php  

    $t = isset($_GET['t']) ? $_GET['t'] :'num';
    //前端告诉后端要输出哪个数据，这里是判断输出的数组是
    //$arr1还是$arr2
    $callback = isset($_GET['callback']) ? $_GET['callback'] :'fn0';
    //动态生成调用数据的方法，不必在后台写死，默认调用fn0

    //假设数据是两个不同数组
    $arr1 = array('111111','222222222','3333333333','44444444');
     $arr2 = array('aaaaaaaa','bbbbbbbb','ccccccccc','dddddddd');

    //按照前台的标志来判断返回的数据
     if($t == 'num'){

        $data = json_encode($arr1);
        echo $callback."(".$data.")";
    }
    else{
        $data = json_encode($arr2);
        echo $callback."(".$data.")";
    }