<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>手写ajax</title>

</head>

<body>

<script>

    const xhr = new XMLHttpRequest();

    xhr.open('GET', '/api', false);

    xhr.onreadystatechange = function () {

        // xhr.readyState 的各个状态

        // 0：未初始化，还没有调用send()方法

        // 1：载入，已调用send()方法，正在发送请求

        // 2：载入完成，send()方法执行完成，已经接收到全部响应内容

        // 3：交互，正在解析响应内容

        // 4：完成，响应内容解析完成，可以再客户端调用

        if(xhr.readyState == 4){

            // status状态码分类：

            // 1xx：服务器收到请求

            // 2xx：请求成功

            // 3xx：重定向

            // 4xx：客户端错误

            // 5xx：服务端错误

            if(xhr.status == 200){

                // 常见状态：

                // 200：成功

                // 301：永久重定向

                // 302：临时重定向

                // 304：资源未被修改

                // 404：资源未找到

                // 403：没有权限

                // 500：服务器错误

                // 504：网关超时

                alert(xhr.responseText)

            }

        }

    }

    xhr.send(null)

    xhr.open('POST','/api',false)

    const postData={

        userName:'zhangsan',

        password:'abc123'

    }

    xhr.send(JSON.stringify(postData))

</script>

</body>

</html>

考点：

1、XMLHttpRequest的使用
2、XMLHttpRequest状态码
3、常见请求状态码

前端面试题整理——手写AJAX的更多相关文章

  1. 前端面试题整理——手写方法解析URL参数

    //拆分字符串形式 function queryToObj() { const res = {} const search = location.search.substr(1);//去掉前面的&qu ...

  2. 前端面试题整理——手写简易jquery

    class jQuery { constructor(selector) { const result = document.querySelectorAll(selector) console.lo ...

  3. 前端面试题整理——手写bind函数

    var arr = [1,2,3,4,5] console.log(arr.slice(1,4)) console.log(arr) Function.prototype.bind1 = functi ...

  4. 前端面试题整理——手写flatern摊平数组

    // flatern 是摊平数组 function flat(arr) { const isDeep = arr.some(item => item instanceof Array) if(! ...

  5. 前端面试题之手写promise

    前端面试题之Promise问题 前言 在我们日常开发中会遇到很多异步的情况,比如涉及到 网络请求(ajax,axios等),定时器这些,对于这些异步操作我们如果需要拿到他们操作后的结果,就需要使用到回 ...

  6. 【web前端面试题整理02】前端面试题第二弹袭来，接招！

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  7. 【web前端面试题整理06】成都第一弹，邂逅聚美优品

    前言 上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...

  8. 前端面试题整理—JavaScript篇（一）

    1.JS的基本数据类型和引用数据类型有哪些,两者区别 基本数据类型->string.number.Boolean.null.undefined.symbol 引用数据类型->array.o ...

  9. 前端面试题整理—JavaScript篇（二）

    1.使用js实现一个可持续的动画 2.实现一个可以自由拖动的悬浮框 3.实现一个倒计时效果 4.使用js仿写一个原生下拉列表框 5.创建10个<a>标签,点击的时候弹出对应的序号 6.实现 ...

随机推荐

  1. 积分图(二) - Block - Match(统计)滤波器

    原文地址(英文) 积分图 是 [Crow(1984 年)] 提出的用于提高多尺度透视投影中纹理的渲染速度的一种技术. 积分图最流行的应用是 快速归一化互相关 (fast normalized cros ...

  2. 前端vue下载文件时blob返回流中怎么获取文件名

    我很久之前写了一篇前端vue利用blob对象下载文件,有些人私信我,如果后端返回流失败,给出的json对象该怎么获得?前端获取的流怎么能获取原文件名?其实在那篇文章之后,我就已经针对这两个问题进行了优 ...

  3. CentOS安装时，软件选择（Software Selection）项介绍

    要指定软件包将被安装,选择软件时选择安装摘要屏幕.包组分为基础环境.这些环境是预先定义的一组具有特定用途的软件包:例如,在虚拟化主机环境中包含的一组所需的系统上运行的虚拟机软件程序包.只有一个软件环境 ...

  4. TCP/IP方法安装打印机

    在计算机安装打印机驱动和添加打印机(TCP/IP方法) 一:打印机的型号和驱动. 1.1:如何知道自己的打印机是什么品牌和型号?: 通过观察打印机表面的logo或者其他文字图案来辨别 如下图: 1.2 ...

  5. glibc2.29以上 IO_FILE 及 house of pig

    摆烂很长时间之后,终于下定决心来看点新的东西.正好 winmt 师傅前不久把他 pig 修好的附件发给我了,我就借此来学习一下新版本的 IO_FILE 及 house of pig. 新版本的 IO_ ...

  6. JVM垃圾回收阅读笔记

    Java内存运行时区域的各个部分,其中程序计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭,栈中的栈帧随着方法的进入和退出而有条不紊地执行着出栈和入栈操作. 每一个栈帧中分配多少内存基本上是 ...

  7. SpringBoot学习入门之Hello项目的构建、单元测试和热部署等（配图文，配置信息详解，附案例源码）

    前言: 本文章主要是个人在学习SpringBoot框架时做的一些准备,参考老师讲解进行完善对SpringBoot构建简单项目的学习汇集成本篇文章,作为自己对SpringBoot框架的总结与笔记. 你将 ...

  8. Open Babel的安装与使用

    技术背景 Open Babel是化学领域常用的一个文件格式转换工具,它可以支持xyz的坐标格式.SMILES表达式.InChI表达式和mol以及mol2等格式之间的互相转化.比如说,你只有一个甲烷的S ...

  9. LGP3702题解

    很容易想到容斥,计算不包含质数的方案数和总方案数. 设 \(f[n][i]\) 表示长度为 \(n\) 的序列,每个元素的和对 \(p\) 取模的结果. 容易有 \(f[n][i]=\sum_{j=0 ...

  10. html 两个并列div样式

    1.html 代码 <html> <head> <link rel="stylesheet" href="cs2.css"> ...