什么是AJAX？

• Async JavaScript And XML，意为异步JS与XML（但是目前我们一般会用JSON代替XML）

• 简单来说，就是用JS发请求和收响应

• AJAX是浏览器是功能，主要用于在不刷新页面的情况下，向浏览器发起请求并接受响应，最后局部更新页面

• 浏览器在window上加了一个XMLHttpRequest函数

• 用这个构造函数可以构造出一个对象

• JS就是通过它实现发请求和收响应

四个步骤

我们把JS发起一个AJAX请求分为四步：

1. 创建HttpRequest对象

 let request = new XMLHttpRequest()

2. 调用对象的open方法

  request.open('GET','/1.json')

3. 监听请求成功或失败后的状态变化

 if(request.readyState === 4){
            if(request.status>=200&&request.status<300){
                //执行成功
                  console.log(request.response)
                }else{
                    //执行失败
                    alert('加载CSS失败')
                }

            }

4. 发送请求

request.send()

为了更加清晰的理解这四个步骤，我们需要先了解一个请求的一生是怎样的

一个请求的一生

请求阶段	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')//readyState = 1
    request.onreadystatechange = () =>{
        if(request.readyState === 4){
            //下载完成，但不知道是成功还是失败，一般200到300之间代表成功
            if(request.status>=200&&request.status<300){    
                //创建style标签
                const style = document.createElement('style')
                //填写style内容
                style.innerHTML = request.response
                //插到HTML的head里
                document.head.appendChild(style)
                }else{
                    alert('加载CSS失败')
                }

            }
        };
        request.send();//readyState = 2
    };

我们在下载完成并成功之后，创建style标签，填写标签内容，标签插入到HTML中，就可以完成CSS的加载

加载JS

getJS.onclick = () =>{
    const request = new XMLHttpRequest()
    request.open('GET','/2.js')
    request.onreadystatechange = () =>{
        if(request.readyState === 4){
            if(request.status>=200&&request.status<300){    
            // 创建script标签
            const script = document.createElement('script')
            //填写script内容
            script.innerHTML = request.response
            //插到HTML的body里
            document.body.appendChild(script)
                }else{
                    alert('加载JS失败')
                }
            }
        };
        request.send();//readyState = 2
    };

原理与CSS相同，只不过把style标签换成了script标签

加载HTML

getHTML.onclick = () =>{
    const request = new XMLHttpRequest()
    request.open('GET','/3.html')
    request.onreadystatechange = () =>{
        if(request.readyState === 4){
            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

getXML.onclick = () =>{
    const request = new XMLHttpRequest()
    request.open('GET','/4.xml')
    request.onreadystatechange = () =>{
        if(request.readyState === 4 && request.status ===200){  
            const dom = request.responseXML
            const text = dom.getElementsByTagName('warning')[0].textContent//getElementsByTagName获取到的是一个伪数组
            console.log(text.trim())//.trim()消除回车
            }
        };
    request.send();
} 

注意，这里有一个特殊属性responseXML，可以自动把信息变成一个DOM对象

加载JSON

getJSON.onclick = () =>{
    const request = new XMLHttpRequest()
    request.open('GET','/5.json')
    request.onreadystatechange = () =>{
        if(request.readyState === 4 && request.status ===200){
            //JSON.parse()把符合JSON语法的字符串，变成JS对应类型的数据
            console.log(request.response)  
            const object = JSON.parse(request.response)
            myName.textContent = object.name
            }
        };
    request.send();
} 

JSON简介

• JSON是一门标记语言，用来展示数据
• 一页纸搞懂JSON
• 支持的数据类型
  • string 只支持双引号，不支持单引号和无引号
  • number 支持科学计数法
  • bool
  • null
  • object
  • array
• 就这六种，不支持函数，不支持变量

window.JSON

这是一个全局变量，含有两个方法

JSON.parse

• 将符合JSON语法的字符串转换成JS对应类型的数据
  • JSON字符串 ->JS数据
• 由于JSON只有六种类型，所以转成的数据也只有6种
• 如果不符合JSON语法，则直接抛出一个Error对象

JSON.stringify

• 是JSON.parse的逆运算
  • JS数据->JSON字符串
• 由于JS的数据类型比JSON多，所以不一定能成功
• 如果失败，就抛出一个Error对象