手写原生Ajax

  1. 打开请求:
xhr.open('GET', '/api/lian', true);


这里使用open方法初始化一个请求。参数分别为:

    • 'GET':请求的方法,这里是GET方法,用于从服务器获取数据。
    • '/api/lian':请求的URL,表示将向服务器的/api/lian端点发送请求。
    • true:表示这个请求应该是异步的(async)。如果为false,请求将是同步的,但在这里设置为true意味着当请求正在进行时,JavaScript代码将继续执行,不会阻塞。
  1. 设置onreadystatechange事件处理程序:
xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {let data = JSON.parse(xhr.responseText);}
};


这段代码为xhr对象设置了onreadystatechange事件处理函数。当请求的状态改变时,这个函数会被调用。readyState属性表示请求的不同阶段(0到4),其中4表示请求已完成且响应已就绪。status属性是HTTP状态码,200表示请求成功。

    • xhr.readyState == 4xhr.status == 200时,说明请求已经完成并且成功了。此时,可以通过xhr.responseText获取到服务器返回的文本内容,并尝试将其解析成JSON对象,存储在变量data中。

注意:在实际应用中,你可能还需要考虑错误处理,以及确保在调用JSON.parse之前检查响应内容是否为空或不是有效的JSON格式,以避免运行时错误。此外,如果是跨域请求,还需确保服务器支持CORS(跨源资源共享)。

以上代码是一个典型的AJAX GET请求的实现,用于向服务器请求数据并在客户端处理这些数据。

let xhr=new XMLHttpRequest();
xhr.open('get','/api/lian',true);
xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){let data=JSON.parse(xhr.responseText);}
}

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

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

相关文章

【Academy】测试WebSockets安全漏洞Testing for WebSockets security vulnerabilities

测试WebSockets安全漏洞Testing for WebSockets security vulnerabilities 概述WebSockets是什么?HTTP和WebSockets有什么区别?如何建立WebSocket连接?WebSocket消息看起来像什么? 操纵WebSocket流量拦截和修改WebSocket消息重放和生成新的W…

Python常用模块

math模块 Python官方提供的 math 模块进行数学运算,如指数、对数、平方根和三角函数等运算。math 模块中的函数只是整数和浮点,不包括复数,复数计算需要使用 cmath模块。在使用 math 模块前要先导入 math 模块。 舍入函数 函数名说明math.…

Qt 智能指针类详解

在Qt框架中,提供了多种智能指针类,用于管理对象的生命周期和内存。常见的包括QPointer、QSharedPointer、QWeakPointer和QScopedPointer。它们各自有不同的用途和行为特点。本文将详细介绍这些类的区别和使用场景。 QPointer QPointer是一个模板类&…

链式队列算法库构建

学习贺利坚老师课程,构建链式队列算法库 数据结构之自建算法库——链队(链式队列)_数据结构函数链队列的算法框架有哪些-CSDN博客文章浏览阅读6.2k次,点赞3次,收藏9次。本文针对数据结构基础系列网络课程(3):栈和队列…

低碳短视频:成都柏煜文化传媒有限公司

低碳短视频:绿色传播的新风尚 随着全球气候变化和环境问题日益严峻,低碳生活已经成为人们追求的新风尚。在这个背景下,低碳短视频应运而生,以其独特的方式传播绿色理念,推动低碳生活方式的普及。成都柏煜文化传媒有限…

RedisConnectionException: Unable to connect to 127.0.0.1:6379

idea报错无法连接到redis org.springframework.data.redis.RedisConnectionFailureException: Unable to connect to Redis; nested exception is org.springframework.data.redis.connection.PoolException: Could not get a resource from the pool; nested exception is io.…

printf趣味代码,打印图案

文章目录 1.打印佛祖2.打印猫猫 (闪烁效果) 1.打印佛祖 #include <stdio.h>void budda_bless(){printf("///\n\ // _ooOoo_ //\n\ // o8888888o //\n\ // …

文件I/O基础-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板

文件I/O基础 本章将介绍Linux应用编程中最基础的知识&#xff0c;即文件I/O&#xff08;Input/Output&#xff09;。文件I/O指的是对文件进行读写操作&#xff0c;在Linux系统中一切皆文件&#xff0c;这是Linux系统设计的核心理念&#xff0c;因此文件I/O操作既是基础又是最重…

