Web 应用基础

HTTP GET

典型的 HTTP GET 流程，F12 --> Network 查看：

Event Handler and Callback Function

var xhttp = new XMLHttpRequest()
  
xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    const data = JSON.parse(this.responseText)
    console.log(data)

    var ul = document.createElement('ul')
    ul.setAttribute('class', 'notes')

    data.forEach(function(note){
      var li = document.createElement('li')
      ul.appendChild(li);
      li.appendChild(document.createTextNode(note.content))
    })

    document.getElementById("notes").appendChild(ul)
  }
}

xhttp.open("GET", "/exampleapp/data.json", true)
xhttp.send()

把发送到服务器的请求（GET data）放在了最后一行，但是处理响应的代码却在上面定义了。

onreadystatechange 是一个 事件处理器 Event Handler ，当请求状态改变时调用此函数 —— “回调函数”。代码本身不调用它，而是由浏览器在请求完成时自动调用。这个例子里，readyState 和 status 是对 data.json 的响应（200 OK 完成握手，readyState 4 数据已接收完毕）。

DOM

文档对象模型 Document Object Model(DOM) 是一个 API，对网页元素树进行程序化修改。

上一节的 js 代码就是用 DOM-API；同样可以在 console 中直接输入 js 代码来操作 DOM。

var ul = document.createElement('ul')
// 为 ul 创建列表元素
data.forEach(function(note){ 
  var li = document.createElement('li') 
  ul.appendChild(li);                 
  li.appendChild(document.createTextNode(note.content))
})
// 把 ul 子树连接到整个页面的 HTML 树上
document.getElementById("notes").appendChild(ul)

这里的 document 是 HTML 文档最顶端的节点。在 console 中输入 document 可以访问整个 DOM 树。