从零实现XMLhttpRequest

最新推荐文章于 2023-06-11 16:33:12 发布
最新推荐文章于 2023-06-11 16:33:12 发布
阅读量3.4k 收藏 6
点赞数 2
分类专栏： 笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin_fightin/article/details/124076539
版权

HTTP/IP

  • HTTP/IP协议被称为传输控制协议/互联网协议，又称为网络通讯协议
创建服务器
const http = require("http");
const fs = require("fs");
const path = require("path");
const { Buffer } = require("buffer");
const url = require("url");

const server = http.createServer((req, res) => {
  console.log("req.url", req.url);
  if (req.url === "/get.html") {
    res.statusCode = 200;
    res.setHeader("Content-Type", "text/html");
    const read = fs.createReadStream("./static/get.html");
    read.on("data", (chunk) => {
      res.write(chunk); //写入响应
    });
    read.on("end", () => {
      res.end(); //结束响应
    });
  } else if (req.url === '/get'){
      res.statusCode = 200
      res.end('get')
  } else {
    res.statusCode = 404;
    res.end();
  }
});
server.listen(8000);

发起请求
在这里插入图片描述

在这里插入图片描述

  • 从上到下依旧是物理层，数据链路层，网络层，传输层和应用层。
  • get请求具体信息
    在这里插入图片描述
  • 响应体具体信息
    在这里插入图片描述
    都是以\r\n结尾。
实现XHMHttpRequest
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  console.log("onreadystatechange", xhr.readyState);
};

xhr.open("GET", "http://127.0.0.1:8000/get");
xhr.responseType = "text";
xhr.setRequestHeader("name", "lin");
xhr.setRequestHeader("age", "11");
xhr.onload = () => {
  console.log("readState", xhr.readyState);
  console.log("status", xhr.status);
  console.log("statusText", xhr.statusText);
  console.log("getAllResponseHeaders", xhr.getAllResponseHeaders());
  console.log("response", xhr.response);
};
xhr.send();

实现XMLHttpRequest

const net = require("net"); //传输层 TCP
const urlParse = require("url");
const xhrReadState = {
  UNSENT: 0, //未调用open
  OPENED: 1, //open已经被调用
  HEADERS_RECEIVER: 2, //send已经被调用，并且头部和状态已经获取
  LOADING: 3, // 下载中，respnseText属性已经包括部分数据
  DONE: 4, //下载操作已完成
};
class XMLHttpRequest {
  constructor() {
    this.readyState = xhrReadState.UNSENT;
    this.headers = {
      Connection: "keep-alive",
    };
    this.method = "GET";
  }

  open(method, url) {
    this.readyState = xhrReadState.OPENED;
    this.onreadystatechange && this.onreadystatechange()
    this.method = method;
    this.url = url;
    const { hostname, port, path } = urlParse.parse(url);
    this.hostname = hostname;
    this.path = path;
    this.port = port;
    this.headers["Host"] = `${hostname}:${port}`;

    // 通过传输层的net模块创建TCP连接
    this.socket = net.createConnection(
      {
        host: hostname,
        port,
      },
      () => {
        //连接成功回调函数
        this.socket.on("data", (data) => {
          data = data.toString();
          // 处理响应体
          /**
            响应体数据如下:
            data HTTP/1.1 200 OK
            Date: Sun, 10 Apr 2022 05:54:20 GMT
            Connection: keep-alive
            Keep-Alive: timeout=5
            Content-Length: 3

            get 
           */
          const [response, bodyRows] = data.split("\r\n\r\n");
          const [statusLine, ...headerRows] = response.split("\r\n");
          // 处理响应头
          const [, status, statusText] = statusLine.split(" ");
          this.status = status;
          this.statusText = statusText;
          this.responseHeaders = headerRows.reduce((pre, item) => {
            let [key, value] = item.split(": ");
            pre[key] = value;
            return pre;
          }, {});
          this.readyState = xhrReadState.HEADERS_RECEIVER;
          this.onreadystatechange && this.onreadystatechange()
          //处理响应体
          const [body] = bodyRows.split("\r\n");
          this.readyState = xhrReadState.LOADING;
          this.onreadystatechange && this.onreadystatechange()
          this.response = this.reponseText = body;
          this.readyState = xhrReadState.DONE;
          this.onreadystatechange && this.onreadystatechange()
          this.onload && this.onload();
        });
      }
    );
  }

  setRequestHeader(header, value) {
    this.headers[header] = value;
  }

  getAllResponseHeaders() {
    return this.responseHeaders;
  }

