让大家都能理解 XMLHttpRequest

这篇具有很好参考价值的文章主要介绍了让大家都能理解 XMLHttpRequest。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

让大家都能理解 XMLHttpRequest

  XMLHttpRequest 是一个 JavaScript 对象,它能够在浏览器和 Web 服务器之间发送和接收数据。即使在从 Web 服务器读取了所有数据之后,XMLHttpRequest 仍然可以发送和接收数据,从而实现不重新加载页面就能够重写页面内容的功能。在当今的 Web 服务中,使用 XMLHttpRequest 发送和接收数据是非常必要的。尽管现在使用XMLHttpRequest 直接与Web服务器收发数据的机会不多,大多数情况下都是使用 axios(底层使用 XMLHttpRequest)和 fetch 函数。但是,理解 XMLHttpRequest 对于理解这些技术仍然非常重要,因此我们应该深入了解它。

1 XMLHttpRequest使用

以下是使用 XMLHttpRequest 的 JavaScript 代码,它应该写在脚本标签中:

<script>

// (1)XMLHttpRequest对象创建
var xmlHttpRequest = new XMLHttpRequest();

// (2)onreadystatechange监听请求的状态
xmlHttpRequest.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        console.log(this.responseText);
    }
}

// (3)HTTP通过GET服务路径与服务器进行通信
xmlHttpRequest.open(
  'GET',
  'https://jsonplaceholder.typicode.com/users/1',
  true
);
// (4)HTTP中发生信息
xmlHttpRequest.send();
</script>

我们可以使用 https://jsonplaceholder.typicode.com/ URL 来进行测试,它是一个公共的网络测试资源地址,专门用于测试。如果您不想搭建自己的服务器,可以尝试使用它来进行 Ajax 路径测试。

2 XMLHttpRequest 处理流程

(1) 创建一个XMLHttpRequest对象

var xmlHttpRequest = new XMLHttpRequest();

创建 XMLHttpRequest 实例,使用该实例可以在浏览器和服务器之间进行通信。

(2)用onreadystatechange事件监听请求状态

xmlHttpRequest.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        console.log(this.responseText);
    }
}

  可以使用 onreadystatechange 事件来监视 XMLHttpRequest 处理状态的变化。该事件用于监视状态的变化,以便可以检测来自服务器的响应(即接收到的数据)何时完成。此外,还可以通过确认响应的 HTTP 状态代码是否为 200,来确定请求是否成功。

readyState 被分配一个从 0 到 4 的数字,代表处理的状态,其中 4 代表请求处理完成。如果 readyState 为 4,状态码为 200,则可以使用 console.log 命令打印接收到的数据。

由于 XMLHttpRequest 与服务器进行异步通信,与等待同步处理完成不同,您不知道何时处理完成。因此,我们需要使用 onreadystatechange 事件来监视处理状态,并采取适当的措施。

使用该事件,可以在请求的处理过程中多次检查 readyState 的值,并据此采取必要的操作,以确保在处理完成时能够得到所需的结果。

(3)指定HTTP GET方法和访问位置

xmlHttpRequest.open(
  'GET',
  'https://jsonplaceholder.typicode.com/users/1',
  true
);

第三个参数 true 是异步设置。如果异步则设置为 true,如果同步则设置为 false。

XMLHttpRequest.open('HTTP类型','URL',['async',user,password])

如果要进行异步通信,则应将 async 参数设置为 true,如果要进行同步通信,则应将其设置为 false。在使用 open 方法时,还可以指定用户和密码,以进行基本身份验证。

(4) 发送HTTP请求

xmlHttpRequest.send();

发送请求到服务器然后等待服务器的响应。我们可以使用 (2) 中的事件来检查服务器的响应是否完成。

3 onreadystatechange 事件

在ajax请求的时候每当处理状态发生变化时,都会产生 readystatechange 事件,以便代码可以相应地处理变化。当前状态可以通过 readyState 属性进行判断。readyState 属性被分配了 0 到 4 之间的值,并且含义因数字而异。

  • readyState=0 : status=UNSENT: 初始状态(实例创建)
  • readyState=1 : status=OPENED: 打开方法执行
  • readyState=2 : status=HEADERS_RECEIVED: 收到响应头
  • readyState=3 : Status=LOADING: 正在接收数据
  • readyState=4 : status=DONE: 请求完成

