JavaScript学习—网络请求

在 JavaScript 中,XMLHttpRequest 对象是一个用于与服务器交换数据的接口,允许在后台与服务器进行异步通信。这使得网页可以在不中断用户交互的情况下从服务器请求数据。

方法

  1. open():用于设置请求的类型、URL和是否异步处理请求。

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'example.txt', true);
    
  2. send():用于发送请求。

    xhr.send();
    
  3. abort():用于停止当前的请求。

    xhr.abort();
    

属性

  1. readyState:表示请求/响应过程的当前状态,其值可以是以下几个常量:

    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成,且响应已就绪
  2. responseText:以字符串形式返回响应数据。

  3. status:返回服务器响应的 HTTP 状态码。

事件

  1. readystatechange:当 readyState 属性改变时触发。

  2. load:当请求成功完成时触发。

  3. error:当请求失败时触发。

示例代码

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {console.log(xhr.responseText);} else {console.error('Request failed. Status:', xhr.status);}}
};xhr.open('GET', 'example.txt', true);
xhr.send();

在这个例子中,当 readyState 变为 4 并且 status 为 200 时,表示请求成功完成,我们就可以在控制台中看到响应数据。如果请求失败,则会打印出错误信息。

项目案例

index.html 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fetch API Example</title>
</head>
<body><h1>Fetch API Example</h1><input type="text" id="urlInput" placeholder="Enter a URL"><button onclick="fetchData()">Fetch Data</button><div id="content"></div><script src="script.js"></script>
</body>
</html>

 script.js

function fetchData() {const urlInput = document.getElementById('urlInput');const url = urlInput.value;const content = document.getElementById('content');fetch(url).then(response => {if (!response.ok) {throw new Error(`Network response was not ok - ${response.statusText}`);}return response.text();}).then(data => {content.innerHTML = data;}).catch(error => {content.innerHTML = `Error: ${error.message}`;});
}
  1. 在 index.html 中,我们创建了一个输入框和一个按钮。当用户输入一个 URL 并点击按钮时,会触发 fetchData 函数。
  2. 在 script.js 中,fetchData 函数使用 fetch API 来获取 URL 的内容。如果请求成功,它将内容显示在网页上;如果请求失败,它将错误信息显示在网页上。

这个项目是一个简单的示例,但它展示了如何使用 fetch API 在 JavaScript 中进行网络请求。在实际项目中,您可能需要处理更多的异常情况,例如跨源资源共享(CORS)问题,或者使用其他类型的请求(如 POST 请求)

 

请注意,虽然 XMLHttpRequest 仍然是一个有效的 API,但现代 JavaScript 开发更倾向于使用 fetch API 或其他库,如 axios 或 jQuery.ajax,因为它们提供了更现代、更简洁的 API 并且支持更多的功能,如请求取消、Promise 支持等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/7957.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库-脏读

脏读&#xff08;Dirty Read&#xff09;是数据库并发控制中的一个概念&#xff0c;指的是一个事务读取了另一个尚未提交的事务的修改。由于另一个事务的修改可能最终会被撤销&#xff08;即发生回滚操作&#xff09;&#xff0c;因此&#xff0c;当前事务读取到的数据可能是“…

一览函数式编程

文章目录 一、 什么是函数式编程1.1 编程范式1.1.1 命令式编程(Imperative Programming)范式1.1.2 声明式编程(Declarative Programming)范式1.1.3 函数式编程(Functional Programming)范式1.1.4 面向对象编程(Object-Oriented Programming)范式1.1.5 元编程(Metaprogramming)范…

ThinkPHP5.1 创建控制器类

在ThinkPHP中&#xff0c;控制器是MVC模式中的核心组件之一&#xff0c;负责接收用户请求并处理相应的业务逻辑。在本篇技术博客中&#xff0c;我们将深入探讨ThinkPHP5.1中的控制器操作&#xff0c;包括创建控制器、路由绑定、请求参数获取等方面的知识点。 1.创建控制器 在T…

(1day)致远M3 log 敏感信息泄露漏洞(Session)复现

前言 系统学习web漏洞挖掘以及项目实战也有一段时间了,发现在漏洞挖掘过程中难免会碰到一些历史漏洞,来帮助自己或是提高自己挖洞和及时发现漏洞效率,于是开始创建这个专栏,对第一时间发现的1day以及历史漏洞进行复现,来让自己更加熟悉漏洞类型以及历史漏洞,方便自己在后续的项…

商家制作微信小程序有什么好处?微信小程序的制作有哪些步骤和流程

微信小程序全面指南 微信小程序是微信生态系统中一项革命性的功能&#xff0c;为希望与庞大的微信用户群体互动的企业提供了独特的融合便捷性和功能性的体验。本全面指南深入探讨了微信小程序的世界&#xff0c;强调了其重要性、工作原理以及实际用例&#xff0c;特别是针对企…

开发组合php+mysql 人才招聘小程序源码搭建 招聘平台系统源码+详细图文搭建部署教程

随着互联网的快速发展&#xff0c;传统的招聘方式已经不能满足企业和求职者的需求。为了提高招聘效率&#xff0c;降低招聘成本&#xff0c;越来越多的人开始关注人才招聘小程序、在线招聘平台。分享一个人才招聘小程序源码及搭建&#xff0c;让招聘更加高效便捷。系统是运营级…

