jsonp跨域

JSONP的跨域方式：

同源策略限制了对非同源地址发送ajax请求

JSONP与ajax无关，而是借助script标签对非同源地址进行请求

步骤:

1.设置script标签
2.将接口地址设置在script标签的src属性中script接收的所有文字内容都会被自动当作js代码执行服务器中会响应某个名称的函数调用形式
3.在src的接口地址后，以get请求参数形式，手动设置callback的参数callback的值为本次设置的处理函数名称
4.在script之前，设置对应名称的处理函数并且设置形参，接收服务器真正响应的数据
5.根据需求使用响应的数据即可

<script>
    function success(res) {
      console.log(res);    注：不能写在后面
      console.log(res.data);
    }
  </script>
  <script src="接口/?callback=success&name=jack&age=18"></script>

JQuery发送jsonp请求方式：

注：JSONP和ajax没有任何关联

JQuery为了方便操作，将jsonp的设置方式直接放在$.ajax()中

$.ajax({
    type:'get',
    url:'接口',
    data:{
        name:'jack',
        age:18
    },
     // 设置dataType: 'jsonp'表示本次请求采用jsonp方式发送
      // 通过调试工具看到，本次请求的type为script，确定是jsonp请求
      // 页面中没有用于发送jsonp的script，是因为jQuery在使用完毕后进行了删除操作
    dataType:'jsonp',
    success:function(res){
        console.log(res);
    }
});

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。