跨域请求和DOM操作

跨域请求（跨域不同域名访问资源）
最简单的跨域请求就是 a img 等标签发起的请求
为了网站安全，默认的禁止JS脚本发起跨域请求

跨域请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域请求</title>
    <style>
        p {
            color: lightblue;
        }
    </style>
</head>
<body>
    <button>跨域请求</button>
    <p></p>
    <script>
        var btn = document.querySelector('button');
        // 绑定事件
        btn.addEventListener('click', get, false);
        function get() {
            // 1.创建ajax对象
            var xhr = new XMLHttpRequest();
            // 2.监听请求
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                    document.querySelector('p').innerHTML = xhr.responseText;
                }
            }
            // 3.配置参数
            xhr.open("get", "http://phpio.com/0814.php", true);
            // 4.发送请求
            xhr.send(null);
        }
    </script>
</body>
</html>

php脚本

<?php
// 同意其他域名发起跨域请求
header('Access-Control-Allow-Origin:http://xiaoshang.com');
echo '跨域脚本返回的数据';

JSONP方式

<!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>跨域请求</button>
    <script>
        function get(deta) {
            var obj = deta;
            console.log(obj);
            var ul = document.createElement('ul');
            ul.innerHTML += '<li>' + obj.title + '</li>';
            ul.innerHTML += '<li>' + obj.user.name + '</li>';
            ul.innerHTML += '<li>' + obj.user.result + '</li>';
            document.body.appendChild(ul);
        }
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            // 动态生成script标签发起jsop请求
            // 1.先创建标签
            var scr = document.createElement("script");
            // 设置跨域请求
            scr.src = "http://phpio.com/JSONP.php?id=3&jsonp=get";
            // 标签类型
            scr.type = "text/javascript";
            // 插入到页面中
            document.body.appendChild(scr);
        })
    </script>
</body>
</html>

php脚本

<?php
// 先设置编码类型
header('content-type:text/html;charset=utf-8');
// 获取数据
$id = $_GET['id'];
// 获取前端的回调函数名，这个必须是url中的最后一个
$call = $_GET['jsonp'];
$users = [
    ["name" => "PHP", "result" => 80],
    ["name" => "HTML", "result" => 75],
    ["name" => "javascript", "result" => 70]
];
// 判断请求的的id作为键名是否存在数组中
if (array_key_exists(($id - 1), $users)) {
    $user = $users[$id - 1];
}
// 返回前端回调函数的参数json数据
$json = ["title" => "成绩表", "user" => $user];
// 生成js函数调用语句
echo $call . '(' . json_encode($json) . ')';

事件代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域请求</title>
    <style>
        .item {
            width: 50px;
            height: 50px;
            border-radius: 40px;
            background-color: lightgreen;
            text-align: center;
            box-sizing: border-box;
            padding-top: 15px;
            margin: 10px;
        }
        .item1 {
            width: 50px;
            height: 50px;
            border-radius: 40px;
            background-color: lightseagreen;
            text-align: center;
            box-sizing: border-box;
            padding-top: 15px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
    <div class='container'>
        <div class='item'>PHP</div>
        <div class='item1'>CSS</div>
    </div>
    <script>
         // 事件冒泡
        var lis = document.querySelectorAll("li");
        document.querySelector("ul").addEventListener("click", function (ev) {
            // 打印事件绑定者
            console.log(ev.currentTarget);
            // 打印事件触发者
            console.log(ev.target);
        });
        // 所以如果要给多个子元素添加事件可以直接给父元素添加同名事件即可
        var div = document.querySelector(".container");
        div.addEventListener("mouseover", function (ev) {
            ev.target.style = "width:200px; transition:all 0.5s ease-out";
        });
        div.addEventListener("mouseout", function (ev) {
            ev.target.style = null;
            ev.target.style = "transition:all 0.5s ease-out";
        });
    </script>
</body>
</html>