微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

JavaScript XmlHttpRequest

分类：JavaScript作者：编程之家AI导航网

XmlHttpRequest

　　 这是原生的一种发送网络请求的技术，存在非常久的方案。

　　 基本上所有框架对于网络请求的部分都是基于它来做的。

方法介绍

open

　　 open()用于创建请求（单纯创建，并不发送）

　　 注意：如果是open()的method为GET，则需要自带参数。

参数 说明
method 请求方式
url 请求地址
async 是否异步

send

　　 send()用于发送请求，如果你的open()的method是GET，则这里可以填上null。

参数 说明
body 要发送的数据（字符串类型） 
function ajax() {
    let xhr = new XMLHttpRequest();
    xhr.open("GET","http://127.0.0.1:8000/",true);
    xhr.send(null);

}

setRequestHeader

　　 用于设置请求头，一般我们会指定编码方式。

参数 说明
header 请求头的key（字符串类型）
vlaue 请求头的value（字符串类型）

getAllResponseHeaders

　　 用于获取响应头，返回所有的响应头数据（字符串类型）。

getResponseHeader

　　 获取响应头中指定header的值，返回该响应头的数据（字符串类型）。

　　

参数 描述
header 响应头的key（字符串类型）

abort

　　 终止请求。

属性介绍

status

　　 状态码，如200/404等等。

readyState

　　 这是一个整数类型的状态值，使用XmlHttpRequest时共有5种状态。

状态值 描述
0 未初始化，尚未调用open()方法
1 启动，调用了open()方法，未调用send()方法
2 发送，已经调用了send()方法，未接收到响应
3 接收，已经接收到部分响应数据
4 完成，已经接收到全部响应数据

statesText

　　 状态文本（字符串），如：OK、NotFound...

responseText

　　 这是服务器返回的数据（字符串类型）

XmlDocument

　　 XmlDocument与responseXML一样，都是 服务器返回的数据（Xml对象）

回调函数

onreadystatechange

　　 当readyState的值改变时自动触发执行其对应的函数（回调函数）

　　 有了这个回调函数，我们就可以开始做一个原生的ajax了。

使用方式

简单封装

