Async JavaScript And XML： 用JS发请求和收响应

一、背景

1、AJAX是浏览器上的功能

• 浏览器可以发请求，收响应，如何实现？
• 在window上加了一个XMLHttpRequest函数
• 这是一个构造函数，可以构造出一个对象
• JS可以通过它实现发请求，收响应

2、准备一个服务器

• 用server.js作为服务器（代码链接放文末）
• 在终端用node server.js 8888启动（为了方便改代码更新网页更快，可用node-dev）
• 添加index.html和main.js两个路由

二、使用

1、使用步骤

1. 创建HttpSequest对象
2. 调用对象的open方法
3. 监听对象的onload和onerror事件/onreadystatechange事件
4. 调用对象的send方法

2、示例

2.1、加载JS（用onload和onerror）

getJS.onclick=()=>{
    const request=new XMLHttpRequest() //创建HttpSequest对象
    request.open('GET','/2.js') //调用对象的open方法
    request.onload=()=>{ //监听对象的onload事件
        //创建script标签
        const script=document.createElement('script')
        //填写script内容
        script.innerHTML=request.response
        //插入body里
        document.body.appendChild(script)
    }
    request.onerror=()=>{} //监听对象的onerror事件
    request.send() //调用对象的send方法
}

2.2、加载HTML（用onload和onerror）

getHTML.onclick=()=>{
    const request=new XMLHttpRequest()
    request.open('GET','/3.html')
    request.onload=()=>{
        //创建div
        const div=document.createElement('div')
        //填写div内容
        div.innerHTML=request.response
        //插入body里
        document.body.appendChild(div)
    }
    request.onerror=()=>{}
    request.send()
}

2.3、onreadystatechange事件

• 在实际应用中，onload和onerror功能不够，所以要使用onreadystatechange
• 当readyState属性发生改变时触发
• 一个请求的“一生”，可用readyState状态码表示

0. 0——const request=new XMLHttpRequest()
1. 1——request.open('GET','/2.js')
2. 2——request.send()
3. 3——开始下载，当第一个信息出现在浏览器
4. 4——下载完成

2.4、加载CSS（用onreadystatechange)

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
                //插入head里
                document.head.appendChild(style)
            }else{
                alert('加载CSS失败')
            }  
        }       
    }
    request.send()
}

2.5、加载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 //说明是一个dom对象
            const text=dom.getElementsByTagName('warning')[0].textContent
            console.log(text.trim())
        }
    }
    request.send()
}

2.6、总结：HTTP是个筐，什么都能往里装

• 可以装CSS、JS、HTML、XML......
• 记得在server.js上添加路由时设置正确的Content-Type
• 只要知道如何解析，就可使用这些内容
• 不同数据类型，有不同的解析方法

1. CSS——生成style标签
2. JS——生成script标签
3. HTML——使用innerHTML和DOM API
4. XML——使用responseXML和DOM API

三、JSON

1、JavaScript Object Notation

• JS对象标记语言

2、JSON支持的数据类型

• string——只支持双引号
• number
• bool
• null——没有undefined
• object
• array
• 不支持函数、不支持变量（所以也不支持引用）
• 加粗部分为，与JS的区别

3、加载JSON

• 只是解析方式不同，使用JSON.parse，把符合JSON语法的字符串变成对应的对象/其他

getJSON.onclick=()=>{
    const request=new XMLHttpRequest()
    request.open('GET','/5.json')
    request.onreadystatechange=()=>{
        if(request.readyState===4&&request.status===200){
            console.log(request.response)
            const object=JSON.parse(request.response) //把符合JSON语法的字符串变成对应的对象或其他
            console.log(object)
            myName.textContent=object.name //可用于页面欢迎XXX，这类技术就是使用AJAX请求来的
        }
    }
    request.send()
}

4、window.JSON

4.1、JSON.parse（JSON字符串->JS数据）

• 将符合JSON语法的字符串转换成JS对应类型的数据
• 如果不符合JSON语法，会抛出一个Error对象
• 一般用try catch捕获错误

4.2、JSON.stringfy（JS数据->JSON字符串）

• 是JSON.parse的逆运算
• 如果失败，抛出一个Error对象

四、代码链接

https://github.com/lanzifang/AJAX-1