  //发送请求
  send() {
    //拼接请求头
    /**
     * GET /get HTTP/1.1
     * Host: 127.0.0.1:8080
     * Contention: keep-alive
     * name: lin
     * age: 11
     */
    const rows = [];
    rows.push(`${this.method} ${this.url} HTTP/1.1`);
    // 请求头拼接
    rows.push(
      ...Object.keys(this.headers).map((item) => {
        return `${item}: ${this.headers[item]}`;
      })
    );
    //请求体拼接完毕
    const request = rows.join("\r\n") + "\r\n\r\n";

    //发送
    this.socket.write(request);
  }
}

借助net模块创建TCP连接，自己封装请求头和处理响应头。

通过net模块创建TCP服务

上面的例子是直接通过http模块创建了一个服务，http模块也是基于net模块的，这次直接使用net模块创建一个Tcp服务，最主要的区别就是需要自己处理请求体和创建响应体。

//借助net模块创建tcp服务器, http模块也是基于net模块的
const net = require("net");

//每当有客户端来连接了，就会为它创建一个sokcer
const server = net.createServer((socker) => {
  socker.on("data", (data) => {
    // 处理请求体
    const request = data.toString(); // 请求体
    const [requestLine, ...headerRows] = request
      .split("\r\n")
      .filter((item) => item);
    const [method, url] = requestLine.split(" ");
    //请求头
    const headers = headerRows.reduce((pre, item) => {
      const [key, value] = item.split(": ");
      pre[key] = value;
      return pre;
    }, {});
    console.log("headers----\r\n", headers);
    //创建响应数据
    const rows = [];
    rows.push("HTTP/1.1 200 OK");
    rows.push("Content-Type: text/plain");
    rows.push(`Data: ${new Date().toString()}`);
    rows.push("Connection: keep-alive");
    rows.push("Transfer-Enconding: chunked");
    const body = "get";
    rows.push(`Content-Length: ${Buffer.byteLength(body)}`); //返回长度
    rows.push(`\r\n${Buffer.byteLength(body).toString(16)}\r\n${body}\r\n0`); //请求体
    const response = rows.join("\r\n");
    console.log('response----\r\n',response);
    socker.end(response);
  });
});

server.listen(8000);

如上，主要就是得处理请求体的数据解析，然后创建响应信息，响应头+响应体，返回给客户端。http模块是帮助我们处理对应的请求体和封装响应信息。

  • http模块是实现http协议的模块。
  • net模块是实现tcp协议的模块。
实现post

使用http模块的服务
在这里插入图片描述
在这里插入图片描述
req是一个可读流，编写一个中间件，将请求体的数据直接塞入req.body之中，方便获取。

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  console.log("onreadystatechange", xhr.readyState);
};

xhr.open("POST", "http://127.0.0.1:8000/post");
xhr.responseType = "json";
xhr.setRequestHeader("name", "lin");
xhr.setRequestHeader("age", "11");
xhr.setRequestHeader('Content-Type', "application/json") //指定请求体的类型
xhr.onload = () => {
  console.log("readState", xhr.readyState);
  console.log("status", xhr.status);
  console.log("statusText", xhr.statusText);
  console.log("getAllResponseHeaders", xhr.getAllResponseHeaders());
  console.log("response", xhr.response);
};
xhr.send(JSON.stringify({name: 'lin',age: '11'}));

post请求只需要更改send的方法

  //发送请求
  send(body) {
    //拼接请求头
    /**
     * POST /get HTTP/1.1
     * Host: 127.0.0.1:8080
     * Contention: keep-alive
     * name: lin
     * age: 11
     */
    const rows = [];
    rows.push(`${this.method} ${this.url} HTTP/1.1`);
    if(body){
        this.headers['Content-Length'] = Buffer.byteLength(body)
    }
    // 请求头拼接
    rows.push(
      ...Object.keys(this.headers).map((item) => {
        return `${item}: ${this.headers[item]}`;
      })
    );
    console.log('request',rows);
    //请求体拼接完毕
    const request = rows.join("\r\n") + "\r\n\r\n" + body;

    //发送
    this.socket.write(request);
  }
}

效果：
在这里插入图片描述

通过net模块创建TCP服务处理post请求。

http模块有帮助我们解析请求体，我们需要通过net模块创建tcp连接，自己处理请求体。
post请求的数据传输是通过流式传输，一段一段的。所以真正处理请求头的时候，不能简单使用split来处理。这里采用了状态机的方式
请求体

   POST http://127.0.0.1:8000/post HTTP/1.1\r\n
        Connection: keep-alive\r\n
        Host: 127.0.0.1:8000\r\n
        name: lin\r\n
        age: 11\r\n
        Content-Type: application/json\r\n
        Content-Length: 25\r\n
        \r\n
        {"name":"lin","age":"11"}\r\n

