前后端分离 AJAX原理

AJAX(Asyns JavaScript And XML)

是一种使用XMLHttpRequest技术构建更复杂,动态的网页的编程实践

AJAX允许只更新一个HTML页面的部分DOM,而无须重新加载整个页面
AJAX还允许异步工作,这意味着当网页的一部分正试图重新加载时,您的代码可以继续运行
相比之下,同步会阻止代码继续运行,直到这部分的网页完成重新加载

简单来讲,AJAX是浏览器上的功能,浏览器可以发请求,收响应
浏览器在window上加了一个 XMLHttpRequt 函数
用这个函数(类)可以构造一个对象,JS通过它实现发请求和收响应

准备Node.js 服务器

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').toString()
    const array = JSON.parse(page1)
    const result = array.map(item => `<li>${item.id}</li>`).join('')
    string = string.replace('{{page1}}', `<ul id='xxx'>${result}</ul>`)
    response.write(string)
    response.end()
}

加载css

getCSS.onclick = () => {
    const request = new XMLHttpRequest();
    request.open('GET', './style.css');
    request.onreadystatechange = () => {
        if (request.readyState === 4) 
            if (request.status >= 200 && request.status < 300) 
                const style = document.createElement('style')
                style.innerHTML = request.response
                document.head.appendChild(style)
            } else {
                alert('加载CSS失败')
            }
        }
    };
    request.send()
}

加载JS

getJS.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', './2.js')
    request.onload = () => {
        const script = document.createElement('script')
        script.innerHTML = request.response
        document.body.appendChild(script)
    };
    request.onerror = () => {
        console.log('失败了')
    };
    request.send()
}

加载HTML

getHTML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', './3.html')
    request.onload = () => {
        const div = document.createElement('div')
        div.innerHTML = request.response
        document.body.appendChild(div)
    }
    request.onerror = () => {
    }
    request.send()
}

加载XML

getXML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', './4.xml')
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            const dom = request.responseXML
            const text = dom.getElementsByTagName('warning')[0].textContent
            console.log(text.trim())
        }
    }
    request.send()
};

trim()去掉字符串周围的回车空格

加载JSON

getJSON.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', './5.json')
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            console.log(request.response)
            const object = JSON.parse(request.response)
            myName.textContent = object.name
        }
    };
    request.send()
};

加载列表

let n = 1;
getPAGE.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', `./page${n + 1}`)
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            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()
};

详细资料点击：AJAX 文档