jQuery实现跨域请求

Posted 2020-06-10

我们都知道，xhr(XMLHttpRequest)是不允许跨域的。而jQuery的ajax方法是基于xhr的，所以，直接使用它也是无法跨域的。一般的，我们是如下使用$.ajax方法的：

$.ajax({
　　type : "GET",
　　url : "the path of server",
　　dataType : "json",
　　success : function(res) {
   　　 //这里写获取相应数据的代码
　　}
});

我们这样调用的话，就是xhr请求。如果要实现跨域的话，就必须要使用动态脚本注入的技术。当然了，什么是动态脚本注入技术在这里我就不说了，有兴趣的可以自己去搜一下。jQuery已经帮我们封装好了jsonp的请求方法,我们直接调用它就行了，不必要知道他的底层是怎么实现的。jsonp请求的代码如下，只需要把dataType: "json"改成dataType: "jsonp"就行了：

$.ajax({
　　type : "GET",
　　url : "http://zhangzhanyu.nfreehost.com/jsonp.php",
　　dataType : "jsonp",
　　success : function(json) {
　　　　alert(json.msg);
　　}
});

但是，直接这样子还不行的，需要注意的是，跨域是要前端和后端配合才可以完成的。我们上面只是完成了前端的部分。因此,我们请求的php文件的代码要写成如下格式：

<?php
    $callback = $_GET[‘callback‘ ];
    echo "{$callback}({‘msg‘:‘this is a jquery jsonp test message!‘})";
?>

我们会发现，如果我们使用jsonp请求的话，会把一个名为callback的参数也传过来了，我们后台需要获取到这个参数值（事实他的值是一个函数名），然后再把需要返回到前端的数据放到这个callback里面当做参数就行了。

ps：由于做前端的本地不一定都有php环境，不方便测试。所以我把这个测试的php文件上传到了服务器，地址是http://zhangzhanyu.nfreehost.com/jsonp.php。需要测试的，可以直接把ajax方法里的url设置成这个地址就行了。