　　 这下面是一个最简单的封装。

    function ajax() {

        let xhr = new XMLHttpRequest();
        xhr.open("GET","http://127.0.0.1:8000/?username=Yunya",true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send(null);
        // 如果是POST请求，则 数据格式为 xhr.send('n1=1;n2=2;');


        xhr.onreadystatechange = function(){
            console.log(xhr.status);
            if (xhr.readyState == 4 && xhr.status==200){
                console.log("请求成功");
                console.log(xhr.responseText);
            }
            else if(xhr.status == 404){
                console.log("请求失败");
            }
            else if(xhr.status == 500){
                console.log("服务器内部错误")
            }
        }
    }

初级封装

　　 下面是融合了POST和GET的封装，基本使用与jQuery的ajax相同

(function () {

    class Ajax {

        constructor({ url,type,dataType,data,contentType,success,error }) {
            this.url = url;
            this.type = type;
            this.data = data;
            this.contentType = !!contentType == true ? contentType : 'application/x-www-form-urlencoded';
            this.success = typeof success == "function" ? success : (res) => { };
            this.error = typeof error == "function" ? error : (res) => { };
            this.xhr = null;
            this.send_data = null;
            this.init();
        }

        init() {
            // 第一步，处理上传的数据格式
            this.dataFormat();
            // 第二步：如果是GET提交，则send（）中不能有任何数据
            if (this.type == "GET") {
                this.getAjax();
            } else if (this.type == "POST") {
                this.postAjax();
            }
            // 第三步：判断后端返回信息
            this.callbackAjax();
        }

        dataFormat() {
            this.send_data = Object.entries(this.data).reduce((prev,value,index,array) => {
                if (array.length - 1 == index) {
                    return prev += `${value[0]}=${value[1]}`
                }
                else {
                    return prev += `${value[0]}=${value[1]}&`
                }

            },"")

        }

        getAjax() {
            this.url = this.url.concat('?',this.send_data,);
            this.xhr = new XMLHttpRequest();
            this.xhr.open(this.type,this.url,true);
            this.xhr.setRequestHeader("Content-Type",this.contentType)
            this.xhr.send(null);


        }

        postAjax() {
            this.xhr = new XMLHttpRequest();
            this.xhr.open(this.type,this.contentType)
            this.xhr.send(this.send_data);

        }


        callbackAjax() {
            this.xhr.onreadystatechange = () => {
                if (this.xhr.readyState == 4 && this.xhr.status == 200) {
                    if (this.dataType == "JSON") {
                        this.success(JSON.parse(this.xhr.responseText));
                    } else {
                        this.success(this.xhr.responseText);
                    }

                } else if (this.xhr.status == 404) {
                    this.error("请求失败，检查IP与PORT");
                } else if (this.xhr.status == 500) {
                    this.error("请求失败，服务器内部错误");
                }
            }

        }


    }
    window.Ajax = Ajax;
}())

// 调用方式 new Ajax() 传入参数即可

文件上传

　　 由于上面不支持文件上传，所以我们需要再做一个有文件上传功能的AJAX。

(function () {

    class Ajax {

        constructor({ url,error,file=false }) {
            this.url = url;
            this.type = type;
            this.data = data;
            this.contentType = !!contentType == true ? contentType : 'application/x-www-form-urlencoded';
            this.success = typeof success == "function" ? success : (res) => { };
            this.error = typeof error == "function" ? error : (res) => { };
            this.xhr = null;
            this.send_data = null;
            this.file = file; // 是否支持文件上传
            this.init();
        }

        init() {
            // 第一步，处理上传的数据格式

            this.dataFormat();

            // 第二步：如果是GET提交，则send（）中不能有任何数据
            if (this.type == "GET") {
                this.getAjax();
            }else if (this.file){
                this.fileAjax();
            }
            else if (this.type == "POST") {
                this.postAjax();
            }
            // 第三步：判断后端返回信息
            this.callbackAjax();
        }

        dataFormat() {
            this.send_data = Object.entries(this.data).reduce((prev,this.contentType);
            this.xhr.send(null);


        }

        postAjax() {
            this.xhr = new XMLHttpRequest();
            this.xhr.open(this.type,this.contentType);
            this.xhr.send(this.send_data);

        }

        fileAjax(){
            // 注意，文件上传只能是POST形式
            this.xhr = new XMLHttpRequest();
            this.xhr.open("POST",true);
            this.xhr.send(this.data);  // 注意，这里是上传的this.data
        }


        callbackAjax() {
            this.xhr.onreadystatechange = () => {
                if (this.xhr.readyState == 4 && this.xhr.status == 200) {
                    if (this.dataType == "JSON") {
                        this.success(JSON.parse(this.xhr.responseText));
                    } else {
                        this.success(this.xhr.responseText);
                    }

                } else if (this.xhr.status == 404) {
                    this.error("请求失败，检查IP与PORT");
                } else if (this.xhr.status == 500) {
                    this.error("请求失败，服务器内部错误");
                }
            }

        }


    }
    window.Ajax = Ajax;
}())

json格式

　　 如果需要发送JSON格式的数据，则我们还需要进行改进。

　　 首先要明确，GET提交方式不要使用JSON格式的数据进行发送。

　　 如果你后端是使用Django的话，那么json格式不会存放进request.POST中，而是存放request.body中。

　　 说明：file为true时，代表上传文件，json_data为true时，代表前端发送json数据至后端，dataType为JSON时，代表自动转换后端传过来的json格式数据。

(function () {

    class Ajax {

        constructor({ url,file=false,json_data=false }) {
            this.url = url;
            this.type = type;
            this.data = data;
            this.contentType = !!contentType == true ? contentType : 'application/x-www-form-urlencoded';
            this.success = typeof success == "function" ? success : (res) => { };
            this.error = typeof error == "function" ? error : (res) => { };
            this.xhr = null;
            this.send_data = null;
            this.file = file; // 是否支持文件上传
            this.json_data = json_data;
            this.init();
        }

        init() {

            // 如果是GET+JSON格式发送则抛出异常

            if(this.json_data && this.type=='GET'){
                throw new Error("不可使用GET方式提交JSON数据");
            }else if(this.json_data && this.file ){
                throw new Error("提交文件不可使用JSON数据");

            }

            // 第一步，处理上传的数据格式
            if(!this.json_data){
                this.dataFormat();
            }
            else{
                this.dataJson();
            }

            // 第二步：如果是GET提交，则send（）中不能有任何数据
            if (this.type == "GET") {
                this.getAjax();
            }else if (this.file){
                this.fileAjax();
            }
            else if (this.type == "POST") {
                this.postAjax();
            }
            // 第三步：判断后端返回信息
            this.callbackAjax();
        }

        dataFormat() {
            this.send_data = Object.entries(this.data).reduce((prev,"")

        }

        dataJson(){
            this.send_data = JSON.stringify(this.data);
        }

        getAjax() {
            this.url = this.url.concat('?',true);
            // 判断是否发送JSON数据格式
            if (this.json_data){
                this.xhr.setRequestHeader("HTTP_X_REQUESTED_WITH","XMLHttpRequest");
                this.xhr.setRequestHeader("Content-Type","application/json");
            }else{
                this.xhr.setRequestHeader("Content-Type",this.contentType);
            }
            this.xhr.send(this.send_data);

        }

        fileAjax(){
            // 注意，文件上传只能是POST形式
            this.xhr = new XMLHttpRequest();
            this.xhr.open("POST",true);
            this.xhr.send(this.data);  // 注意，这里是上传的this.data
        }


        callbackAjax() {
            this.xhr.onreadystatechange = () => {
                if (this.xhr.readyState == 4 && this.xhr.status == 200) {
                    if (this.dataType == "JSON") {
                        this.success(JSON.parse(this.xhr.responseText));
                    } else {
                        this.success(this.xhr.responseText);
                    }

                } else if (this.xhr.status == 404) {
                    this.error("请求失败，检查IP与PORT");
                } else if (this.xhr.status == 500) {
                    this.error("请求失败，服务器内部错误");
                }
            }

        }


    }
    window.Ajax = Ajax;

}())

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled="disabled"时发现，无法序列化form获取到select标签的值；当我们使用readonly="readonly&quo
还在问跨域？本文记录js跨域的多种实现实例
前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
formData批量上传的多种实现
前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
laypage 物理分页与逻辑分页实例
前言 以下介绍摘自 layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native