原生JS实现Ajax的跨域请求

Posted 2020-12-28 周十发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现Ajax的跨域请求相关的知识，希望对你有一定的参考价值。

原生JS如何实现Ajax的跨域请求？

在解决这个问题之前，我们务必先清楚为什么我们要跨域请求，以及在什么情况下会跨域请求。

了解一下：“同源策略”，你就知道了；

　　同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

　　它的定义是：

　　　　一段脚本向后台请求数据，只能读取属于同一协议名、同一主机名、同一端口号下的数据；

　　　　所以，请求不同协议名、不同端口号、不同主机名下面的文件时，

　　将会违背同源策略，无法请求成功，需要进行跨越处理!!

解决跨域请求的方法：

方法一：

　　通过后台的php进行设置

　　前台无需任何设置，在后台被请求的PHP文件中，写入一条header。

　　　　header("Access-Control-Allow-Origin:*");　　　　--- 表示允许哪些域名请求这个PHP文件，*表示所有域名都允许

JS代码：　　

$.post("http://127.0.0.1/json.php",function(data){
   console.log(data); 
});

注释：

　　其中，url为PHP文件的路径；

PHP代码：

<?php
        header("Content-Tyepe:text/html;charset=utf-8");
        header("Access-Control-Allow-Origin:*");
        $str = <<<str
        [
         {
            "name":    "影子",
            "age":    17,
            "hobby":    [
                    "吃",
                    "喝",
                    "玩",
                    "乐"
            ],
            "score":{
                    "math":78,
                    "chinese":89
            }
        },                  
]
str;
echo $str;

结果：

方法二：

　　实现步骤：　

　　　　1、原有src属性的标签子带跨域功能；所以可以使用script标签的src属性请求后台数据

　　　 2、用于src在加载数据成功后，会直接将加载的内容放到script标签中；

　　　　　　所以，后台直接返回JSON字符串将不能在script标签中解析。

　　　　　　因此，后台应该返回给前台一个回调函数名，并将JSON字符串作为参数传入。

　　　　　　　　后台PHP文件中返回： echo "callback({$json})";

　　 3、前台接收到返回的回调函数，将直接在script标签中调用。因此，需要声明这样一个回调函数，作为请求成功的回调

function callback(data){
 
    alert("请求成功!!");
 
    console.log(data);
 
}

JS代码：

<script type="text/javascript">
        function callback(data){
               console.log(data); 
        }
</script>
<script src="http://127.0.0.1/json.php"></script>

PHP文件：

<?php
    header("Content-Tyepe:text/html;charset=utf-8");
    $str = <<<str
    [
    {
        "name":"yingzi",
        "age":17,
        "hobby":[
            "吃",
            "喝",
            "玩",
            "乐"
        ],
    }
]
str;
echo "callback({$str})";

结果：

方法三：

　　 1、在ajax请求时，设置dataType为"jsonp"；

2、后台返回时，依然需要返回回调函数名，但是，ajax在发送请求时，会默认使用get请求将回调函数名发给后台，

　　　　后台$_GET[\'callback\'] 取出函数名：

　　　　　　--- echo "{$_GET[\'callback\']}({$str})";

3、后台返回以后，前台就可以使用ajax的success函数作为成功的回调

　　　　　　 --- success : function(data){}

JS代码：

<script type="text/javascript">
    $.ajax({
        type:"post",
        url:"http://127.0.0.1/json.php",
        dataType:"jsonp",
        success:function(data){
            console.log(data);
        }
    });
</script>

PHP文件：

<?php
    header("Content-Tyepe:text/html;charset=utf-8");
    $str = <<<str
    [
    {
        "name":"yingzi",
        "age":17,
        "hobby":[
            "吃",
            "喝",
            "玩",
            "乐"
        ],
    }
]
str;
echo "{$_GET[\'callback\']}({$str})";

结果：

当然，后台也可以随便返回一个函数名，前台只要请求成功，就会自动调用这个函数。类似第二条的②、③步，而不需要本方法的第③步

PHP返回： echo "callback({$str})";

JS代码： function callback(data){

　　　　　　　　console.log(data);

　　　　　　}

JS代码：

<script type="text/javascript">
    $.ajax({
        type:"post",
        url:"http://127.0.0.1/json.php",
        dataType:"jsonp",
    });
    function(data){
        console.log(data);
    }
</script>

PHP文件：

<?php
    header("Content-Tyepe:text/html;charset=utf-8");
    $str = <<<str
    [
    {
        "name":"yingzi",
        "age":17,
        "hobby":[
            "吃",
            "喝",
            "玩",
            "乐"
        ],
    }
]
str;
echo "callback({$str})";

结果：