您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

XMLHttpRequest使用入门

时间:2020-01-08 10:59:50  来源:  作者:

XMLHttpRequest简介

XMLHttpRequest是由微软提出的一个API接口,目的是为客户端提供与服务器之间传输数据的功能。XMLHttpRequest的特点是可以按需请求、局部刷新,不仅提高了服务器响应速度还可以避免不必要的宽带浪费。XMLHttpRequest提供了一个通过URL来获取数据的简单方式,通过它可以很容易的获取到URL上所有类型的资源数据。

JavaScript实战001:XMLHttpRequest使用入门

 

XMLHttpRequest是什么

XMLHttpRequest 是一个JAVAScript对象,得到了所有现代浏览器(Chrom、IE7+、Firefox、Safari 以及 Opera等)较好的支持并内建了XMLHttpRequest 对象,它定义了很多方法和属性方便用户配置发送各种请求。比如说可以设置请求的超时时间、获取请求进度信息、设置请求数据类型等,发送GET、POST、DELETE、HEAD、PUT等各种HTTP请求。

JavaScript实战001:XMLHttpRequest使用入门

 

XMLHttpRequest对象方法

XMLHttpRequest对象创建可以通过new XMLHttpRequest()来实现,一个请求的实现至少需要使用open和send方法的使用。XMLHttpRequest支持以下几种方法,需要注意的是setRequestHeader()方法指定了HTTP请求的头部信息,需要在请求初始化之后发送之前定义。

JavaScript实战001:XMLHttpRequest使用入门

 

XMLHttpRequest对象属性

onreadystatechange是一个事件句柄函数,当readyState属性发生变化时被调用以改变XMLHttpRequest 的状态。我们可以通过获取该对象的属性来分析请求的状态并做出相应的操作决策,也可以帮助开发者快速定位错误因素。

JavaScript实战001:XMLHttpRequest使用入门

 

XMLHttpRequest监听事件

XMLHttpRequest对象提供了一系列监听事件来获取请求的当前状态,每个请求都以loadstart事件开始,以 loadend 事件结束。在这两个事件中间可以注册响应的监听事件来获取传输的状态,比如通过onprogress获取上传文件的进度,那么我们就可以注册一个onprogress 事件来监听当前进度。

xhr.upload.onprogress = e =>{  if (e.lengthComputable) {    var progress = e.loaded / e.total;  }}
JavaScript实战001:XMLHttpRequest使用入门

 

发送GET请求接收二进制数据

这里我写了一个简单的页面载入时发送一个请求的示例,通过GET方法来获取后台的文件。在发送请求时可以设置一些请求头部信息,比如content-type、connection、cookie等信息。xhr提供了setRequestHeader来允许我们修改请求头部信息,第一个参数为请求头参数,第二个参数为对应的参数值。我们还可以指定接受返回的数据类型,xhr可以通过responseType属性指定数据类型为blob。老版本的 Internet Explorer不支持 XMLHttpRequest 对象,所以我们先检查浏览器是否支持 XMLHttpRequest 对象,如果不支持的话可以创建 ActiveXObject 对象。

JavaScript实战001:XMLHttpRequest使用入门

 

发送POST请求上传文件

XMLHttpRequest新增formData对象,不仅可以发送文本数据还可以上传文件。这里我尝试实现文件上传功能,将二进制文件追加到formData对象,在发送的时候我们将formData对象提交即可。

JavaScript实战001:XMLHttpRequest使用入门

 



Tags:XMLHttpRequest   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
XMLHttpRequest简介XMLHttpRequest是由微软提出的一个API接口,目的是为客户端提供与服务器之间传输数据的功能。XMLHttpRequest的特点是可以按需请求、局部刷新,不仅提高了服...【详细内容】
2020-01-08  Tags: XMLHttpRequest  点击:(93)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条