背景

AJAX是浏览器上的功能，可以发请求和接受相应。

浏览器在window.上加了一个XML HttpRequest函数

用这个构造函数(类)可以构造出一个对象

JS通过它实现发请求，收响应

配置node-dev

// 安装
yarn global add node-dev
// 开始监听一个服务器
node-dev server.js 8888

加载CSS

1. 创建HttpRequest对象(全称是XMLHttpRequest)
2. 调用对象的open方法
3. 监听对象的onload & onerror 事件
4. 专业前端会改用onreadystatechange事件
5. 在事件处理函数里操作CSS文件内容
6. 调用对象的send方法(发送请求)

具体代码请打开MDN用CRM大法搞定

// 第一步
const request = new XMLHttpRequest()
// 第二步
request.open("GET", "/style.css")
// 第三步
request.onload = () => {
    console.log("成功了")
}
request.onerror = () => {
    console.log("失败了")
}
// 第四步
request.send()

高级写法

    const request = new XMLHttpRequest()
    request.open("GET", "/style.css")
    request.onreadystatechange = () => {
        console.log(request.readyState)
        if (request.readyState === 4) {
            console.log("下载完成")
            // 成功的状态码在200-300以内 失败的状态码在300以上
            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

1. 创建HttpRequest对象(全称是XMLHttpRequest)
2. 调用对象的open方法
3. 监听对象的onreadystatechange 事件
4. 在事件处理函数里操作JS文件内容
5. 调用对象的send方法(发送请求)
6. 具体代码请打开MDN用CRM大法搞定

    // 第一步
    const request = new XMLHttpRequest()
    // 第二步
    request.open("GET", "/2.js")
    // 第三步
    request.onload = () => {
        console.log("2.js 成功了")        
    // 在网页创建script标签 并插入相关代码
        const script = document.createElement("script")
        script.innerHTML = request.response
        document.body.appendChild(script)
    }
    request.onerror = () => {
        console.log("失败了")
    }
    // 第四步
    request.send()

高级写法

    const request = new XMLHttpRequest()
    request.open("GET", "/2.js")
    request.onreadystatechange = () => {
        console.log(request.readyState)
        if (request.readyState === 4) {
            console.log("下载完成")
            // 成功的状态码在200-300以内 失败的状态码在300以上
            if (request.status >= 200 && request.status < 300) {
                const script = document.createElement("script")
                script.innerHTML = request.response
                document.body.appendChild(script)
            } else {
                alert("加载JS失败")
            }
        }
    }
    request.send()

加载HTML

1. 创建HttpRequest对象(全 称是XMLHttpRequest)
2. 调用对象的open方法
3. 监听对象的onreadystatechange事件
4. 在事件处理函数里操作HTML文件内容
5. 调用对象的send方法(发送请求)
6. 具体代码请打开 MDN用CRM大法搞定

    const request = new XMLHttpRequest()
    request.open("GET", "/3.html")
    request.onload = () => {
        console.log("3.html加载成功了")
        const div = document.createElement("div")
        div.innerHTML = request.response
        document.body.appendChild(div)
    }
    request.onerror = () => {
        console.log("失败了")
    }
    request.send()

高级写法

const request = new XMLHttpRequest()
    request.open("GET", "/3.html")
    request.onreadystatechange = () => {
        console.log(request.readyState)
        if (request.readyState === 4) {
            console.log("下载完成")
            // 成功的状态码在200-300以内 失败的状态码在300以上
            if (request.status >= 200 && request.status < 300) {
                const div = document.createElement("div")
                div.innerHTML = request.response
                document.body.appendChild(div)
            } else {
                alert("加载HTML失败")
            }
        }
    }
    request.send()

加载XML

1. 创建HttpRequest对象(全称是XMLHttpRequest)
2. 调用对象的open方法
3. 监听对象的onreadystatechange事件
4. 在事件处理函数里操作responseXML
5. 调用对象的send方法(发送请求)
6. 具体代码请打开 MDN用CRM 大法搞定

    const request = new XMLHttpRequest()
    request.open("GET", "/4.xml")
    request.onreadystatechange = () => {
        console.log("下载完成")
        if (
            request.readyState === 4 &&
            request.status >= 200 &&
            request.status < 300
        ) {
            const dom = request.responseXML
            const text = dom.getElementsByTagName("warning")[0].textContent
            console.log(text.trim())
        } else {
            alert("加载XML失败")
        }
    }
    request.send()

加载JSON（JS对象标记语言）

JSON.parse

将符合JSON语法的字符串转换成JS对应类型的数据

JSON字符串=> JS数据

由于JSON只有六种类型，所以转成的数据也只有6种

如果不符合JSON语法，则直接抛出一个Error对象

一半用try catch捕获错误

let object
try{
object = JSON. parse("{ 'name':'frank'}")
}catch(error){
console.1og('出错了，错误详情是')
console. log(error)
object = {'name' :'null' }
}
console. log(object)

JSON.stringify

是JSON.parse的逆运算

JS数据=> JSON字符串

由于JS的数据类型比JSON多，所以不一定能成功

如果失败，就抛出一个Error对象

步骤

1. 创建HttpRequest对象(全称是XMLHttpRequest)
2. 调用对象的open方法
3. 监听对象的onreadystatechange事件
4. -在事件处理函数里使用JSON.parse
5. 调用对象的send方法(发送请求)
6. -具体代码请打开MDN用CRM大法搞定

    const request = new XMLHttpRequest()
    request.open("GET", "/5.json")
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            console.log("下载完成")
            // 成功的状态码在200-300以内 失败的状态码在300以上
            if (request.status >= 200 && request.status < 300) {
                console.log(request.response)
                const obj = JSON.parse(request.response)
                myName.textContent = obj.name.toLocaleUpperCase()
            } else {
                alert("加载JSON失败")
            }
        }
    }
    request.send()

错误事件解决

onreadystatechange