跨域请求与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><imgsrc="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文件
<?phpheader('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
<?phpheader('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获取绑定事件的父元素