Ajax

Ajax(Async Javascript And XML)是浏览器上的功能
浏览器可以发请求、收响应
浏览器在window上加了一个XMLHttpRequest函数，用这个构造函数可以构造出一个对象，Js通过它实现发请求、收响应。
创建Ajax的步骤如下:

创建HttpRequest对象
调用对象的open方法
监听对象的onreadystatechange事件
调用对象的send方法我们通过实战来练习一下。

实战:加载css

首先，我们需要一个服务器，我选择用node语言编写服务器内容。node的内容如下:

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

  console.log('有发请求人过来啦！路径（带查询参数）为：' + pathWithQuery)

  if(path === '/'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`hello`)
    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请访问 http://localhost:' + port)

通过命令node server.js 8888启动服务器。
其次,添加index.html和main.js两个路由
文件的目录结构如下:

index.html文件内容如下:

  <!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello</h1>
    <button id="getCSS">获取css</button>
    <script src="main.js"></script>
</body>
</html>

style.css文件内容如下:

h1{
    color: red;
}

修改后的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

  console.log('有发请求人过来啦！路径（带查询参数）为：' + pathWithQuery)

  if(path === '/index.html'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(fs.readFileSync('index.html'))
    response.end()
  } else if(path === '/main.js'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/js;charset=utf-8')
    response.write(fs.readFileSync('main.js'))
    response.end()
  }else if(path==='/style.css'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(fs.readFileSync('style.css'))
    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请访问 http://localhost:' + port)

接下来，我们通过编写main.js加载css

getCSS.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/style.css");
  request.onreadystatechange = () => {
    if (request.readyState === 4 && request.status === 200) {
      const style = document.createElement("style");
      style.innerHTML = request.response;
      document.head.appendChild(style);
    }
  };
  request.send();
};

最后成功的结果如下:

JSON

JSON跟HTML、CSS、XML、JS一样，是一门语言。
JSON非编程语言，是标记语言，与HTML、XML、Markdown一样，用来展示数据。

JSON支持的数据类型

string——只支持双引号，不支持单引号和无引号
number——支持科学计数法
null——没有undefined
bool
object
array json只支持以上六种数据类型(不支持函数，不支持变量，也不支持引用)，注意跟js的七种数据类型区分开来。

JSON.parse

将符合JSON语法的字符串转换成JS对应类型的数据（JSON字符串=>js数据）
由于JSON只有六种类型，所以转成的数据也只有六种。

JSON.stringify

是JSON.parse的逆运算(js数据=>JSON字符串)
由于js的数据类型比JSON多，所以不一定能成功。

Ajax知识总结