利用原生js实现ajax跨域请求数据

最新推荐文章于 2021-04-15 09:12:55 发布

原创最新推荐文章于 2021-04-15 09:12:55 发布 · 625 阅读

0 ·

CC 4.0 BY-SA版权

ajax 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了一种解决跨域问题的方法：JSONP。通过HTML页面的JavaScript代码发起JSONP请求，并在PHP后端响应中处理回调函数，实现跨域数据获取。文章深入解析了JSONP的工作原理，包括如何动态创建script标签以及如何处理返回的数据。

首先，页面中不需要引入任何的文件。

1、前台html页面

<script>
    //定义一个ajax
    var $ = {
      ajax:function(option){
        var url = option.url;
        var callback = option.callback;
        var dataType = option.dataType;
        //判断数据类型是不是jsonp格式，如果是的话，就动态创建一对script标签。
        if(dataType == "jsonp"){
          var script = document.createElement("script");
          script.src=url+"?callback="+callback;
          document.body.appendChild(script);
        }
      }
    };
    //调用ajax
    $.ajax({
      type:"get",
      url:"http://demo.com/demo1.php",
      callback:"test",
      dataType:"jsonp"
    });
  </script>
  <script>
    function test(data){
      console.log(data);
    }
  </script>

2、后台页面

<?php
    $callback = $_GET["callback"];
    //读取demo2.json文件中的数据
    $data = file_get_contents("demo2.json");
    // 返回的数据最终只能是字符串
    echo $callback.'('.$data.')';
?>