原生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;                                   

结果：

　　

方法二：

　　实现步骤：　

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

 　　　　　　 <script src="http://127.0.0.1/json.php">< /script>

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

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

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

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

  　　   三、前台接收到返回的回调函数，将直接在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})";

结果：

方法三：

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

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

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

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

       三、后台返回之后，前台就可使用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})";

结果：

Web前端工程师，关于数据交互这一块，会用到的地方不少；这是大神“影子”的文章，我是无耻的搬运过来的，若有侵权，请联系本人删除；下面附上“影子”的博客原文连接：https://www.cnblogs.com/2502778498spw/p/7784390.html