Ajax原理可以装HTML，CSS，JS，XML...

Ajax是用来前后端分离的一种，它的全称是Asynchronous Javascript And XML，其作用是用JS发请求和收响应

背景

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

实例

server.js

首先准备一个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)

index.html路由

写index.html路由，路由就是if else

index.html

response.write(`
<!DOCTYPE>
<html>
<head><title>AJAX</title></head>
<body>
    <h1>AJAX demo1</h1>
</body>
</html>
`)

main.js路由

else if (path === '/main.js') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
        response.write(`console.log('主要js')`)
        response.end()
    }

合并路由

<!DOCTYPE>
<html>
<head><title>AJAX</title></head>
<body>
    <h1>AJAX demo1</h1>
<script src='main.js'></script>
</body>
</html>

简化response.write(‘字符串’)

文件转字符串fs.readFileSync(‘public/index.html’)

const string = fs.readFileSync('public/index.html')
response.write(string)

Ajax 加载 CSS/HTML/JS

四个步骤

创建HttpRequest对象（全称是XMLHTttpRequest）
调用对象的open方法
监听对象的onload和onerror事件
- 专业前端会改用onreadystatechange事件
调用对象的send方法

getCSS.onclick = () => {
    const request = new XMLHttpRequest();//第一步：创造新的对象
    request.open('GET', '/style.css')//第二步：实现对象open()方法，初始化请求
    request.onload = () => {//第三步，对象监听事件
        console.log('成功')
        console.log(request.response)
        //创建style标签
        const style = document.createElement('style')
        //style插入内容
        style.innerHTML = request.response
        //把style插入头部
        document.head.appendChild(style)
    }
    request.onerror = () => {
        console.log('失败')
    }
    request.send() //第四步：调用对象send方法，发送 HTTP 请求
}

onreadystatechange事件

由于onload和onerror功能不够，发生错误时会把404页面渲染出来

.readyState属性代表的是请求的状态

0 代表被创建(const request = new XMLHttpRequest())

1代表已打开open(.open)

2代表响应头已接收send(.send)

3 代表浏览器开始下载(第一个信息出现在浏览器（开始下载）)

4 浏览器下载完毕（下载完）

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

小结

HTTP是个框，什么都能往里装

可以装HTML，CSS，JS，XML...
记得使用正确的Content-Type

解析方法

得到CSS之后生产style标签
得到JS之后生产script标签
得到HTML之后使用 innerHtml 和 DOM API
得到XML之后使用 responseXML 和 DOM API
不同类型的数据有不同类型的解析决方法

JSON

中文官网

JSON全称JavaScript Object Notation（JS对象标记语言），JSON是一门标记语言，不是一个对象，跟Makedown,Xml，Html一样，用来展示数据

JSON支持的数据类型

string（只支持双引号）
number
bool
null
objec
array
不支持函数，不支持变量