【软件下载】Folx详细安装教程视频-Folx软件最新版下载

根据大数据调查表明Acceleration PRO下载&#xff1a;抽出多达10个流的故障能够显着提高下载速度。根据行业数据显示与iTunes PRO集成&#xff1a;通过将Folx集成到iTunes来下载歌曲和视频&#xff0c;能够在下载后立即自动添加到iTunes库。实际上我们可以这样讲通过代理下载&a…

udp udpClient 聊天室

简介 1、UDP&#xff08;User Data Protocol&#xff0c;用户数据报协议&#xff09; &#xff08;1&#xff09; UDP是一个非连接的协议&#xff0c;传输数据之前源端和终端不建立连接&#xff0c;当它想传送时就简单地去抓取来自应用程序的数据&#xff0c;并尽可能快地把它…

Vue38 安装脚手架 vue-cli ,并使用脚手架创建项目

安装脚手架 vue-cli &#xff0c;并使用脚手架创建项目 第一步 安装脚手架 npm config set registry https:\\[registry.npmmirror.com // 切换淘宝镜像 npm install -g vue/cli第二步 切换到创建项目的目录&#xff0c;创建项目 cd XXX vue create XXX第三步 启动项目 npm…

化茧成蝶 | 继HuggingFace首家落地大模型具身智能场景

关于具身智能的起源 近年来&#xff0c;大语言模型&#xff08;LLMs&#xff09;的兴起给机器人领域带来了革命性的改变&#xff0c;大模型赋予了传统机器人理解和推理的能力&#xff0c;让具身智能这一概念再度出现在大众的视角中。OpenCSG 作为国内 AI 开源社区的先锋&#…

[AI MoneyPrinterTurbo] 一键成片,超级印钞机

今天&#xff0c;我们将踏上一段关于MoneyPrinterTurbo的探索之旅&#xff0c;这是一个文生视频工具&#xff0c;旨在让视频创作变得轻松而有趣。 故事的开始 想象一下&#xff0c;你只需要提供一个视频主题或关键词&#xff0c;剩下的——视频文案、素材、字幕、背景音乐&am…

openCV3.0 C++ 学习笔记补充(自用 代码+注释)---持续更新 二(51-)

环境&#xff1a;OpenCV3.2.0 VS2015 51、Mean-Shift算法分割图像 cv::pyrMeanShiftFiltering() 参考链接&#xff1a;【从零学习OpenCV 4】分割图像——Mean-Shift分割算法 Mean-Shift算法又被称为均值漂移法&#xff0c;是一种基于颜色空间分布(彩色图像的像素值)的图像分割…

pycharm鼠标变成小方块

异常图片&#xff1a; 异常原因&#xff1a;误动了键盘insert键 解决方法&#xff1a;Fninsert

根据配置生成一个合并单元格的table表格的html代码

​分享最近工作中遇到的一个场景&#xff1a;导出表格&#xff0c;需要准备好表格的html代码&#xff0c;此表格支持最上面的表头合并且居中展示表格标题&#xff0c;如果上下行数据有相同的&#xff0c;则要上下合并单元格 封装了一个如下的方法 const configToTable (conf…

openai类模型的超参数含义

model&#xff1a; 模型名 frequency_penalty&#xff1a; Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model’s likelihood to repeat the same line verbatim. 该参数的值范围…

国家自然科学基金标书大全(2002-2024)

数据来源&#xff1a;在20世纪80年代初&#xff0c;为了促进中国的科技体制革新并改革科研资金分配机制&#xff0c;中国科学院的89位院士联名向党和国家领导人提出建议&#xff0c;设立了国家自然科学基金的设立。国自然基金自创立以来&#xff0c;根据国家发展科学技术方针、…

Vue配置项data

data 目录 data 目录类型介绍关键原理编译过程 Vue2Vue3 &#x1f4cc;Vue.js 中的 data&#xff08;Obj/Function&#xff09;属性是 Vue 实例的一个配置选项 类型介绍 对象式 对于根实例或者非复用组件&#xff0c;通常直接提供一个对象字面量作为 data 的值。在对象式中…

Follow Carl To Grow|【LeetCode】491.递增子序列,46.全排列,47.全排列 II

【LeetCode】491.递增子序列 题意&#xff1a;给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以…