使用下面的代码检查每次进程状态更改时是否实际触发了 onreadystatechange 事件。除了 onreadystatechange 事件外,其余的代码与前面解释的代码相同。

xmlHttpRequest.onreadystatechange = function(){   
    if(this.readyState == 0){
        console.log('UNSENT:初始状态')
    }            
    if(this.readyState == 1){
        console.log('OPENED: 打开方法执行')
    }            
    if(this.readyState == 2){
        console.log('HEADERS_RECEIVED:收到响应头')
    }            
    if(this.readyState == 3){
        console.log('LOADING:正在接收数据')
    }
    if(this.readyState == 4){
        console.log('DONE: 请求完成')
    }
}

4 接收 JSON 数据

在与服务器进行通信时,大多数情况下数据都是以 JSON 格式发送的。我们可以将服务器返回的数据转换为 JSON 格式。请注意,服务器端的处理因环境而异,返回的数据格式有所不同。但是我们大多数情况使用 Spring Boot 作为服务端,因此返回的数组会自动转换为 JSON 格式。

xmlHttpRequest.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        user = JSON.parse(this.responseText);
        console.log(user)
    }
}

如果this.responseText返回的数据是以字符串形式的 JSON 数据传输的,我们需要使用JSON.parse()方法将其解析成一个 JavaScript 对象。如果不进行转换,该数据可能会被解释为 undefined。

5 响应类型

如果你设置了 Response Type 为 JSON,那么可以直接获取响应数据的格式。因此,不需要再运行 JSON.parse 将其转换为对象。不过,需要注意的是,在获取值时,应该使用 response 属性,而不是 responseText。

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.responseType = 'json';
xmlHttpRequest.onreadystatechange = function(){

    if(this.readyState == 4 && this.status == 200){
        //responseType = 'json' 不能使用this.responseText 
        //直接使用 response
        user = this.response;
        console.log(user)
    }
}

使用 getAllResponseHeaders() 检查来自服务器的响应标头信息。

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.responseType = 'json';
xmlHttpRequest.onreadystatechange = function(){

    if(this.readyState == 4 && this.status == 200){
        //responseType = 'json' 不能使用this.responseText 
        //直接使用 response
        user = this.response;
        console.log(user);
        console.log(this.getAllResponseHeaders());
    }
}

6 XMLHttpRequest其他事件

我们使用 onreadystatechange 事件来检查处理状态,除了 onreadystatechange 事件之外,还有以下事件可以使用。

  • onloadstart :请求开始时
  • onprogress :定期运行,直到请求完成。也可以检查接收到的数据。
  • onabort :当请求被 abort 方法中止时
  • onerror : 当请求发生错误时
  • onload :请求完成时
  • ontimeout :请求超时时

设置以下 6 个事件并检查它们是被执行正常工作。

xmlHttpRequest.onloadstart = function(){
    console.log('onloadstart请求开始时');
};

xmlHttpRequest.onprogress = function(){
    console.log('onprogress事件');
};

xmlHttpRequest.onload = function(){
    console.log('onload事件');
};

xmlHttpRequest.onabort = function(){
    console.log('onabort事件');
};

xmlHttpRequest.onerror = function(){
    console.log('onerror事件');
};

xmlHttpRequest.ontimeout = function(){
    console.log('ontimeout事件');
};

我们可以看到浏览器GET请求成功完成后只执行了以下3个事件。

onloadstart请求开始时
onprogress事件
onload事件

abort 事件触发条件,只有在XMLHttpRequest在代码中设置abort方法,并且使用它。发送数据后立即执行 abort 方法,才会执行abort 事件。

xmlHttpRequest.send();

xmlHttpRequest.abort();

这样才可以看到在启动请求的 onloadstart 之后触发了 onabort 事件。

