【AJAX学习笔记二】ajax的get请求

AJAX的get 请求

实现一个简单的ajax的get 请求
当我们点击按钮时可以在文本框内显示我们从后端获取到的数据

#box {
      width: 200px;
      height: 200px;
      border: solid 1px red;
    }

2、HTML代码

&lt;button&gt;点击按钮&lt;/button&gt;
&lt;div id="box"&gt;&lt;/div&gt;

3、JS代码

on ready state change 方法是状态修改一次他就调用一次。

ready stat e有五种状态：分别是01234
0：未初始化
1：open 方法调用完毕
2：send 方法已经调用完毕
3：服务端返回的部分结果
4：服务端返回的全部结果

const btn = document.getElementsByTagName('button')[0];///获取button
    const box = document.getElementById("box");///获取box
    // console.log(btn);
    btn.onclick = function () {
      //1、创建对象
      const xhr = new XMLHttpRequest();
      //2、初始化，设置请求方法和URL
      xhr.open('GET', 'http://127.0.0.1:8000/server');
      //3、发送请求
      xhr.send();
      //4、绑定事件 处理客户端返回的结果
      //存在五个状态
      xhr.onreadystatechange = function () {
        ///判断服务器端是否返回了全部的结果
        if (xhr.readyState === 4) {
          ///判断状态响应码
          if (xhr.status &gt;= 200 &amp;&amp; xhr.status < 300) {
            box.innerHTML = xhr.response;
          }
        }
      }
    }

二、服务器端

///1、引入express
const express = require('express');

///2、创建应用对象
const app = express();

///3、创建路由规则
///request 是对请求报文的封装
///response 是对响应报文的封装
app.get('/server', (request, response) =&gt; {
  //设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应体
  response.send('HELLO AJAX');
});

///4、监听端口启动服务
app.listen(8000, () =&gt; {
  console.log("服务已经启动，正在监听8000端口...")
});