AJAX

Ajax的全部内容：用JS发请求和收响应。实际上请求和响应是http里面的请求和响应

原因：浏览器地址栏输入baidu.com,回车，实际上就是往baidu的服务器发了一个请求，我们收到百度页面的展示，实际上就是百度的HTML响应被浏览器接收了。浏览器有这个功能，可不可以暴露给js开发者呢？我想用js来控制浏览器发请求和收响应。 浏览器在window上加了一个XMLHttpRequest函数，用这个构造函数（类）可以构造出一个对象，JS通过它实现发请求，收响应

四个步骤：

1. 创建HttpRequest对象（全称是XMLHttpRequest）
2. 调用对象的open方法
3. 监听对象的onload&onerror事件（一般改用onreadystatechange事件，在事件处理函数里操作相关文件内容）
4. 调用对象的send方法（发送请求）

const request = new XMLHttpRequest()
request.open('GET', '/style.css');
request.onload = ()=>{
    console.log('成功了')
}
request.onerror = ()=>{
    console.log('失败了')
}
request.send()

getCSS.onclick = ()=>{
    const request = new XMLHttpRequest();
    request.open("GET","/style.css");
    request.onload = ()=>{
        const style = document.createElement("style");
        style.innerHTML = request.response;
        document.head.appendChild(style);
    };
    request.onerror = ()=>{
        console.log("失败了");
    };
    request.send();
}

改为：

getCSS.onclick = ()=>{
    const request = new XMLHttpRequest();
    request.open("GET", "/style.css"); // readyState = 1
    request.onreadystatechange = ()=>{
        //下载完成，但不知道是成功2xx 还是失败 4xx 5xx
        if(request.readyState === 4) {
            if(request.state>= 200 && request.status < 300) {
                const style = document.createElement("style");
                style.innerHTML = request.response;
                document.head.appendChild(style);
            }else {
                alert('加载CSS失败');
            }
        }
    };
    request.send(); //readyState = 2
}

综合应用：加载分页

1. 静态加载第一页

if (path === '/index.html') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        //把文件变成字符串
        let string = fs.readFileSync('public/index.html').toString()

        const page1 = fs.readFileSync('db/page1.json')
        const array = JSON.parse(page1)
        const result = array.map(item => `<li>${item.id}</li>`).join('')
        // string = string.replace('{{page1}}',page1)
        string = string.replace('{{page1}}', `<ul id="xxx">${result}</ul>`)
        response.write(string)
        response.end()
    }

2. 动态加载从第二页开始：

let n = 1
getPage.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', `/db/page${n+1}.json`)
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status >= 200 && request.status < 300) {
            // console.log(request.response)
            const array = JSON.parse(request.response)
            array.forEach(item => {
                const li = document.createElement('li')
                li.textContent = item.id
                xxx.appendChild(li)
            });
            n += 1
        }
    }
    request.send()
}

window.JSON

• JSON.parse

1. 将符合 JSON 语法的字符串转换成 JS 对应类型的数据
2. JSON 字符串 => JS 数据
3. 由于 JSON 只有六种类型，所以转成的数据也只有6种
4. 如果不符合 JSON 语法，则直接抛出一个 Error 对象
5. 一半用 try catch 捕获错误

• JSON.stringify

1. 是 JSON.parse 的逆运算
2. JS 数据 => JSON 字符串
3. 由于 JS 的数据类型比 JSON 多，所以不一定能成功
4. 如果失败，就抛出一个 Error 对象

参考资料：饥人谷