Ajax回顾

get请求的体为空

• 先终端打开express, node 服务.js
  服务.js

  //引入express
  const { response, request } = require('express');
  const express = require('express');
  //创建对象  
  const app = express();
  //创建url路径  
  app.get('/service',(request,response)=>{
       response.setHeader('Access-Control-Allow-Origin','*')
      //设置响应  
      response.send('hello express');
  });
  //创建url路径  
  app.post('/service',(request,response)=>{
      response.setHeader('Access-Control-Allow-Origin','*')
     //设置响应  
     response.send('hello npmmon');
  });
  //监听端口 
  app.listen(8000,()=>{
      console.log("8000端口服务已经启动。。。。。")
  })

  前端代码

  <script>
        window.onload=function(){
        //获取button节点
        const btn = document.getElementsByTagName('button')[0];
        const text = document.getElementById('text')
        //绑定点击事件  
        btn.onclick = function(){
            //创建对象  
            const xhr = new XMLHttpRequest()
            //初始化，设置请求方法 和 url
            xhr.open('GET','http://127.0.0.1:8000/service')
            //发送  
            xhr.send()
            //事件绑定 处理服务端返回结果 
            xhr.onreadystatechange = function(){
                //readyState是xhr中的属性 表示状态0 1 2 3 4 
                if(xhr.readyState == 4){
                    //status是状态码2XX就是成功
                    if(xhr.status >= 200 & xhr.status < 300){
                        //处理结果 行 头 空行 体  
                        //1.响应行 
                        console.log(xhr.status) 
                        console.log(xhr.statusText)
                        console.log(xhr.getAllResponseHeaders)
                        console.log(xhr.response)
                       text.innerHTML=xhr.response
                    }
                }
            }
        }
    }
    </script>

ajax返回的状态

• 0 未初始化 还没有调用send()方法
• 1 载入 send() 正在发送中
• 2 载入完成 send()完成
• 3交互 正在解析响应
• 4 完成