本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1、XML简介

XML和HTML相似，不同的是HTML中都是预定义标签，而XML中都是自定义标签，用来表示数据

如

<student>
  <name>张三</name>
  <age>18</age>
  </studengt>

2、HTTP协议

2.1请求报文

格式：

行 POST / s?ie=utf8(url) http/1.1(http版本)

头 Host： atguigu.com

Cookie: name=guigu

Content-type: application/x-www-form-urlencoded

User-agent: chrome 83

空行

体 username=admin&password=admin

ps：get请求不需要体，post请求可以有可以没有

2.2 响应报文

格式：

行 HTTP/1.1(http版本) 200(响应状态码) ok(响应状态字符串)

头对响应体进行一些描述，如：

Content-Type:text/html;

charset=utf-8

Content-length:2048

Content-encoding:gzip

空行

体主要返回内容，如：

111

3、express框架的简单使用

// 引入express
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则
// request对请求报文进行封装，response对响应报文进行封装
app.get('/',(request,response)=>{
  // 设置响应
  response.send('hello express');
});
// 监听端口启动服务
app.listen(8080,()=>{
  console.log('服务已启动，8080端口监听中');
})

4、ajax的基本操作

let btn = document.getElementsByTagName('button')[0];
let result = document.getElementById('result');
      btn.addEventListener('click',function(){
        //  1、创建对象
        const xhr = new XMLHttpRequest();
        //   2、初始化，设置请求方法和url
        xhr.open('GET','http://127.0.0.1:8000/server')
        // 3、发送
        xhr.send();
        // 4、事件绑定 处理服务器返回的结果
        // readystate是xhr对象中的属性，表示状态0 1 2 3 4
        // change 状态改变
        xhr.onreadystatechange = function(){
            // 判断（4表示服务端返回了所有的结果，3表示返回了部分结果）
            if(xhr.readyState === 4){
                // 判断（响应状态码）
                // 2xx成功
                if(xhr.status>=200&&xhr.status<=300){
                    // 处理结果 行 头 空行 体
                    console.log(xhr.status);//状态码
                    console.log(xhr.statusText);//状态字符串
                    console.log(xhr.getAllResponseHeaders());//所有的响应头
                    console.log(xhr.response);//响应体
                    result.innerHTML = xhr.response;
                }else{
                    return;
                }
            }
        }

      })

AJAX学习笔记