AJAX的原理

背景

• AJAX是浏览器上的功能
• 浏览器可以发请求，收响应
• 浏览器构建了一个全局函数，在window上构建了一个 XMLHttpRequest函数
• JS通过它发请求收响应

一个自动重启代码的工具 node-dev

安装命令

yarn global add node-dev
//或者
npm install -g node-dev

运行

Usage
Just run node-dev as you would normally run node:
node-dev server.js

加载步骤

• 准备一个服务器
  代码在node-damo1，是最开始的代码
• 添加路由
  用if else判断路径，解析对应的字符串，HTML文件也是一串字符。
• 加载css/js进入页面
  1.（服务器+页面引用）可以用在HTML页面加引用链接，在在路由指定路径解析相对应的css文件字符串

  //在HTML加
  <link rel="stylesheet" href="style.css">
  //在服务器路由上加
  else if (path==='/style.css'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    const string3=fs.readFileSync('public/style.css')
    response.write(string3)
    response.end()
  }

  2.（用JS）在用JS来添加css文件
  创建一个HttpRequest

  const request=new XMLHttpRequest()

  调用对象的open方法

  request.open('get','/style.css')

  监听对象的onload和onerror事件

  request.onload=()=>{
  console.log('请求成功了')
  const style=ducoment.createElement(style)
  style.innerHtml(request.response)
  document.head.appendChild(style)
  }

  调用对象的send方法

  request.send()

  onload和onerror的代替函数

  onreadystatechange有状态码，关于加载到哪一步，
  new XMLHttpRequest request.readyState=0
  open request.readyState=1
  下载完成获得路径 request.readyState=2
  send request.readyState=3
  下载完成不一定对应到对的路径
  在判断下载完成后要判断对应状态码，200-300是正常
  4开头的就有问题

  request.onreadystatechange=()=>{
        //
        if(request.readyState>200 && request.readyState<300){
            //创建一个div标签
        const div=document.createElement('div')
        //将获取来的内容写入div标签
        div.innerHTML=request.response
        //将标签插入HTML中
        document.body.appendChild(div)
        }else{
            alert('请求2.html失败')
        }
    }