解析器

//LF换行 CR回车 SPACE空格 COLON冒号
const LF = "\n",
  CR = "\r",
  SPACE = " ",
  COLON = ":";
// 状态
let INIT = 0,
  START = 1,
  REQEUST_LINE = 2,
  HEADER_FIELD_START = 3,
  HEADER_FIELD = 4,
  HEADER_VALUE_START = 5,
  HEADER_VALUE = 6,
  BODY = 7;
class Parser {
  // 处理响应体不能使用split,因为数据传输是流式的不连续的，而且可能很大
  constructor() {
    this.state = INIT;
  }

  parse(buffer) {
    let self = this;
    let requestLine = ""; //POST http://127.0.0.1:8000/post HTTP/1.1
    let headers = {}; //  Connection: keep-alive
    let body = ""; //{"name":"lin","age":"11"}
    let i = 0;
    let char = "";
    let headerField = "";
    let headerValue = "";
    this.state = START;
    //开始解析 ,一个一个字符解析
    for (i = 0; i < buffer.length; i++) {
      char = buffer[i];
      switch (this.state) {
        case START: //刚开始，那就得解析请求头了
          this.state = REQEUST_LINE;
          self["requestLineMark"] = i; //纪律请求行开始的索引
        case REQEUST_LINE:
          //直接进来请求头 POST http://127.0.0.1:8000/post HTTP/1.1 \r\n
          if (char === CR) {
            // 等于回车的时候，就表示请求行结束了 POST http://127.0.0.1:8000/post HTTP/1.1 \r
            //从请求行开始的索引开始转为字符串
            requestLine = buffer.slice(self["requestLineMark"], i); // POST http://127.0.0.1:8000/post HTTP/1.1
            break;
          } else if (char === LF) {
            //  POST http://127.0.0.1:8000/post HTTP/1.1 \r\n
            //解析道\n的时候，就要开始解析下一条
            this.state = HEADER_FIELD_START;
          }
          break;
        case HEADER_FIELD_START:
          //开始解析请求头或者是请求体
          if (char === CR) {
            //如果回车后面遇到了换行，那就只能是要开始处理body了 TODO
            this.state = BODY;
            self["bodyMark"] = i + 2; // 加2是因为请求头和请求体之间多了\r\n，两个字符
          } else {
            this.state = HEADER_FIELD; //真正准备开始解析请求头 Connection: keep-alive
            self["headerFieldMak"] = i; //记录索引
          }
          break;
        case HEADER_FIELD:
          if (char === COLON) {
            //Connection:
            //遇到冒号 :
            headerField = buffer.slice(self["headerFieldMak"], i); //Connection
            this.state = HEADER_VALUE_START; //准备读取请求头value了 //keep-alive
          }
          break;
        case HEADER_VALUE_START: //: keep-alive
          if (char === SPACE) {
            // 空格不管
            break;
          }
          self["headerValueMark"] = i; // 标记value索引
          this.state = HEADER_VALUE;
          break;
        case HEADER_VALUE: //真正开始读取 keep-alive\r\n
          if (char === CR) {
            //遇到\r，value读取结束
            headerValue = buffer.slice(self["headerValueMark"], i); //keep-alive
            headers[headerField] = headerValue; //可以赋值headers了.
            headerField = headerValue = ""; //重置全局变量
          } else if (char === LF) {
            //遇到了\n,就是新的请求体了
            this.state = HEADER_FIELD_START;
          }
          break;
      }
    }
    const [method, url] = requestLine.split(" ");
    body = buffer.slice(self["bodyMark"]);
    return { method, url, headers, body };
  }
}

一个字符一个字符去处理。
然后响应数据跟get请求返回是一样的，同一种响应数据

const server = net.createServer((socker) => {
  socker.on("data", (data) => {
    // 处理请求体

    const request = data.toString(); // 请求体
    console.log("request----\r\n", request);
    const { method, url, headers, body } = parser.parse(request);
    console.log("headers----\r\n", headers);
    console.log("method----\r\n", method);
    console.log("url----\r\n", url);
    console.log("body----\r\n", body);
    if (method === "GET") {
     ....
    } else if (method === "POST") {
        const rows = [];
        rows.push("HTTP/1.1 200 OK");
        rows.push("Content-Type: text/plain");
        rows.push(`Data: ${new Date().toString()}`);
        rows.push("Connection: keep-alive");
        rows.push("Transfer-Enconding: chunked");
        rows.push(`Content-Length: ${Buffer.byteLength(body)}`); //返回长度
        rows.push(`\r\n${Buffer.byteLength(body).toString(16)}\r\n${body}\r\n0`); //响应数据
        const response = rows.join("\r\n");
        console.log("response----\r\n", response);
        socker.end(response);
    }
  });
});

