<!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. Python 并发编程（上）

    Python 并发编程 参考文献:https://gitee.com/wupeiqi/python_course 并发编程:提升代码执行的效率.原来需要 10 分钟执行,并发处理后可以加快到 1 分钟 ...

  2. 03-Eureka注册中心

    1.介绍 2.快速开始 2.1 pom文件依赖 <?xml version="1.0" encoding="UTF-8"?> <project ...

  3. 《MySQL实战45讲》个人笔记-基础篇

    拜读了林晓斌大佬的<MySQL实战45讲>,特意做个知识点总结,以便后期回忆. 01.基础架构:一条SQL查询语句是如何执行的? Server 层包括连接器.查询缓存.分析器.优化器.执行 ...

  4. 动手学TCP——CS144实验感想

    在Stanford CS144的课程实验Lab0~Lab4中,我们动手实现了一个自己的TCP协议,并且能够真的与互联网通信!此外,感谢Stanford开源本实验并提供了大量的优质测试用例,使得我们仅仅 ...

  5. 国产化之银河麒麟安装达梦数据库DM8

    背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟,数据库使用DM8. 虽然在之前的文章中已经成功模拟国产飞腾处理器,但是运行效率不高,所以这里的银河麒麟操作系统还是运行在x64平台上 ...

  6. 矩池云上如何快速安装tensorRT

    国内镜像 https://mirrors.cloud.tencent.com/nvidia-machine-learning/ubuntu1804/x86_64/ 检查系统版本 source /etc ...

  7. 移动端开发为什么使用@2x@3x图片

    物理.逻辑与位图像素的概念 关于设备物理像素和逻辑像素,这两个像素一个是实体的,一个是抽象的单位.除此之外还有一个不可忽视的像素,就是位图像素. 物理像素(设备像素):指的是设备屏幕实际拥有的像素点. ...

  8. JVM探究 面试题 JVM的位置 三种JVM：HotSpot 新生区 Young/ New 养老区 Old 永久区 Perm 堆内存调优GC的算法有哪些？标记清除法，标记压缩，复制算法，引用计数法

    JVM探究 面试题: 请你弹弹你对JVM的理解?Java8虚拟机和之前的变化更新? 什么是OOM?什么是栈溢出StackOverFlowError?怎么分析 JVM的常用调优参数有哪些? 内存快照如何 ...

  9. PO模式在selenium自动化测试框架有什么好处

    PO模式是在UI自动化测试过程当中使用非常频繁的一种设计模式,使用这种模式后,可以有效的提升代码的复用能力,并且让自动化测试代码维护起来更加方便. PO模式的全称叫page object model( ...

  10. K8S原来如此简单（三）Pod+Deployment

    上篇我们已经安装好k8s1.23集群,现在我们开始使用k8s部署我们的项目 Pod Pod 是一组容器集合,是可以在 Kubernetes 中创建和管理的.最小的可部署的计算单元.这些容器共享存储.网 ...