AJAX 跨域方法

Posted 2021-04-15 一片生活枫叶

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放 由于在工作中需要使用AJAX请求其他域名下的请求，但是会出现拒绝访问的情况，这是因为基于安全的考虑，AJAX只能访问本地的资源，而不能跨域访问。

比如说你的网站域名是aaa.com，想要通过AJAX请求bbb.com域名中的内容，浏览器就会认为是不安全的，所以拒绝访问。

会出现跨域问题的几种情况：

后台在百度上寻找解决方案解决了这个问题，一共总结出三种方案：代理、JSONP、XHR2（XMLHttpRequest Level 2）。

XHR2（XMLHttpRequest Level 2）

01

html5提供的XMLHttpRequest Level 2已经实现了跨域访问以及其他的一些新功能

这需要在远程服务器端添加如下代码

header('Access-Control-Allow-Methods:POST,GET'); 

这样在客户端使用常规的AJAX代码即可。

JSONP

02

因为是当做一个js文件来引入的，所以http://example.com/data.php返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的:

最终那个页面输出的结果是:

所以通过http://example.com/data.php?callback=dosomething得到的js文件，就是我们之前定义的dosomething函数,并且它的参数就是我们需要的json数据，这样我们就跨域获得了我们需要的数据。

这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

知道jsonp跨域的原理后我们就可以用js动态生成script标签来进行跨域操作了，而不用特意的手动的书写那些script标签。如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。

原理是一样的，只不过我们不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

===================================================

一，传统的ajax方法

1，js代码

查看复制打印?

    $("#ajax").click(function(){  

     $.ajax({  

     type: "POST",  

     url: "http://manual.51yip.com/test2.php",  

     data: 'name=ajax',  

     dataType:"json",  

     success: function(data){  

     $('#Result').text(data.name);  

     }  

     });  

     });  

2，test2.php代码

查看复制打印?

    <?php  

    header("Access-Control-Allow-Origin:http://blog.51yip.com");    //允许blog.51yip.com提交访问  

    //header("Access-Control-Allow-Origin:*");    //允许任何访问  

    echo json_encode($_POST);  

=====================================================

二，ajax jsonp

1，js代码

    $("#jsonp").click(function(){  
     $.ajax({  
     url: 'http://manual.51yip.com/test1.php',  
     data: {name: 'jsonp'},  
     dataType: 'jsonp',  
     jsonp: 'callback',      //为服务端准备的参数  
     jsonpCallback: 'getdata',   //回调函数  
     success: function(){  
     alert("success");  
     }  
     });  
     });  
      
    function getdata(data){  
     $('#Result').text(data.name);  
    }  

2，test1.php

    <?php  
     if(isset($_GET['name']) && isset($_GET['callback']))   //callback根js端要对应，不然会报错的  
     {  
     echo $_GET['callback']. '(' . json_encode($_GET) . ');';   //格式固定的，为什么这样，不清楚  
     }  
    ?>  

========================================================

三，$.getJSON

    $("#getjson").click(function(){  
     $.getJSON('http://manual.51yip.com/test1.php?name=getjson&callback=?', function(data){  //没有回调函数，直接处理  
     $('#Result').text(data.name);  
     });  
    });  
========================================================

四，$.getScript
    $("#getscript").click(function(){  
     $.getScript('http://manual.51yip.com/test1.php?name=getscript&callback=getdata');  //回调函数根jsonp一样  
    });  

长按二维码识别关注