AJAX跨域请求详解

最新推荐文章于 2022-01-23 20:42:59 发布

原创最新推荐文章于 2022-01-23 20:42:59 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

AJAX 专栏收录该内容

3 篇文章

订阅专栏

最近开始学习ajax，学习ajax必须得掌握的就是跨域请求，实际上在不同源的地址上发送请求就是跨域请求

域名地址的组成：
http:// www . google : 8080 / script/jquery.js

http:// （协议号）

www （子域名）

google （主域名）

8080 （端口号）

script/jquery.js （请求的地址）

当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。
不同的域之间相互请求资源，就叫“跨域”。

我们所了解的能够发送请求的有 img 、link、script 这些

##1 img

img可以发送不同源地址之间的请求，但是无法拿到响应结果；

##2 link

link可以发送不同源地址之间的请求，但是无法拿到响应结果或者说不能够处理；

##3 script

script可以发送不同源地址之间的请求，但是无法拿到响应结果，但是能借助于能够作为js执行能获取数据。

跨域请求解决办法----jsonp：

原理：通过script 标签请求一个服务器端的PHP文件，这个文件返回的结果是一段JS，作用是调用我们事先定义好的一个函数，从而将服务器端想要给客户端发过去的数据发送给客户端。具体实现如下：

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var script = document.createElement('script');
        script.src='http://test1.com/jsonp/server.php';
        document.body.appendChild(script);
        function aabb(res){
            console.log(res);
        }
    </script>
</body>
</html>

服务端：

<?php 
  $conn=mysqli_connect('127.0.0.1','root','root','demo1');

  $query=mysqli_query($conn,'select * from users');

  while ($row = mysqli_fetch_assoc($query)){
      $data[]=$row;
  }
  // header('Content-Type:application/json');
  // echo json_encode($data);
  // 如果客户端采用的是 script 标记对我发送的请求
  // 一定要返回一段 javascript

    header('Content-Type:application/json');
    $result=json_encode($data);
    echo "aabb({$result})";