4-1使用jsonp解决跨域

1、通过静态的script标签的src属性进行跨域请求

image.png

静态script标签跨域 
1、默认情况下是同步加载，在script标签里写async属性表示异步加载资源
2、如果是异步加载得不到数据的，因为当访问要返回的数据时，请求还不一定加载完成(所以会报错)，只能使用同步
3、 这种方式存在的两个主要的问题：
    1、必须保证加载的顺序
    2、不方便通过程序传递参数 --> 只能传固定的-->src="http://hq.com/myJson1.php?name=hq&password=123



<script type="text/javascript" src="http://hq.com/myJson1.php">
  如果服务端返回了 “var i = 10;”
  就相当于在这里有一句： var i = 10;  -->所以下面的script标签可以访问变量 i
</script>
<script type="text/javascript">
  console.log(i);
</script>

2、通过动态的script标签的src属性进行跨域请求

动态创建script标签发出去的请求默认是异步请求,而且不能修改为同步
1.不必在乎顺序问题，因为函数有预解析
2.也方便传递参数，可以通过变量来动态设置，不跟静态一样只能传固定的值

<script type="text/javascript">
    
    -----动态创建script标签
    var script = document.createElement('script');
    script.src = 'http://hq.com/myJson2.php';
    var head = document.getElementsByTagName('head')[0];
    -----将创建好的script标签放在head中
    head.appendChild(script);   

     -----------------------错误方式
    动态创建script标签发出去的请求默认是异步请求,而且不能修改为同步
    console.log(num);  -->所以这里会报错，因为当执行到这里时，服务器还来不及返回数据
     -----------------------

    ------正确
    使用函数，通过服务端返回的数据（也就是一个函数调用，在这里服务端返回的是fn(123)）来调用
    function fn(data) {
        console.log(data);
    }

    使用动态创建script标签
    1.不必在乎顺序问题，因为函数有预解析
    2.也方便传递参数，可以通过变量来动态设置，不跟静态一样只能传固定的值
    
    注意：这种方式也有种弊端，就是我们所写的函数名需要迎合后端的返回的函数名。不过我们可以在url地址后面传参数，然后让后台获取我们传入的参数值作为方法名
    例如：script.src = 'http://hq.com/myJson2.php?callback=fn';
    其中fn就是我们指定的函数名，后台可以使用   GET_['callback']获取

这就是jsonp的本质：动态创建script标签，然后通过它的src属性发送跨域请求，然后服务器端响应的数据格式为【函数调用（foo(实参)）】，所以在发送请求之前必须先声明一个函数，并且函数的名字与参数中传递的名字要一致。这里声明的函数是由服务器响应的内容（实际就是一段js代码-函数调用）来调用
    
注意：jsonp并不是ajax，不过jquery中把jsonp封装到了ajax方法中，这点需要明确
</script>
</head>

最后编辑于：2019.05.13 10:12:24