<!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. 设置vim永久显示编号

    永久显示行号,需要我们设置配置文件,两种配置方式: 1.  /etc/vimrc   是系统范围的初始化配置 2.  -/.vimrc     个人的vim初始化配置 编辑配置文件,以个人为例: vi ...

  2. base64学习笔记

    关于是什么: 定义 8Bits字节编码方式之一 应用 传输8Bit字节代码 特性 Base64编码具有不可读性 描述 Base64可以成为密码学的基石,非常重要. 特点 可以将任意的二进制数据进行Ba ...

  3. 【VR游戏】封神榜传

    领悟导入SteamVR和VRTK,SteamVR要和CameraRig位置保持一致.1.可以创建多个scene,然后进行连接跳转.但是创建好之后要自己重新导回scene附:删除MainCamera,添 ...

  4. insert一个表的数据到另外一个表

    insert into a(real_name,is_main,mobile,password,property_id,create_time) select linkman as real_name ...

  5. Java学习笔记:03面向对象-接口_多态

    1.类的概念 一堆具有共同的成员变量(属性)和成员方法(功能)对象的集合 2.接口的概念 接口是功能的集合,就是方法的集合 接口中只能定义方法,不能定义普通的成员变量 而且接口中的成员方法,必须是抽象 ...

  6. CF492E题解

    屑题. 考虑对于每一个 \((x,y)\),将其与 \(((x+dx) \mod n,(y+dy) \mod n)\) 连边. 答案就是连通块中权值最大的那个. 考虑对于 \((x_1,y_1)\) ...

  7. 关于vue3的inheritAttrs属性和$attrs的部分用法

    当我们在父组件中想要为子组件的某一个标签添加一些样式(注意,这里的是指attributes,css样式只是其中一种属性而已) <show-message id="lkx" c ...

  8. setState同步异步场景

    setState同步异步场景 React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会 ...

  9. prometheus虚拟化安装脚本

    在线安装下载链接:https://files.cnblogs.com/files/blogs/705493/online_prometheus.sh 离线安装下载链接:https://files.cn ...

  10. luffy项目中关于APIView的使用

    views中 from rest_framework.views import APIView from django.shortcuts import HttpResponse from api.u ...