<!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. JZ-006-旋转数组的最小数字

    旋转数组的最小数字 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. NOTE:给出的所有元素都大于0,若数组 ...

  2. C# Event (1) —— 我想搞个事件

    本文地址:https://www.cnblogs.com/oberon-zjt0806/p/15975299.html 本文最初来自于博客园 本文遵循CC BY-NC-SA 4.0协议,转载请注明出处 ...

  3. php 23种设计模式 - 命令模式

    命令模式 将一个请求封装为一个对象,从而使用户可用不同的请求对客户进行参数化.对请求排队或记录请求日志,以及支持撤销的操作. 命令模式以松散耦合主题为基础,发送消息.命令和请求,或通过一组处理程序发送 ...

  4. ElasticSearch7.3 学习之倒排索引揭秘及初识分词器(Analyzer)

    一.倒排索引 1. 构建倒排索引 例如说有下面两个句子doc1,doc2 doc1:I really liked my small dogs, and I think my mom also like ...

  5. PicGo+Typora配置gitee图床

    1 .下载Typora Typora官网地址:https://www.typora.io/#windows 本文使用的Typora版本为 0.11.2 根据自己的要求进行安装即可! 2.下载PicGo ...

  6. .NET 6学习笔记(2)——通过Worker Service创建Windows Service

    通过Visual Studio中的Windows Service模板,我么可以创建.NET Framework版本的Windows Service,网络上对此已有详细且丰富的各路教程.但在我们升级到. ...

  7. 使用WebService的优点

    1.支持跨平台,跨语言,远程调用 WSDL:web service definition language 直译 webservice定义语言 对应一种类型的文件.wsdl2.定义了web servi ...

  8. Apache+PHP+Mysql安装手册（Linux）

    一. 检查系统环境 1.确认centos版本 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Co ...

  9. Spring Cloud Alibaba分布式事务组件 seata 详解（小白都能看懂）

    一,什么是事务(本地事务)? 指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全地不执行. 简单的说,事务就是并发控制的单位,是用户定义的一个操作序列.      而一个逻辑工作单元要成 ...

  10. go语言学习入门篇1---go语言的主要特性与发展

    1.1 影响 Go 语言发展的早期编程语言 正如 "21 世纪的 C 语言" 这句话所说,Go 语言并不是凭空而造的,而是和 C++.Java 和 C# 一样属于 C 系.不仅如此 ...