接下样我们看看超时事件 ontimeout 触发条件。设置请求超时。由于单位是毫秒,如果请求后2000(=2秒)服务器没有响应,就会执行事件。

xmlHttpRequest.timeout = 2000

onerror 事件 触发条件是,访问了服务器端一个不存在的IP地址,onerror 事件才会发生。

xmlHttpRequest.open('GET','http://127.0.0.100',true);

我发现可以在 onerror 事件中检查网络级错误。当收到 404 错误,这意味着你能够与服务器通信,但是页面不存在。在这种情况下,我们可以在执行的 onload 事件中进行检查。当程序执行 onload 事件时,也会显示HTTP状态码,返回状态码404和Not Found404。

xmlHttpRequest.onload = function(){
    console.log('onload事件');
    //状态
    console.log(this.status);
};

我们可以使用HTTP状态代码来判断是否发生了HTTP级别的错误。如果状态代码不是正常的200,就可以终止程序的运行;否则,程序可以继续运行。我们通常会使用它来处理 404 以及服务器的 Eroro 500错误。

xmlHttpRequest.onload = function(){
    if(this.status != 200){
    console.log(this.status + ':程序终止运行。');
    }else{
        console.log(this.status + '正常运行。');
    }
};

7 FormData 请求

下面是用于向服务器异步发送数据的 JavaScript 代码。

<script>

    // (1)XMLHttpRequest创建实例
    var xmlHttpRequest = new XMLHttpRequest();

    // (2)HTTP的POST请求
    xmlHttpRequest.open('POST','/api/onsave',true);

    // (3)数据发送的格式类型
    xmlHttpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    // (4)HTTP发送的数据
    xmlHttpRequest.send('id=2&name=zht');

</script>

步骤(3)的设置是指定要发送的数据的格式。这次发送数据的格式是key1=value1&key2=value2,所以Content-Type要设置成application/x-www-form-urlencoded。如果不指定数据格式,在服务器端可能无法正常的接收数据。

大多数的时候我们会使用 FormData 对象发送数据。让我们看看FormData 是如何发送数据的。

var xmlHttpRequest = new XMLHttpRequest();

var formData = new FormData();

formData.append("id", 3);
formData.append("name","zht");
xmlHttpRequest.open('POST','/api/onsave',true);

xmlHttpRequest.send(formData);

代码中使用 FormData 的 append 方法添加要发送的数据。此外,使用 FormData发送数据在代码中不需要设置内容类型setRequestHeader 。

通过下面的例子让我们看看在html代码中如何使用FormData将form数据发送到服务端的。

<form name="user">
    Id:<input type="text" name="id"><br>
    名称:<input type="text" name="name"><br>
    <input type="submit" onclick="sendPost();return false;">添加</button>
</form>

创建 sendPost 函数,该函数内部使用 document.forms.user 方法将表单的内容放入 FormData 对象中。通过发送 FormData 对象,将输入表单的内容发送到服务器(使用 POST 请求方式)。

function sendPost(){
    var xmlHttpRequest = new XMLHttpRequest();
    var formData = new FormData(document.forms.user);
    xmlHttpRequest.open('POST','/api/onsave',true);
    xmlHttpRequest.send(formData);
}

JavaScript 特性 this与“bind“和“call“,“apply“的理解
JavaScript 特性 Promise 函数
JavaScript 特性 map、forEach、filter 和 find 与箭头函数的使用
JavaScript 特性 Destructuring 语法
JavaScript 特性 Proxy(代理)和Reflect(反射)
JavaScript 特性 Object.assign与Getter,Setters 和 definePropert
JavaScript 中使用 XMLHttpRequest文章来源地址https://www.toymoban.com/news/detail-408543.html

