AJAX

全名：Async JavaScript And XML
用处：用JS发请求和收响应，实现异步交互

背景

浏览器可以发请求，收响应
浏览器在 window 上加了一个 XMLHttpRequest 函数
用这个构造函数(类)可以构造出一个对象
JS 通过它实现发请求，收响应

Ajax核心

实现Ajax异步交互的核心对象便是XMLHttpRequest对象，功能：在客户端和服务器之间进行传输数据。XMLHttpRequest通过URL获取数据，逐步更新页面（不是书安心整个页面）而不会打扰到用户。

Ajax操作方式

1. 创建Ajax核心对象XMLHttpRequest
2. 通过该对象的open()方法与服务器建立链接
3. 通过send()方法将请求发送给服务器端，此时服务端会给你一个响应。
4. 通过onload处理响应内容
5. 通过onerror构建请求失败的内容
6. 通过onreadystatechange监听服务端的通信状态，监听响应状态码并且处理响应内容
7. 更新HTML页面

onreadystatechange

只要 readyState 属性发生变化，就会调用相应的处理函数。

创建Ajax核心对象XMLHttpRequest

const request = new XMLHttpRequest()

与服务端进行链接

request.open()

发送请求给服务端

 request.send()

根据提供的函数处理响应内容

 request.onload = () => {
        console.log('request.response')
        console.log(request.response)
        // 上面一句是调试
        // 
        const div = document.createElement('div')
        div.innerHTML = request.response
        document.body.appendChild(div)
    }

构建请求失败的内容

 request.onerror = () => {
        console.log('请求失败')
    }

实例

const request = new XMLHttpRequest()
    request.open('GET', '4.xml')
    request.send()
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            //ajax状态码：4 下载完成
            if (request.status >= 200 && request.status < 300) {
                //判断响应状态码 下载成功
                //开始处理相应内容s
                console.log(request.response)
                const dom = request.responseXML
                const text = dom.getElementsByTagName('warning')[0].textContent
                //text 是一个数组
                console.log(text.trim())
            }
        }
    }

代码链接

developer.mozilla.org/zh-CN/docs/…