什么是AJAX

AJAX就是异步的JS和XML的缩写，目前一般用JSON代替XML
AJAX主要用于再不刷新页面的情况下向浏览器发请求和接受相应，最后局部更新页面
该技术最核心的是XMLHttpRequest对象，该对象可发起HTTP请求，我们可以监听readystate的变化获得响应
优点是不刷新就可以发请求并接受响应
缺点是浏览器的限制不能跨域

实现步骤

1.创建一个XMLHTTPRequest对象
2.设置请求参数
3.监听请求成功后的状态变化
4.发送请求

let request = new XMLHttpRequest()
request.open('GET', '/style.css')
request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.response)
  }
  request.send()
};

一个请求的一生

请求在不同阶段会有不同的readyState，了解这个更能理解第三步onreadyStateChange事件

请求的不同阶段	readyState
let request = new XMLHttpRequest()	0
request.open('GET', '/style.css')	1
request.send()	2
第一个响应信息出现在浏览器	3
所有响应下载完成	4

加载CSS

getCSS.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/style.css')
    request.onreadystatechange = () => {
        // 如果请求成功
        // 下载完成，但是不知道是200的完成还是404的完成
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                //请求发送成功
                // 把css内容写入style标签然后插入head
                const style = document.createElement('style')
                // 怎么获取相应内容？ request.response
                style.innerHTML = request.response
                document.head.appendChild(style)
            } else {
                // 请求失败
                alert("加载 CSS 失败");
            }
        }

    }
    request.send()
}

重点在怎么处理拿到的响应：生成style标签

加载JS

重点在怎么处理拿到的响应：生成script标签

getJS.onclick = () => {
    console.log('111')
    const request = new XMLHttpRequest()
    request.open('GET', '/2.js')
    request.onreadystatechange = () => {
        // 下载完成，但是不知道是200的完成还是404的完成
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                //请求发送成功
                // 把js内容写入script标签然后插入head
                const script = document.createElement('script')
                // 怎么获取相应内容？ request.response
                script.innerHTML = request.response
                document.body.appendChild(script)
            } else {
                // 请求失败
                alert("加载 JS 失败");
            }
        }
    }
    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()

}

加载JSON

JSON.parse 将符合JSON语法的字符串转换成JS对应类型的数据
JSON.stringify 把JS数据变成JSON字符串

getJSON.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/5.json')
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status === 200) {
                // 请求成功
                // 怎么解析JSON? JSON.parse: string -> JS对象
               
                const obj = JSON.parse(request.response);
            

            }
        }
    }

    request.send()
}

AJAX初体验