【AJAX】AJAX原理 - XMLHttpRequest (XHR)

AJAX 依赖于XMLHttpRequest 对象

• 浏览器用于与服务器交互。
• 不刷新页面，请求特定的URL，获取数据。
• 更新页面的局部内容。

---

---

前言

axios内部使用XMLHttpRequest 对象与服务器交互：

一、使用XMLhttpRequest对象

1. 创建XMLHttpRequest对象
2. 配置请求方法和请求URL地址
3. 监听loadend事件，接收响应结果，响应结果返回JSON字符串；
4. 发起请求

<div class="province"></div>
    <script>
        //  1. 创建XMLHttpRequest对象
        //  2. 配置请求方法和请求URL地址
        //  3. 监听loadend加载完成事件，接收响应结果
        //  4. 发起请求
        const xhr = new XMLHttpRequest()
        xhr.open('GET', 'https://hmajax.itheima.net/api/province')
        xhr.addEventListener('loadend', () => {
            //响应结果
            console.log(xhr.response)
            const resp = JSON.parse(xhr.response)
            document.querySelector('.province').innerHTML = resp.list.join('<br>')
        })
        xhr.send()
    </script>

二、XMLHttpRequest对象–查询参数

1.语法

URL+ ‘? 参数名=参数值&参数名=参数值’

<div class="city"></div>
    <script>
        //  1. 创建XMLHttpRequest对象
        //  2. 配置请求方法和请求URL地址
        //  3. 监听loadend事件，接收响应结果
        //  4. 发起请求
        const xhr = new XMLHttpRequest()
        xhr.open('GET' , 'https://hmajax.itheima.net/api/city?pname=辽宁省')
        xhr.addEventListener('loadend', () => {
            //响应结果
            document.querySelector('.city').innerHTML = JSON.parse(xhr.response).list.join('<br>')
        })
        xhr.send()
    </script>

2.URLSearchParams 查询参数对象

拼装查询字符串为参数对象

代码如下（示例）：

document.querySelector('.btn').addEventListener('click', function () {
            const paramObj = { pname : '辽宁省', cname : '沈阳市' }
            const params = new URLSearchParams(paramObj)
            const requestparms = params.toString()
            // console.log(requestparms);
            const xhr = new XMLHttpRequest()
            xhr.open('GET', `https://hmajax.itheima.net/api/city?${requestparms}`)
            xhr.addEventListener('loadend', () => {
                //响应结果
                // console.log(xhr.response)
                const resp = JSON.parse(xhr.response)
                const areali = resp.list.map(areaname => {
                    return `<li >${areaname}</li>`
                }).join('')
                // console.log(areali);
                document.querySelector('.area').innerHTML = areali
            })
            xhr.send()
        })

3.数据提交–请求体提交数据

setRequestHeader
请求头设置：
Content-Type: application/json
请求体携带参数JSON字符串
代码如下（示例）：

<button class="tj">提交</button>
    <script>
        document.querySelector('.tj').addEventListener('click', () => {
            const xhr = new XMLHttpRequest()
            xhr.open('POST','https://hmajax.itheima.net/api/register')
            xhr.addEventListener('loadend', () => {
                console.log(xhr.response);
            })
            xhr.setRequestHeader('Content-Type','application/json')
            const userObj = {
                username : 'yingbo277',
                password :'1234567890'
            }
            const userInfo = JSON.stringify(userObj)
            xhr.send(userInfo)
        })
    </script>

---

总结

提示：这里对文章进行总结：