到了这里,关于让大家都能理解 XMLHttpRequest的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • XMLHttpRequest拦截请求和响应

    环境: angular 实现: 拦截请求 向请求信息增加字段             拦截响应 过滤返回值 响应拦截: 根据angular使用的XMLHttpRequest 将对原本的请求转移到另一个将监听返回事件挂载到另一个世纪发送请求的xml上 使用get set 将客户端获取的responseText和response按照自己的意愿返

    2024年02月07日
    浏览(34)
  • ajax请求——XMLHttpRequest请求

     个人练习笔记-----Ajax01 一、GET  https://v5.crmeb.net/api/groom/list/3?page=1limit=9  ------协议:// 域名 / 地址?参数 1.xhr.open(\\\"GET\\\",\\\"https://v5.crmeb.net/api/groom/list/3?page=1limit=9\\\");对应的参数从下图中所示中获取 2.xhr.setRequestHeader(\\\"Content-Type\\\",\\\"application/json\\\");//验证身份 xhr.setRequestHeader(\\\"Authori-Z

    2024年02月03日
    浏览(45)
  • 学习笔记—XMLHttpRequest

    一、XMLHttpRequest概述 XMLHttpRequest (XHR)对象用于与服务器交互,是基于XML的HTTP请求。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。 XMLHttpRequest  在 AJAX 编程中被大量使用。 二、基于XML

    2024年02月03日
    浏览(35)
  • 使用XMLHttpRequest实现文件异步下载

            我想通过异步的方式实现下载文化,请求为post请求。一开始我打算用ajax。         不过ajax的返回类型不支持二进制文件流(binary)!因此ajax的异步方式无法接到后端接口返回的文件流,就无法下载文件。 jQuery.ajax() | jQuery API Documentation         改用dom原生的XMLH

    2024年02月14日
    浏览(37)
  • XMLHttpRequest 请求失败也需要给出提示

    是的,当XMLHttpRequest请求失败时,给用户一个提示是一个好的做法。这可以帮助用户了解请求是否成功,如果请求失败,他们可以采取适当的行动,例如重新发送请求或与技术支持联系。 以下是一些可能导致XMLHttpRequest请求失败的常见原因: 网络连接问题:如果用户的网络连

    2024年02月12日
    浏览(39)
  • fetch、axios 和 XMLHttpRequest的区别

    官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest XMLHttpRequest (XHR) 是一种在客户端和服务器之间进行异步数据交换的技术,它允许浏览器向服务器发送HTTP请求,获取数据并更新部分网页内容,而无需刷新整个页面。XHR 是现代Web开发中常用的一种技术,用于实现AJA

    2024年01月16日
    浏览(35)
  • ajax-XMLHttpRequest的基本使用

    能够知道如何使用 XMLHttpRequest 发起 Ajax 请求 能够知道如何封装自己的Ajax函数 能够使用 XMLHttpRequest Level2 中提供的新特性 能够知道 jQuery 中如何实现文件上传与loading效果 能够知道如何使用 axios 发起Ajax请求 XMLHttpRequest (简称 xhr )是浏览器提供的 Javascript 对象,通过它,可以

    2024年02月02日
    浏览(38)
  • web网络请求与远程资源-XmlHttpRequest

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 资源在:https://download.csdn.net/download/naozheyun2998/88916305 提示:以下是本篇文章正文内容,下面案例可供参考 ajax(Asynchronous JavaScript+XML),异步技术的统称; F

    2024年04月09日
    浏览(35)
  • wininet,winhttp,xmlhttprequest,各版本区别 《转》

    实现Http访问,微软提供了二套API:WinINet, WinHTTP(分别封装于system32目录下的wininet.dll和winhttp.dll内) 二者主要区别在于后者更为安全和稳定,可以说WinHTTP是WinINet的升级版 LZ所提的UDF WinHTTP.au3就是直接调用标准接口写成的自定义函数库文件 二、COM对象XMLHttpRequest和WinHttpReques

    2024年02月09日
    浏览(36)
  • XMLHttpRequest,AJAX,Promise,Axios及操作实战

    XMLHttpRequest,AJAX,Promise,Axios都是发送异步请求的工具,只是使用的场合和方式有所不同。都是一种用于创建快速动态网页的技术 1、我们点击淘宝首页的男装,进入男装页面的这个请求过程称之为“同步请求”。 2、请求提交之后,需要重新加载整个页面,即使当前的数据有部分

    2024年02月03日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包