拿到body之后直接返回，效果：
在这里插入图片描述
跟使用http模块的后端返回一样
net服务打印结果：

request----
 POST http://127.0.0.1:8000/post HTTP/1.1
Connection: keep-alive
Host: 127.0.0.1:8000
name: lin
age: 11
Content-Type: application/json
Content-Length: 25

{"name":"lin","age":"11"}
headers----
 {
  Connection: 'keep-alive',
  Host: '127.0.0.1:8000',
  name: 'lin',
  age: '11',
  'Content-Type': 'application/json',
  'Content-Length': '25'
}
method----
 POST
url----
 http://127.0.0.1:8000/post
body----
 {"name":"lin","age":"11"}
response----
 HTTP/1.1 200 OK
Content-Type: text/plain
Data: Sun Apr 10 2022 16:18:35 GMT+0800 (中国标准时间)
Connection: keep-alive
Transfer-Enconding: chunked
Content-Length: 25

19
{"name":"lin","age":"11"}
0

从上到下依次是请求体，处理完的headers,处理完的mehtod，处理完的url，处理完的body，以及响应体数据。

coderlin_
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
xmlhttprequest写文件_jsonserver + XMLHttpRequest—数据通信初体验
weixin_34509196的博客
01-24 337
点击上方蓝字关注我们文章大概需要阅读 10分钟哦\(^o^)/~在这里插入图片描述准备工作工具：VS CodePostman初始化：先创建一个文件page1、json-server1.1json-server介绍一个在前端本地运行，可以存储json数据的server:可以模拟请求以及请求回来的过程1.2 使用1、在page目录下使用npm init -y初始化项目 此时在page目录下...
怎么实现XMLHttpRequest
lovermeiy的博客
12-11 2347
    消息队列和主线程循环机制保证了页面有条不紊地运行。     异步回调是指回调函数在主函数之外执行，一般有两种方式：     第一种是把异步函数做成一个任务，添加到信息队列尾部；     第二种是把异步函数添加到微任务队列中，这样就可以在当前任务的末尾处执行微任务了。 XMLHttpRequest 运作机制 function GetWebData(URL){ /** * 1:新建XMLHttpRequest请求对象 */ let xhr = new XMLHtt
使用 JavaScript 实现 XMLHttpRequest,在IE,FireFox 上测试通过！
微笑的黄捷
05-25 2636
XMLHttp 方式实现无刷屏,在IE,FireFox 上测试通过  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">html {background-color:#eeeeee}body {      background-color:#ccffcc;      font-family:Tahoma,Arial,Helvetic
XMLHttpRequest是怎么实现的
浮游的博客
08-25 603
自从网页中引入了 JavaScript，操作 DOM 树中任意一个节点就变得非常容易了，例如隐藏 / 显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等。不过在 XMLHttpRequest 出现之前，如果服务器数据有更新，依然需要重新刷新整个页面。
浏览器工作原理(17) - XMLHttpRequest的实现原理
ES6之super关键字详解
09-09 1309
上一篇文章中讲了setTimeout的定义方法以及清除方法，并且也知道了setTimeout的任务不能放在消息队列中因为这样无法在指定的事件之后执行任务，需要将延迟执行的任务放在另外一个消息队列中，这样执行完普通函数执行就可以去拿到延迟执行的任务 这篇文章我们继续往下走，看看XMLHttpRequest是如何实现的 有了JavaScript之后，我们通过DOM就可以对页面元素进行各种操作了，这属于页面层面的修改，如果页面一部分是需要从后端获取数据，那么想要修改这一部分就需要将整个页面进行刷新。 而XML.
pico-ajax：很小（〜1kb未压缩）但功能齐全的AJAX库，零依赖
01-30
它实现了浏览器XMLHttpRequest和返回Promise的Node.js http / https模块。 动机 使Pico-Ajax与众不同的是，它不知道如何传递数据。 这需要更多字节的代码来发出请求，但可以提供更多的控制权，（更重要的是）更好地...
使用Struts2和jQuery EasyUI实现简单CRUD系统
12-09
在Action类中，你可以处理业务逻辑，例如从数据库中读取或写入数据。例如，对于读取操作，你可能需要使用Hibernate或JDBC来查询数据库，然后将结果封装成一个Java对象，返回给结果视图。 在结果视图中，你可以使用...
PHP实现带进度条的Ajax文件上传功能示例
10-16
如果`$_FILES['pic']['error']`为非零值，表示上传失败，服务器返回相应的错误信息。否则，使用`move_uploaded_file()`函数将文件从临时目录移动到目标目录。 通过这种方式，我们可以实现一个具有进度条的Ajax文件...
web前端零基础系统学习路线分享.docx
11-22
Web前端零基础系统学习路线是构建前端开发技能体系的关键步骤，涵盖了从基础知识到高级技术的广泛领域。以下是对各个阶段的详细解读： **第一阶段：HTML+CSS** 在这个阶段，你需要掌握HTML的基础语法，用于创建网页...
jQuery实现监控页面所有ajax请求的方法
10-23
3. **全局结束回调**：`allAjaxDone`函数会在所有Ajax请求结束时被调用，这可以通过检查`ajaxCount`是否等于零来实现。你可以在这里执行任何需要在所有请求结束后进行的操作，如更新UI或执行其他逻辑。 4. **兼容性...
XMLHttpRequest对象的属性和方法
挨踢人士
07-05 1300
定义根据浏览器不同定义方式也不太一样：var request = false;　try {　　request = new XMLHttpRequest();　} catch (trymicrosoft) {　　try {　　　request = new ActiveXObject("Msxml2.XMLHTTP");　　} catch (othermicrosoft) {　　　try {　
创建XMLHttpRequest对象，我有以下几种方法
weixin_44218169的博客
05-22 2207
创建XMLHttpRequest对象，我有以下几种方法，顺带给大家介绍下他们的使用，一起来看看那吧。 1. 第一种，我们可以使用构造函数的方式。直接new的方式，这样我们就构造了这个对象。 request = new XMLHttpRequest() 但是，这个语句只针对Firefox，opera以及Safari等高级浏览器。 2、如果我们要针对IE6或者IE6以上的。那么，我们需要换一个方式，然...
深入解析XMLHttpRequest：实现异步通信的利器
最新发布
墨辰JC的博客
06-11 2825
在网络应用程序开发中，XMLHttpRequest（XHR）方法是一种用于向服务器发送HTTP请求和接收服务器响应的技术。它为开发者提供了一种使用JavaScript进行服务器通信的简单和灵活的方式。本篇博客将详细介绍XMLHttpRequest的使用方法和注意事项，并通过代码示例进行调试和演示。XMLHttpRequest是一个在JavaScript中使用的对象，它可以与服务器进行通信，发送HTTP请求并获取服务器的响应。通过XHR，我们可以在不刷新整个页面的情况下更新部分页面内容，实现动态交互。
利用HttpWebRequest向服务器XML数据
yzd
06-16 124
public void test() { string msgid, srcid, destid, content; msgid = "这是一个MSGID"; srcid = "这是一个123ID"; destid = "最后一个ID号"; content = "这是短信内容"; StringBuilder sb = new StringBuilder(); sb.Append("&lt;?xml...
Ajax
您已进入防沉迷系统...
11-05 753
一，AJAX的工作原理 Ajax的核心是一个JavaScript对象：XMLHttpRequest对象。该对象在IE5中首次引用，他是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 l  AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待
使用XMLHttpRequest 封装一个http请求函数，并返回调用结果，直接给出代码案例
weixin_42601547的博客
02-15 320
var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/some.file', true); xhr.onload = function (e) { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.res...
XMLHttpRequest
05-01 599
1.如何从javascript做出请求<!DOCTYPE html> <html> <head> <title>地理定位跟踪</title> </head> <body> <h1>销售数据列表</h1> <div id="sales"></div> </body> <script type="text/javascript"> /* 如何从javascript做出请求
ajax核心技术 XMLHttpRequest 对象 性能安全 探讨和理解
木子聊前端
07-13 436
内容提要 XMLHttpRequest （XHR）对象是一个基于浏览器层面的API，可以通过JavaScript 实 现 数 据 传 输。 为后来的AJAX提供了革命性的技术支持； 主要 用于与服务器交互 XMLHttpRequest 文章中统一用简称（XHR）代替 主要讨论 XHR 怎么使用？ 通过js 怎么实现数据传输？ 既然是基于浏览器的API，浏览器为我们做了那些事情？ 传输过程的安全机制是怎么产生的？ 跨域（CORS）是怎么产生的？如何访问跨域？ XHR 用法 XHR 对象的使用和普通的对象一毛
利用XMLHttpRequest实现文件上传
05-31
可以通过以下步骤利用XMLHttpRequest实现文件上传： 1. 创建XMLHttpRequest对象： ``` var xhr = new XMLHttpRequest(); ``` 2. 创建FormData对象，将文件添加到FormData对象中： ``` var formData = new ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderlin_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值