AJAX学习笔记

1. 用XMLHttpRequest发送请求

button.addEventListener('click',function(){
    let request = new XMLHttpRequest()
    request.open('GET','/xxx')
    request.send()
})

2. 用console.time();console.timeEnd()可以计算执行代码的用时。

3. mime type 指的是发送请求的格式

4. 请求的5种状态

[图片上传失败...(image-f78ebd-1553521516463)]

5. 如何查看请求所处的状态

request.readyState // 0，1，2，3，4

6. 监听请求事件的状态码的改变

request.onreadystatechange = function(){
    // 请求事件状态码改变时就执行这段代码
}

7. 如何查看请求的HTTP状态码？

request.staus

8. 如何拿到响应的第四部分的呢？也就是响应体

request.responseText

9. JSON

JSON是一门新的语言。
JSON有string、number、object、array、true、false、null，没有undefined、function
JSON的string必须要用双引号

"yejianqiang"
{"name": "yejianqiang"}
["a","b","c"]
{
    "note":{
        "to": "小谷",
        "from": "方方",
        "heading": "打招呼",
        "content": "hi"
    }
}

10. 把符合JSON语法的字符串转换为JS对应的值

let string = request.responseText
let object = window.JSON.parse(string)

11. CORS:跨资源共享

// 在ajax实现CORS，在server.js上加上一句
response.setHeader('Access-Control-Allow-Orign','http://yjq.com:8001')
// 意思是允许yjq.com：8001允许它可以使用ajax来发送请求
response.setHeader('Access-Control-Allow-Orign','*')
// 给所有网站允许跨域请求

12. AJAX是什么？

通过JavaScript异步通信，从服务器获取XML文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个页面。后来ajax就成了JavaScript脚本发起HTTP通信的代名词，也就是说，只要用脚本发起通信，就可以叫做ajax通信。
具体来说，ajax包括以下几个步骤：
1. 创建XMLHttpRequest实例
2. 发出HTTP请求
3. 接收服务器传回的数据
4. 更新网页数据
只有协议、端口、域名一模一样才允许发ajax请求

 button.addEventListener('click',function(){
            let request = new XMLHttpRequest()
            request.open('GET','/xxx')
            request.send()
            request.onreadystatechange = function(){
                if(request.readyState === 4){
                    // 请求的状态码为4
                    if(request.status >= 200 && request.status < 300){
                        let string = request.responseText
                        let object = window.JSON.parse(string)
                        console.log(object.note.name)
                    }else if(request.status >= 300){
                        console.log("请求失败")
                    }
                }
            }
            
        })