<!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. LeetCode-013-罗马数字转整数

    罗马数字转整数 题目描述:罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 ...

  2. think php 删除

    表单页面 <a href="/examtest/test/edit/id/{$v['id']}">修改</a> <a href="/exam ...

  3. jq集成月份插件（不要年月日，只要年月）

    最近项目中报表统计需要按照月份进行统计,以前用的jq-ui的插件,里面集成的是年月日,修改了好久,觉得太过麻烦,就换了个思路,由于赶时间,所以就度娘了,找到了一个很简洁又简单的Demo,但是发现和我的 ...

  4. 【译】.NET 6 网络改进

    原文 | Máňa Píchová 翻译 | 郑子铭 对于 .NET 的每个新版本,我们都希望发布一篇博客文章,重点介绍网络的一些变化和改进.在这篇文章中,我很高兴谈论 .NET 6 中的变化. 这篇 ...

  5. 2.8 C++STL set/multiset容器详解

    文章目录 2.8.1 引入 2.8.2 代码示例 2.8.3 代码运行结果 2.8.4 对组pair的补充 代码实例 运行结果 总结 2.8.1 引入 set/multiset容器概念 set和mul ...

  6. MySQL 字符集相关

    为了支持各个国家的不同语言,MySQL 从4.0 版本开始支持了很多种字符集,且每种字符集支持了 N 多种排序规则.我们可以在建表的时候指定字符集的排序规则,不指定时会有一个默认规则. 字符集和排序规 ...

  7. windows安装oos遇到的坑 （汇总）

    一.环境安装 --  搭建域控服务器 1. 打开服务器管理器,添加角色和功能: 2.下一步: 3.下一步: 4.下一步 5.选择添加AD域服务,同时添加所需功能,下一步: 6.安装功能,下一步: 7. ...

  8. CSV格式的文件与EXCEL文件的区别

    CSV格式的文件与EXCEL文件的区别 Excel CSV 这是一个二进制文件,它保存有关工作簿中所有工作表的信息 CSV代表Comma Separated Values .这是一个纯文本格式,用逗号 ...

  9. 解决使用DBeaver连接MySQL时报错-The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone.

    解决使用DBeaver连接MySQL时报错,其实提示很明显. The server time zone value '�й���׼ʱ��' is unrecognized or represents ...

  10. Apache+PHP+Mysql安装手册（Windows）

    一,准备安装包 下载地址: Apache:HTTPS://www.apachelounge.com/download/ PHP:http://php.net/downloads.php MySQL h ...