3-5 JS-Web-API-优快云博客

// 通用的事件绑定函数
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn);
}

const btn1 = document.getElementById('btn1');
bindEvent(btn1, 'click', event => {
    //...
})

2.事件冒泡

基于DOM树形结构
事件会顺着触发元素向上冒泡

const btn1 = document.getElementById('btn1');
bindEvent(btn1, 'click', event => {
    //...
    event.stopPropagation()
    console.log(1)
})
const body = document.body;
bindEvent(body, 'click', event => {
    console.log(2)
})

3.事件代理

用e.target 获取触发元素
用matches 来判断是否是触发元素(matches:判断DOM元素是否符合css选择器)

<div id="div3">
    <a href='#'>a1</a><br>
    <a href='#'>a2</a><br>
    <a href='#'>a3</a><br>
    <a href='#'>a4</a><br>
    <button>加载更多。。</button>
</div>

const div3 = document.getElementById('div3');
bindEvent(div3, 'click', event => {
    event.preventDefault();
    const target = event.target;
    if(target.nodeName === 'A'){
        alert(target.innerHTML)
    }
})

四、AJAX

XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('GET','/data/1.json',true); // true是异步
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            alert(xhr.responseText);
        }else{
            console.log('其他情况');
        }
    }
}
xhr.send(null);

xhr.readyState

0-UNSET 尚未调用open方法
1-OPENED open方法已被调用
2-HEADERS_REVEIVED send方法已被调用，header已被接收
3-LOADING下载中，responseText已有部分内容
4-DONE下载完成

// 简易ajax
function ajax(url){
    const p = new Promise((resolve,reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET',url,true); // true是异步
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    resolve(JSON.parse(xhr.responseText));
                }else if(xhr.status === 404){
                    reject(new Error('404'))
                }
            }
        }
        xhr.send(null);
    })
    return p;
}

const url = '/data/1.json';
ahax(url)
.then(res => console.log(res));
.catch(err => console.error(err));

xhr.status

2xx - 表示成功处理请求，如200
3xx - 需要重定向，浏览器直接跳转，如301 302 304
4xx - 客户端请求错误，如404 403
5xx - 服务器端错误

五、跨域

同源策略

ajax请求时，浏览器要求当前网页和server必须同源（安全）
同源：协议、域名、端口，三者必须一致
前端：http://a.com:8080/ server：https://b.com/api/xxx

加载图片 css js可以跨域

跨域

所有的跨域，都必须经过server端允许和配合
未经server端允许就实现跨域，说明浏览器有漏洞

JSONP

<script>
    window.abc = function(data){
        console.log(data);
    }
</script>
<script src='http://1/jsonp.js?username=xxx&callback=abc'>

//jsonp.js
abc(
    {name:''xxx}
)

// jquery 实现 jsonp
$.ajax({
    url: 'http://123.json',
    dataType: 'jsonp',
    jsonpCallback: 'callback',
    success: function(data){
        console.log(data)
    }
})

CORS - 服务器设置 http header