AJAX的知识梳理

【目录】

一、用AJAX加载CSS
二、用AJAX加载JS
三、用AJAX加载HTML
四、用AJAX加载XML
五、用AJAX加载JSON

【正文】

AJAX的全部内容概括来说的话就是用JS发请求和收响应。

全称 : Async JavaScript And XML

背景 : AJAX是浏览器上的功能
1、浏览器可以发请求，收响应
2、浏览器在window上加了一个XMLHttpRequuest函数
3、用这个构造函数（类）可以构造出一个对象
4、JS通过它实现发请求，收响应

一、用AJAX加载CSS

四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onload & onerror事件（一般会采用onreadystatechaange事件，在事件处理函数里操作CSS文件内容）
4、调用对象的send方法（发送请求）
代码如下:

getCSS.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/style.css')
    request.onreadystatechange = () => {
        //下载完成，但是不知道是成功2xx，还是失败4xx  5xx
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                //创建style标签
                const style = document.createElement('style')
                //填写style内容
                style.innerHTML = request.response
                //插到头里面
                document.head.appendChild(style)
            } else {
                alert('加载CSS失败')
            }

        }
    }
    request.send()
}

二、用AJAX加载JS

四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onreadystatechaange事件，在事件处理函数里操作JS文件内容
4、调用对象的send方法（发送请求）
代码如下:

getJS.onclick = () => {
    const request = new XMLHttpRequest();
    request.open("GET", "/2.js");
    request.onreadystatechange = () => {
        //下载完成，但是不知道是成功2xx，还是失败4xx  5xx
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                  // 创建 script 标签
                 const script = document.createElement("script");
                // 填写 script 内容
                script.innerHTML = request.response;
              // 插到身体里
                 document.body.appendChild(script);
            } else {
                alert('加载CSS失败')
            }
        }
    }
    request.send();
};

三、用AJAX加载HTML

四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onreadystatechaange事件，在事件处理函数里操作HTML文件内容
4、调用对象的send方法（发送请求）
代码如下:

getHTML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/3.html')
    request.onreadystatechange = () => {
        //下载完成，但是不知道是成功2xx，还是失败4xx  5xx
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                   //创建div标签
                 const div = document.createElement('div')
                 //填写div内容
                 div.innerHTML = request.response
               //插入到身体里
                 document.body.appendChild(div)
            } else {
                alert('加载CSS失败')
            }
        }
    }
    request.send()
}

四、用AJAX加载XML

四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onreadystatechaange事件，在事件处理函数里操作responseXML
4、调用对象的send方法（发送请求）
代码如下:

getXML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/4.xml')
    request.onreadystatechange = () => {
        //下载完成，但是不知道是成功2xx，还是失败4xx  5xx
        if (request.readyState === 4 && request.status === 200) {
            const dom = request.responseXML
            const text = dom.getElementsByTagName('warning')[0].textContent
            console.log(text.trim())
        }
    }
    request.send()
}

五、用AJAX加载JSON

1、什么是JSON？
全称 : JavaScript Object Notation

JSON跟HTML、CSS、XML、JS一样，是一门独立的语言。
JSON不是编程语言，是标记语言。跟HTML、XML、Markdown一样，用来展示数据

2、JSON一些语法图示

3、支持的数据类型
只有以下六种，注意跟JS的七种数据类型区分开，不支持函数，不支持变量（所以也不支持引用）

string : 只支持双引号，不支持单引号和无引号
number : 只支持科学计数法
bool : true和false
null : 没有undefined
object
array
用AJAX加载JSON同样需要四个步骤
1、创建HttpRequest对象(全称XMLHttpRequuest)
2、调用对象的open方法
3、监听对象的onreadystatechaange事件，在事件处理函数里使用JSON.parse
4、调用对象的send方法（发送请求）
代码如下:

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

总结

HTTP是一个框，什么都可以往里面装
1、可以装HTML、CSS、JS、XML等
2、只要知道了如何解析这些内容，就可以使用这些内容
解析方法
1、得到CSS之后生成了style标签
2、得到JS之后生成了script标签
3、得到HTML之后使用innerHTML和DOM API
4、得到XML之后使用responseXML和DOM API
5、不同类型的数据有不同类型的解析方法

window.JSON

JSON.parse
1、将符合JSON语法的字符串转换成JS对应类型的数据
2、JSON字符串=>JS数据
3、由于JSON只有六种类型，所以转成的数据也只有6中
4、如果不符合JSON语法，则直接抛出一个Error对象
5、一般用try catch捕获错误
JSON.stringify
1、是JSON.parse的逆运算
2、JS数据=>JSON字符串
3、由于JS的数据类型比JSON多，所以不一定能成功
4、如果失败，就抛出一个Error对象