AJAX和JSON

浏览器和服务器之间，是通过HTTP协议通信的，那么如何发出一个HTTP请求呢，有以下几种方法：

方式	请求	缺点
form	get/post	会刷新或新打开一个页面
a标签	get	会刷新或新打开一个页面
img标签	get	只能以图片形式展现
link标签	get	只能以css或favicon形式展现
script标签	get	只能以脚本形式运行

以上方法要么就只能以get方式发出请求，要么就会刷新页面，那如何能够使用两种方式请求又不会刷新页面呢？那就是AJAX

AJAX（Asynchronous JavaScript And XML）指的是通过JavaScript的异步通信，从服务器中获取数据，再更新当前页面部分，不用刷新整个网页
包括以下四个步骤：

1. 创建XMLHttpRequest实例对象
2. 发出HTTP请求
3. 服务器返回数据
4. 解析并更新局部页面

用法：
XMLHttpRequest是一个构造函数，可以使用new命令生成实例对象：
let request= new XMLHttpRequest()
生成实例之后可以使用open()方法发送请求，参数必须包括请求方式和URL：
request.open('GET', '/xxx')
通过send()方法发送数据，参数可以为空：
request.send(data)
我们需要监听通信状态，通过readyState属性，一旦状态变化就会触发readystatechange事件：
request.onreadystatechange = function () {}

完整的写法：

    let request = new XMLHttpRequest()
    request.open('get', '/xxx')
    request.send()
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                console.log('请求成功')
                console.log(request.responseText)
            } else {
                console.log('请求失败')
            }
        }
    }

XMLHttpRequest实例属性

readyState
onreadystatechange
response
responseType
responseText
responseXML
responseURL
status
statusText

XMLHttpRequest实例方法

open()
send()
setRequestHeader()
getResponseHeader()
getAllResponseHeaders()
abort()

注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。
跨域解决方案：CORS（Cross-Origin Resource sharing 跨源资源分享）

JSON

现在，服务器返回的大多是 JSON 格式的数据，很少使用 XML 格式。JSON是一门语言，是一种轻量级的数据交换格式。
JSON模仿了JS的数据类型与结构，其中数据类型没有function和undefined，其它的与JS一样。结构包括两种：无序的“键/值”对的集合（类似对象），值的有序列表（类似数组）

    response.setHeader('content-Type', 'text/json;charset=utf-8')
    response.end(`
    {
      "note":{
        "to": "A",
        "from": "B",
        "heading": "打招呼",
        "content": "hi"
      }
    }
    `)

注意：JSON中的string类型必须用双引号括起来
JSON.parse() 用于将符合JSON语法的字符串转换为JS中的对象