首页 > 博客列表 > 跨域请求与DOM知识

博主信息

博文 55

粉丝 3

访问量 70584

专题推荐

更多>

跨域请求与DOM知识

一、跨域请求

1.跨域是什么？

跨域是跨越不同的域名访问网站资源
CORS跨域资源共享
CSRF跨站请求伪造

2.同源策略

协议相同
域名相同
端口相同

3.通过ajax跨域访问

front.edu域名下的demo1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跨域请求</title>
  </head>
  <body>
    <a href="https://www.php.cn">访问php中文网</a>
    <img
      src="https://img.php.cn/upload/course/000/000/001/5f3de1b5ec627767.png"
      alt=""
    />
    <button>跨域请求CORS</button>
    <script>
      //获取按钮
      var btn = document.querySelector("button");
      //监听事件
      btn.addEventListener("click", getData, false);
      //1.创建ajax对象
      var xhr = new XMLHttpRequest();
      function getData() {
        //2.监听请求
        xhr.addEventListener("readystatechange", getCORS, false);
        //3.配置参数
        xhr.open("get", "http://phpio/test1.php", true);
        //4.发送请求
        xhr.send(null);
      }
      function getCORS() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
          var h2 = document.createElement("h2");
          h2.innerText = xhr.responseText;
          var body = document.querySelector("body");
          body.appendChild(h2);
        }
      }
    </script>
  </body>
</html>

phpio域名下的test1.php文件

<?php
header('Access-Control-Allow-Origin:http://front.edu');
//把资源开放给所有请求
//header('Access-Control-Allow-Origin:*');
//允许带着cookie发起请求
//header('Access-Control-Allow-Origin:true');
echo '跨域脚本返回的数据';
//冲刷缓存
flush();

4.通过JSONP跨域访问

front.edu下的demo3.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>
  </body>
  <script>
    function handle(data) {
      console.log(data);
      var p = document.createElement("p");
      var obj = JSON.parse(data);
      console.log(obj);
      p.innerHTML += "<p>" + obj.title + "</p>";
      p.innerHTML += "<p>" + obj.user.name + "</p>";
      p.innerHTML += "<p>" + obj.user.email + "</p>";
      document.body.appendChild(p);
    }
    var btn = document.querySelector("button");
    btn.addEventListener("click", function () {
      //动态生成script标签，发起jsonp请求
      var script = document.createElement("script");
      //url中的最后一个键值对，必须是一个回调
      script.src = "http://phpio/test2.php?id=1&jsonp=handle";
      document.head.appendChild(script);
    });
  </script>
</html>

phpio域名下的test2.php

<?php
header('content-type:text/html;charset=utf-8');
$id = $_GET['id'];
//前端的回调函数的名称
$callback = $_GET['jsonp'];
//模拟接口数据，根据查询条件返回不同的值
$users = [
0=>'{"name":"孙悟空","email":"wukong@php.cn"}',
1=>'{"name":"天蓬元帅","email":"tianpeng@php.cn"}',
2=>'{"name":"卷帘大将","email":"juanlian@php.cn"}'
];
if(array_key_exists(($id-1),$users)){
    //查询结果保存到变量$user中
    $user = $users[$id-1];
}
//返回前端给回调的参数是一个json格式的数据
$json = '{
    "title":"用户信息",
    "user":'.$user.'
}';
echo $callback.'('. json_encode($json) .')';

二、CSS样式的添加、移除、替换

1.添加样式

className()
classList.add()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>classList对象</title>
    <style>
      .red {
        color: red;
      }
      .bgc {
        background: yellow;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p class="red">大家晚上好！</p>
    <h3>classList对象</h3>
    <script>
      //classList操作class中的内容
      var h3 = document.querySelector("h3");
      //h3.className = "red";
      //h3.className = "red bgc";
      //添加样式
      h3.classList.add("red");
      h3.classList.add("bgc");
    </script>
  </body>
</html>

2.移除样式

classList.remove()

h3.classList.remove("red");

3.切换样式

classList.toggle()如果没有就加上，如果已有就去除
h3.classList.toggle("red");

4.替换样式

classList.replace("","")
h3.classList.replace("red", "blue");

三、自定义数据属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义数据属性</title>
  </head>
  <body>
    <div id="user" data-id="1" data-user-name="peter" data-email="peter@php.cn">
      用户信息
    </div>
    <script>
      //dataset对象用于获取自定义属性的内容
      //自定义数据类型必须以data-为前缀
      var user = document.getElementById("user");
      //dataset获取data-的数据属性时，必须省略data-
      console.log(user.dataset.id);
      console.log(user.dataset.userName);
      console.log(user.dataset.email);
    </script>
  </body>
</html>

四、事件派发

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <style>
      button {
        color: red;
      }
    </style>
  </head>
  <body>
    <button>点击领红包</button>
    <script>
      //获取按钮
      var btn = document.querySelector("button");
      //事件监听
      btn.addEventListener("click", function () {
        alert("恭喜成功领取1元");
      });
      //事件派发
      //var event = new Event("click");
      //btn.dispatchEvent(event);
      //定时器
      /* setTimeout(function () {
        var event = new Event("click");
        btn.dispatchEvent(event);
      }, 1000); */
        setInterval(function () {
        var event = new Event("click");
        btn.dispatchEvent(event);
      }, 1000); 
    </script>
  </body>
</html>

五、事件冒泡

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件冒泡</title>
  </head>
  <body>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
  </body>
  <script>
    /* var lis = document.querySelectorAll("li");
    for (var i = 0; i < lis.length; i++) {
      lis[i].addEventListener("click", function (ev) {
        console.log(ev.target.innerText);
      });
    } */
    //给ul添加点击事件
    var ul = document
      .querySelector("ul")
      .addEventListener("click", function (ev) {
        //ev.targrt触发事件的元素
        console.log(ev.target);
        //ev.currentTarget绑定事件的元素
        console.log(ev.currentTarget);
      });
    //根元素
    /* var body = document
      .querySelector("body")
      .addEventListener("click", function (ev) {
        console.log(ev.currentTarget);
      }); */
    //根据事件冒泡的原理，当前子元素的事件，必然会冒泡到父级上的同名事件
    //此时，只需要给所有的li的父级ul添加点击事件就可以
  </script>
</html>

六、学习总结

1.跨域请求的两种方式：

1.通过ajax访问，设置header('Access-Control-Allow-Origin:*');开放请求资源
2.通过JSONP访问，设置script的src为请求文件名，并在文件名后添加get键值对参数，最后一个键值对为回调方法

2. CSS样式添加、移除、切换、替换：

classList.add()添加样式或者 className()
classList.remove()移除样式
classList.toggle() 切换样式，如果已有该样式，则去除该样式，没有则添加该样式
classList.replace("原来样式","替换样式") 替换样式

3.自定义数据属性

通过添加data-前缀来自定义属性名称和值
dataset对象用于获取自定义属性的内容
dataset获取data-的数据属性时，必须省略data-

4.事件派发

创建一个事件派发对象 var event = new Event('click')
派发事件： dispatchEvent(event);

5.事件冒泡

给父元素添加事件，通过ev.target来获取触发事件的元素，ev.currentTarget获取绑定事件的父元素

批改老师：

天蓬老师

批改状态：合格

老师批语：边学边总结 ,克服遗忘

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

初学jQuery

2020-08-29 07:53:59