windows安装ElasticSearch以及踩坑

1.下载 elasticsearch地址&#xff1a;Past Releases of Elastic Stack Software | Elastichttps://www.elastic.co/cn/downloads/past-releases#elasticsearch IK分析器地址&#xff1a;infinilabs/analysis-ik: &#x1f68c; The IK Analysis plugin integrates Lucene IK…

VS2022快捷键修改

VS2022快捷键修改 VS2022快捷键修改 VS2022快捷键修改

c++笔记——概述运算符重载——解析运算符重载的难点

前言:运算符重载是面向对象的一个重要的知识点。我们都知道内置类型可以进行一般的运算符的运算。但是如果是一个自定义类型&#xff0c; 这些运算符就无法使用了。那么为了解决这个问题&#xff0c; 我们的祖师爷就在c中添加了运算符重载的概念。 本篇主要通过实例的实现来讲述…

网络网络层之(4)IPv4协议

网络网络层之(1)IPv4协议 Author: Once Day Date: 2024年4月4日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day的…

数据结构-线性表-应用题-2.2-8

已知在一维数组A[mn]中依次存放两个线性表&#xff08;a1,a2,a3,...am&#xff09;和&#xff08;b1,b2,b3,...bm&#xff09;编写一个函数&#xff0c;将数组中的两个顺序表的位置互换&#xff0c;即将&#xff08;b1,b2,b3,...bm&#xff09;放在&#xff08;a1,a2,a3,...am&…

python 关键字(in)

9、in 在Python中&#xff0c;in关键字是一个强大的工具&#xff0c;用于检查一个元素是否存在于某个序列&#xff08;如列表、元组、字符串等&#xff09;或集合&#xff08;如集合、字典的键&#xff09;中。 基础小白知识&#xff1a;in的基本用法 1.1 在序列中检查元素 …

JAVASE复习之多线程

多线程 1 多线程入门1.1 多线程的创建方式1.1.1 继承Thread方式1.1.2 实现Runable方式 1.2 Thread类中常用方法 1 多线程入门 1.1 多线程的创建方式 1.1.1 继承Thread方式 基本步骤&#xff1a; 创建一个类继承Thread类。在类中重写run方法&#xff08;线程执行的任务放在这…

《QT实用小工具·五十九》随机图形验证码,带有一些可人的交互与动画

1、概述 源码放在文章末尾 该项目实现了可交互的动画验证码控件&#xff0c;趣味性十足&#xff1a; 字符变换动画 噪音动画 可拖动交互 项目demo演示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #ifndef CAPTCHAMOVABLELABEL_H #define CAPTCHAMOVABLELABEL…

线程池前世今生及源码实现

文章目录 ⭐前序一、是什么(what)功能构成 二、为什么(why)三、何处(where)四、何时(when)五、谁(who)六、怎么样(how)实践和性能调优策略线程池源码&#xff08;Code&#xff09;[待补充] ⭐前序 本文讲什么&#xff1a; 线程池的概念、工作原理、优势、实际应用中的使用场景…

VMware虚拟机提示内存不足

VMware虚拟机&#xff0c;k8s集群搭建内存不足的问题 疑问&#xff1a;我的电脑是8G8G双通道的内存&#xff0c;当我在搭建k8s集群时给master-2G内存&#xff0c;node1-3G内存&#xff0c;node2-3G内存&#xff1b; 当依次打开虚拟机到node2时VM提示“物理内存不足&#xff0c;…

【win32_004】系统配置信息、HIWORD宏、打印系统配置信息

文章目录 1. 获取系统度量或系统配置信息2. 格式化文本输出到图形输出3. HIWORD宏 1. 获取系统度量或系统配置信息 函数介绍 int WINAPI GetSystemMetrics(_In_ int nIndex);2. 格式化文本输出到图形输出 #mermaid-svg-RJl99A670ndu7R9k {font-family:"trebuchet ms&quo…

【busybox记录】【shell指令】cut

目录 内容来源&#xff1a; 【GUN】【cut】指令介绍 【busybox】【cut】指令介绍 【linux】【cut】指令介绍 使用示例&#xff1a; 关于参数的特殊说明&#xff1a; 打印行中选定部分 - 输出每行的第n-m个字节 打印行中选定部分 - 输出每行的第n-m个字符 打印行中选定…

【论文阅读】Fuzz4All: Universal Fuzzing with Large Language Models

文章目录 摘要一、介绍二、Fuzz4All的方法2.1、自动提示2.1.1、自动提示算法2.1.2、自动提示的例子2.1.3、与现有自动提示技术的比较 2.2、fuzzing循环2.2.1、模糊循环算法2.2.2、Oracle 三、实验设计3.1、实现3.2、被测系统和baseline3.3、实验设置以及评估指标 四、结果分析4…

每日OJ题_贪心算法三③_力扣45. 跳跃游戏 II(dp解法+贪心解法)

目录 力扣45. 跳跃游戏 II 解析代码1_动态规划 解析代码2_贪心 力扣45. 跳跃游戏 II 45. 跳跃游戏 II 难度 中等 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 num…