跨域请求

方法一：CORS 跨域资源共享

同源策略

多个页面的 协议，域名，端口 完全相同，则认为他们遵循了“同源策略”。
同源策略是一种安全机制。浏览器禁止通过脚本发起跨域请求，但是允许通过html标签属性跨域。

cors

允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS 跨域访问代码

cors.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跨域请求-CORS</title>
  </head>
  <body>
    <button>跨域请求-CORS</button>
    <h2></h2>
    <script>
      var btn = document.querySelector("button");
      btn.addEventListener(
        "click",
        function () {
          //创建Ajax对象
          var xhr = new XMLHttpRequest();
          //监听请求
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
              console.log(xhr.responseText);
              document.querySelector("h2").innerHTML = xhr.responseText;
            }
          };
          //初始化请求参数
          xhr.open("GET", "http://js.edu:90/0522/text.php", true);
          //发送请求
          xhr.send(null);
        },
        false
      );
    </script>
  </body>
</html>
text.php
<?php
header('Access-Control-Allow-Origin:http://php11.edu:90');
echo "这是通过CORS进行的跨域访问！";
flush();

CORS 跨域请求效果图

方法二：jsonp 跨域请求

jsonp.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跨域请求-JSONP</title>
  </head>
  <body>
    <button>跨域请求-JSONP</button>
    <script>
      //准备好回调处理函数
      function handle(jsonData) {
        console.log(jsonData);
        var data = JSON.parse(jsonData);
        console.log(data);
        //将接口返回的数据渲染到页面中
        var ul = document.createElement("ul");
        ul.innerHTML += "<li>" + data.title + "</li>";
        ul.innerHTML += "<li>姓名：" + data.user.name + "</li>";
        ul.innerHTML += "<li>邮箱：" + data.user.email + "</li>";
        document.body.appendChild(ul);
      }
      //点击按钮发起一个基于JSONP的跨域请求
      var btn = document.querySelector("button");
      btn.addEventListener(
        "click",
        function () {
          var script = document.createElement("script");
          script.src = "http://js.edu:90/0522/text2.php?jsonp=handle&id=3";
          document.head.appendChild(script);
        },
        false
      );
    </script>
  </body>
</html>
text2.php
<?php
header("content-type:text/html;charset:utf-8");
$callback=$_GET['jsonp'];
$id=$_GET['id'];
//模仿接口，根据查询条件返回不同的内容
$users=[
    '{"name":"admin","email":"admin@php.cn"}',
    '{"name":"peter","email":"peter@php.cn"}',
    '{"name":"mike","email":"mike@php.cn"}',
];
if (array_key_exists(($id-1),$users)){
    $user=$users[$id-1];
}
$json='{
    "title":"用户信息表",
    "user": '.$user. '
}';
echo $callback.'('.json_encode($json).')';

JSONP 跨域请求效果图

总结：

javascript 语法与 php 有相似之处，老师对比讲授便于发现异同，方便记忆。
跨域请求，除了img，a等标签可以实现外，利用CORS、JSONP可以实现脚本跨域。

跨域请求实战

跨域请求

方法一：CORS 跨域资源共享

CORS 跨域访问代码

方法二：jsonp 跨域请求

相关文章