CORS和JSONP两种方式实现跨域请求

学习总结

利用cors和jsonp可以实现跨域数据请求
这样就可以实现前端数据和后端数据库数据不在同一服务器上，如果后端数据比较庞大可以寄存在另一个专门用来存储数据的服务器上

1.1CORS实现跨域请求 php11.edu中的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>
    <h2>CORS跨域请求</h2>
    <div>
      <label for="stuName">姓名：</label>
      <span id="stuName"></span>
    </div>
    <div>
      <label for="stuAge">年龄：</label>
      <span id="stuAge"></span>
    </div>
    <div>
      <button onclick="getData()">通过CORS获取其它域数据</button>
    </div>
    <script>
      function getData() {
        var xml = new XMLHttpRequest();
        xml.onreadystatechange = function () {
          if (xml.readyState === 4 && xml.status === 200) {
            $data = JSON.parse(xml.responseText);
            console.log($data.name, $data.age);
            document.getElementById("stuName").innerHTML = $data.name;
            document.getElementById("stuAge").innerHTML = $data.age;
          }
        };
        //当前地址
        //http://php11.edu/0522/cors.html
        //跨域请求数据,需要在data.php文件中设置请求头
        xml.open("GET", "http://58city.com/data.php", true);
        //http://58city.com/data.php
        //data.php中设置请求头
        //如果使用post请求，需要设置下面一条
        // header("Content-Type:text/plain");
        //设置头部，不设置的话请求会被拒绝
        // header("Access-Control-Allow-Origin:http://php11.edu");
        xml.send(null);
      }
    </script>
  </body>
</html>

1.2 58city.com域中的文件 data.php


<?php
//http://58city.com/data.php
//如果使用post请求，需要设置下面一条
header("Content-Type:text/plain");
//设置头部，不设置的话请求会被拒绝
header("Access-Control-Allow-Origin:http://php11.edu");
$stu['name'] = 'angle';
$stu['age'] =32;
echo json_encode($stu);
?>

1.3 代码显示效果

2.1 JSONP实现跨域请求 php11.edu中的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>
    <h2>jsonP实现跨域请求</h2>
    <div>
      <label for="stuName">姓名：</label>
      <span id="stuName"></span>
    </div>
    <div>
      <label for="stuAge">年龄：</label>
      <span id="stuAge"></span>
    </div>
    <div>
      <button onclick="getData()">通过jsopP获取其它域数据</button>
    </div>
    <script>
      //jsonP回调函数
      //handle中的参数是一个对象，（参数已经解析json字符串为一个对象）
      function handle(jsonPData) {
        var $data = jsonPData;
        console.log($data.name, $data.age);
        document.getElementById("stuName").innerHTML = $data.name;
        document.getElementById("stuAge").innerHTML = $data.age;
      }
      //html头部动态创建一个script标签，通过src属性获取外部数据
      //scr = "http://58city.com/data2.php?jsonp=回调函数名";
      function getData() {
        var script = document.createElement("script");
        script.src = "http://58city.com/data2.php?jsonp=handle";
        document.head.appendChild(script);
        //http://58city.com/data2.php
        //data2中的数据
        // <?php
        // $stu['name'] = 'Eric';
        // $stu['age'] =6;
        // $jsonStr = json_encode($stu);
        // //handle是请求数据的回调函数名，参数是一个json字符串
        // echo "handle($jsonStr)";
        // ?>
      }
    </script>
  </body>
</html>

2.2 58city.com中的 data2.php


<?php
//http://58city.com/data2.php
$stu['name'] = 'Eric';
$stu['age'] =6;
$jsonStr = json_encode($stu);
//handle是请求数据的回调函数名，参数是一个json字符串
echo "handle($jsonStr)";
?>

2.3代码显示效果

3.1利用jsonp实现跨域提取数据 php11.edu中的showGoods.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品展示页</title>
    <link rel="stylesheet" href="showGoods.css" />
  </head>
  <body>
    <div class="show" id="show">
      <h2>商品展示页面</h2>
      <div>
        <span>编号</span><span>名称</span><span>价格</span><span>单位</span
        ><span>时间</span>
      </div>
    </div>
  </body>
  <script>
    //jsonP回调函数
    //handle中的参数是一个对象，（参数已经解析json字符串为一个对象）
    function handle(jsonPData) {
      //   //创建一个div标签
      //   var div = document.createElement("div");
      //   //添加到html中
      //   document.getElementById("show").appendChild(div);
      //   //设置div的id值
      //   div.id = "1";
      //   //定义span标签
      //   var span = document.createElement("span");
      //   //span标签添加文件结点
      //   var node = document.createTextNode("1");
      //   //把文本结点的数据添加到span标签上
      //   span.appendChild(node);
      //   //把span标签添加到div里
      //   document.getElementById("1").appendChild(span);
      for (var i = 0; i < jsonPData.length; i++) {
        var div = document.createElement("div");
        document.getElementById("show").appendChild(div);
        div.id = i;
        for (key in jsonPData[i]) {
          var res = jsonPData[i][key]; //获取的数据
          //创建一个span标签
          var span = document.createElement("span");
          //span标签添加文件结点
          var node = document.createTextNode(res);
          //把文本结点的数据添加到span标签上
          span.appendChild(node);
          document.getElementById(i).appendChild(span);
        }
      }
    }
    //html头部动态创建一个script标签，通过src属性获取外部数据
    //scr = "http://58city.com/data2.php?jsonp=回调函数名";
    var script = document.createElement("script");
    script.src = "http://58city.com/goods.php?jsonp=handle";
    document.head.appendChild(script);
  </script>
</html>

3.2 58city.com中的 goods.php


<?php
require 'autoLoad.php';
use compotents\conn\DBconn;
$user =new  DBconn();
$table = 'tb_goods';//表名
$limit =10; //显示10条记录
$records = $user->select($table,'*','*',$limit);
$jsonStr = json_encode($records);
echo "handle($jsonStr)";
?>

学习总结

1.1CORS实现跨域请求 php11.edu中的cors.html

1.2 58city.com域中的文件 data.php

1.3 代码显示效果

2.1 JSONP实现跨域请求 php11.edu中的jsonP.html

2.2 58city.com中的 data2.php

2.3代码显示效果

3.1利用jsonp实现跨域提取数据 php11.edu中的showGoods.html

3.2 58city.com中的 goods.php

3.3代码显示效果

相关文章