javascript网络请求

1.所有现代浏览器都通过 XMLHttpRequest 构造函数原生支持 XHR 对象：

let xhr = new XMLHttpRequest();

2.使用 XHR 对象首先要调用 open()方法。调用 open()不会实际发送请求，只是为发送请求做好准备

// 1.请求方式
// 2.url
// 3.是否异步
xhr.open("get", "example.php", false);

3.要发送定义好的请求，必须像下面这样调用 send()方法：send()方法接收一个参数，是作为请求体发送的数据。如果不需要发送请求体，则必须传 null，因为这个参数在某些浏览器中是必需的。调用 send()之后，请求就会发送到服务器

xhr.send(null);

4.响应数据

responseText：作为响应体返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML
DOM 文档。
status：响应的 HTTP 状态。
statusText：响应的 HTTP 状态描述。

XHR 对象有一个 readyState 属性，表示当前处在请求/响应过程的哪个阶段。每次 readyState 从一个值变成另一个值，都会触发 readystatechange 事件。这个属性有如下可能的值。

0：未初始化（ Uninitialized）。尚未调用 open()方法。
1：已打开（ Open）。已调用 open()方法，尚未调用 send()方法。
2：已发送（ Sent）。已调用 send()方法，尚未收到响应。
3：接收中（ Receiving）。已经收到部分响应。
4：完成（ Complete）。已经收到所有响应，可以使用了。

    let xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState == 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {console.log(xhr.responseText);} else {alert("Request was unsuccessful: " + xhr.status);}}};xhr.open("get", "https://www.dmagic.cn/json/?jsonid=1460", true);xhr.send(null);

超时
给 timeout 设置 1000 毫秒意味着，如果请求没有在 1秒钟内返回则会中断。此时则会触发 ontimeout 事件处理程序， readyState 仍然会变成 4，因此也会调用 onreadystatechange 事件处理程序。不过，如果在超时之后访问 status 属性则会发生错误。为做好防护，可以把检查 status 属性的代码封装在 try/catch 语句中

xhr.timeout = 1000; // 设置 1 秒超时
xhr.ontimeout = function() {alert("Request did not return in a second.");
};

javascript网络请求相关推荐

深入操作系统底层分析nginx网络请求及响应过程
0. 网络传输阶段比如说主机A是家里windows的一台笔记本电脑,主机B是linux服务器上的一个nginx,其监听80或443等web端口. 在笔记本的浏览器发送了一个http get请求,其数 ...
Web-big、html、css、JavaScript、vue、webpack、git、微信小程序、uni-app、性能优化、兼容性、网络请求、web安全、其他
文章目录 01.HTML基础 1.行内元素有哪些?行内块元素有哪些?块级元素有哪些? 空(void)元素有哪些? 2.页面导入样式时,使用link和@import有什么区别? 3.title与h1的区 ...
网络编程-JavaScript中发送网络请求汇总
文章目录 1.前后端分离优势 2.HTTP协议的解析 2.1 HTTP的介绍 2.2 HTTP的组成 2.3 HTTP的版本 2.4 HTTP请求方式 2.5 HTTP请求头字段 2.6 HTTP响应 ...
Flutter 网络请求库http
http 集成http库 https://pub.dartlang.org/packages/http 添加依赖 dependencies:http: ^0.12.0 安装 flutter packa ...
Chrome开发者工具关于网络请求的一个隐藏技能
这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子. 抓取帖子用的JavaScript函数如下: function getPostByAJAX(req ...
android网络请求框架_2020，最新APP重构：网络请求框架
在现在的app,网络请求是一个很重要的部分,app中很多部分都有或多或少的网络请求,所以在一个项目重构时,我会选择网络请求框架作为我重构的起点.在这篇文章中我所提出的架构,并不是所谓的最好的网络请 ...
小程序十一：网络请求
wx.request(OBJECT) wx.request发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 参数名类型必填说明 url Strin ...
vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...
鸿蒙开发-使用fetch发起网络请求
场景鸿蒙基于JS搭建HelloWorld并修改国际化文件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050 在 ...

javascript网络请求

javascript网络请求相关推荐

最新文章

热门文章