Async Javascript And XML
说简单点，就是用 JS 发请求和收响应

AJAX 是浏览器上的功能

浏览器可以发请求，收响应
浏览器在 window 上加了一个 XMLHttpRequest 函数
用这个构造函数（类）可以构造出一个对象
JS 通过它实现发请求，收响应

安装node dev

npm install -g node-dev

使用

node-dev server.js 8888

使用 server.js 作为服务器

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]
if(!port){
  console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
  process.exit(1)
}
var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url 
  var queryString = ''
  if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method
  /******** 从这里开始看，上面不要看 ************/
  console.log('有个傻子发请求过来啦！路径（带查询参数）为：' + pathWithQuery)
  if(path === '/'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`二哈`)
    response.end()
  } else if(path === '/x'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(`body{color: red;}`)
    response.end()
  } else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`你输入的路径不存在对应的内容`)
    response.end()
  }
  /******** 代码结束，下面不要看 ************/
})
server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)

使用 node-dev server.js 8888启动

用AJAX加载CSS

四个步骤：

getCSS.onclick = ()=>{
    const request = new XMLHttpRequest()
    request.open('GET', '/style.css')
    request.onload = ()=>{
        console.log('成功了')
        console.log('request.response')
        console.log(request.response)
        // 创建 style 标签
        const style = document.createElement('style')
        // 填写 style 内容
        style.innerHTML = request.response
        // 查到头里面
        document.head.appendChild(style)
    }
    request.onerror = ()=>{
        console.log('失败了')
    }
    request.send()
}

用AJAX加载JS

getJS.onclick = () => {
  const request = new XMLHttpRequest()
  request.open('GET', '/2.js')
  request.onload = () => {
    // 创建 script 标签
    const script = document.createElement('script')
    // 填写 script 标签
    script.innerHTML = request.response
    // 插到 body 里
    document.body.appendChild(script)
  }
  request.onerror = () => {}
  request.send()
}

用AJAX加载HTML

getHTML.onclick = () => {
  const request = new XMLHttpRequest()
  request.open('GET', '/3.html')
  request.onload = () => {
    const div = document.createElement('div')
    div.innerHTML = request.response
    document.body.appendChild(div)
  }
  request.onerror = () => {}
  request.send()
}

使用 onreadystatechang 代替 onload onerror

getCSS.onclick = () => {
  const request = new XMLHttpRequest()
  request.open('GET', '/style.css')

  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status <= 300) {
        // 创建 style 标签
        const style = document.createElement('style')
        // 填写 style 内容
        style.innerHTML = request.response
        // 查到头里面
        document.head.appendChild(style)
      } else {
        alert(('加载 CSS 失败'))
      }
    }
  }
  request.send()
}

用AJAX加载XML

getXML.onclick = ()=>{
  const request = new XMLHttpRequest()
  request.open('GET', '/4.xml')
  request.onreadystatechange = ()=>{
    if(request.readyState === 4){
      const dom = request.responseXML
      const text = dom.getElementsByTagName('warning')[0].textContent
      console.log(text.trim())
    }
  }
  request.send()
}