Community Learn Tools Library Leisure

English

Home > List of blog posts > 跨域请求与DOM知识

Blogger Information

Blog 55

fans 3

comment 0

visits 54658

Special Recommendation

More>

Related recommendations

跨域请求与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获取绑定事件的父元素

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：边学边总结 ,克服遗忘

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

初学jQuery

2020-08-29 07:53:59