XHR 和 AJAX 的结合 - API 测试

    大家好,之前一期介绍了怎样通过工具类进行对API 接口测试,这一期将演示如何手写一个 Ajax的请求。


    什么是 XHR ? 全称为 XMLHttpRequest ,它是浏览器内置的对象,使得 JavaScript 可以发送 HTTP 请求。
    什么是Ajax ? Ajax是一种用于创建快速动态网页的技术,在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式。通过XmlHttpRequest对象向服务器发异步请求,从服务器获取数据。然后通过JavaScript来操作DOM而更新页面。也就是JavaScript可以及时向服务器提出请求和处理响应,而不阻塞程序运行,达到无刷新的效果。JavaScript是单线程的,会阻塞代码运行,所以引入了XmlHttpRequest请求处理异步数据。XHR 和 AJAX 技术的结合,可以使网页在不刷新的情况下局部更新页面内容,加快网页的展示。
    1. 创建 xhr 对象,主要有两种模式,兼容模式和标准模式。
    (1) 标准模式: xhr = new XMLHttpRequest()
    (2) 兼容模式:通过添加判断条件

在这里插入图片描述



      var xhr;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else {
        //for IE6, IE5 兼容
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }


    2. 建立连接: 调用 xhr.open(参数1、参数2、参数3) 方法,连接服务器。

    参数1: 请求的方式,主要有 "GET" 和 "POST"
    参数2 : 请求的 URL
    参数3: 是否异步发送请求的 Boolean,通常不填,默认为 "TRUE", 表示异步发送,一般情况下,不推荐同步发送。

    以打开VIP 这个XHR加载的API

在这里插入图片描述



    打开这个API, 正常是返回了 {“result”:1}



在这里插入图片描述



在这里插入图片描述



    3. 发送请求 : xhr.send();
    4. 创建监听请求的readyStateChange事件

    其中判断的条件中,xhr.readyState 为4时 , 表示 下载操作完成;
xhr.status 为 200,表示响应状态码正常。



在这里插入图片描述



 // 发送请求
      xhr.send();

     // 创建监听请求的readyStateChange事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            alert(xhr.responseText);
          } else {
            alert('出错了,Err:' + xhr.status);
          }
        }
      };


    请求结果正常显示,返回接口所响应的内容。



在这里插入图片描述



    再以 “GET” 为请求方式,进行测试。



在这里插入图片描述



在这里插入图片描述



    同样请求结果正常显示,返回接口所响应的内容。



在这里插入图片描述



xhr.open("GET","https://guangzhou.zbj.com/cgyx/api/getServiceBycate?categories%5B%5D=18077&categories%5B%5D=18078&categories%5B%5D=18079&categories%5B%5D=18081&categories%5B%5D=18082&sign=P20221222101&localCityId=3493&query%5Bsize%5D=5"); 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

monocle3轨迹分析

<~生~信~交~流~与~合~作~请~关~注~公~众~号生信探索> monocle3与PAGA有点类似&#xff0c;在UMAP图上显示轨迹图&#xff0c;没有了树状的结构。 原理、图的理解&#xff0c;可以参考Reference中的链接 安装 ubuntu sudo apt install libudunits2-dev libgdal-dev R spee…

Python 基础(十):元组

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 一、声明元组二、访问元组三、修改元组变量四、遍历元组五、切片六、常用函数和方法6.…

MySQL_第13章_约束

第13章_约束 1. 约束(constraint)概述 1.1 为什么需要约束 数据完整性&#xff08;Data Integrity&#xff09;是指数据的精确性&#xff08;Accuracy&#xff09;和可靠性&#xff08;Reliability&#xff09;。它是防止数据库中存在不符合语义规定的数据和防止因错误信息…

【设计模式】深入浅出--外观模式

文章目录 前言一、外观模式介绍二、案例场景三、外观模式优缺点四、外观模式应用场景总结 前言 不知道大家有没有比较过自己泡茶和去茶馆喝茶的区别&#xff0c;如果是自己泡茶需要自行准备茶叶、茶具和开水&#xff0c;而去茶馆喝茶&#xff0c;最简单的方式就是跟茶馆服务员…

【UE】暂停游戏界面及功能实现

效果 步骤 1. 首先在项目设置中添加一个暂停的操作映射 2. 新建一个控件蓝图&#xff0c;命名为“PauseMenuWidget” 3. 打开“ThirdPersonCharacter”&#xff0c;添加一个布尔类型变量&#xff0c;命名为“isScreenShow”&#xff0c;用于判断当前玩家是否打开了暂停界面 在…

S7-200 SMART 和 S7-1200PLC进行PROFINET IO通信

从 S7-200 SMART V2.5 版本开始,S7-200 SMART 开始支持做 PROFINET IO 通信的智能设备。因此,两个 S7-200 SMART 之间可以进行 PROFINET IO 通信,一个CPU 作PROFINET IO 控制器,一个 CPU 作 PROFINET 通信的设备。组态的时候有两种方法,一种是通过硬件目录组态另外一种是通…

原理+配置+实战,Canal一套带走

前几天在网上冲浪的时候发现了一个比较成熟的开源中间件——Canal。在了解了它的工作原理和使用场景后&#xff0c;顿时产生了浓厚的兴趣。今天&#xff0c;就让我们跟随阿Q的脚步&#xff0c;一起来揭开它神秘的面纱吧。 简介 canal 翻译为管道&#xff0c;主要用途是基于 M…

EEG源定位

导读 自从脑电图(EEG)被发现以来&#xff0c;人们希望EEG能提供一个了解大脑的窗口&#xff0c;研究人员一直试图用EEG无创定位大脑中产生头皮电位的神经元活动。20世纪50年代的早期探索使用电场理论从头皮电位分布推断大脑中电流偶极子的位置和方向&#xff0c;引发了大量定量…

2023美赛春季赛Z题模型代码

已经完成模型代码&#xff0c;仅供大家参考&#xff0c;需要更多请看文末 一、问题分析 首先需要收集与奥运会举办城市/国家相关的历史数据。这需要涉及诸如经济、土地利用、人类满意度&#xff08;包括运动员和观众&#xff09;、旅行、基础设施建设、环境影响等多个方面。数…

日常项目技术方案脉络

开篇引砖 软件在其生命周期中&#xff0c;当其进入稳定期后&#xff0c;大部分时间都处于迭代更新维护阶段。在这漫长的三年甚至五年的存活期内&#xff0c;我们需要面对林林种种大大小小的需求。今天我们就聊聊在这段期间&#xff0c;如何快速产出一份合格的技术方案。 方案给…

Banana Pi BPI-Centi-S3 使用MicroPython编程显示JPG图片

BPI-Centi-S3是我们新推出的一款板载1.9英寸彩屏的小尺寸ESP32-S3开发板&#xff01; BPI-Centi-S3 banana-pi wiki BPI-Centi-S3 bpi-steam wiki 1 关键特性 ESP32-S3&#xff0c;Xtensa 32 bit LX72M PSRAM , 8M FLASH2.4G WIFI &#xff0c;Bluetooth 5 &#xff0c;Blue…

基于鲸鱼算法的极限学习机(ELM)回归预测-附代码

基于鲸鱼算法的极限学习机(ELM)回归预测 文章目录 基于鲸鱼算法的极限学习机(ELM)回归预测1.极限学习机原理概述2.ELM学习算法3.回归问题数据处理4.基于鲸鱼算法优化的ELM5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;本文利用鲸鱼算法对极限学习机进行优化&#xff0c;并…

微服务学习之面试知识相关总结(Nacos、MQ)

文章目录 壹 微服务Nacos1.1 SpringCloud常见组件1.2 Nacos的服务注册表结构1.3 Nacos如何支撑内部数十万服务注册压力1.4 Nacos避免并发读写冲突问1.5 Nacos与Eureka的区别1.6 Sentinel的限流与Gateway的限流的差别1.7 Sentinel的线程隔离与Hystix的线程隔离的差别 贰 MQ知识2…

7款神仙级非常漂亮的 Linux 操作系统UI,你都用过吗

Linux 的发行版有很多&#xff0c;这里罗列7个漂亮的 Linux 发行版&#xff0c;可以说是Linux操作系统界的颜值担当了。 1、elementary OS 网站&#xff1a;https://elementaryos.cn elementary OS操作系统是最漂亮的Linux发行版之一。它基于macOS外观&#xff0c;同时为Linu…

C# 特性(Attribute)

一、特性&#xff08;Attribute&#xff09;定义 特性&#xff08;Attribute&#xff09;是用于在运行时传递程序中各种元素&#xff08;比如类、方法、结构、枚举、组件等&#xff09;的行为信息的声明性标签。您可以通过使用特性向程序添加声明性信息。 特性使用中括号…

AI智能课程第一讲:chatgpt介绍

AI应用现状 用AI艺术创作 一个小女孩打折手电筒在侏罗世纪公园找恐龙。 AI用于医疗行业 AI辅助驾驶 AI广告投放上的应用 什么是chatgpt&#xff1f; chatgpt相关技术的发展 为什么用chatgpt写代码会特别的快呢&#xff1f; 因为它集成了GitHub上所有开发者的库公用资源&…

供需两端催化口腔医疗服务市场增长 未来将呈现线上化、智能化、品质化三大趋势

一、口腔医疗服务行业概述 口腔由唇、颊、舌、腭、涎腺、牙和颌骨等部分组成。口腔疾病种类繁多&#xff0c;伴随人全生命周期&#xff0c;常见疾病有龋病、牙周疾病、牙髓病、根尖周病、牙齿缺损、错颌畸形等&#xff0c;多数口腔疾病的发病率高&#xff0c;诊疗需求大。除此…

原型设计工具即时设计、Axure、Figma、Sketch,哪个更好用?

在线网页原型图设计软件的使用与桌面端相比具备优势&#xff0c;因为在线网页原型图设计软件的使用全程不需要安装&#xff0c;而且在线网页原型图设计软件也没有任何地点上的限制&#xff0c;更主要的是在线网页原型图设计软件在操作系统上也没有限制&#xff0c;不论是现在使…

GPT模型支持下的Python-GEE遥感云大数据分析、管理与可视化技术应用

随着航空、航天、近地空间等多个遥感平台的不断发展&#xff0c;近年来遥感技术突飞猛进。由此&#xff0c;遥感数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量也大幅增长&#xff0c;使其越来越具有大数据特征。对于相关研究而言&#xff0c;遥感大数据的出现为其提…

服务型企业如何使用飞项实现项目化管理?

服务型企业的业务模式一般都是按项目来运作的&#xff0c;其业务分为售前&#xff0c;售中和售后三个阶段&#xff0c;分别由不同部门和人员对客户进行个性化服务。在这个过程中需要对人、流程和知识的高效统筹管理&#xff0c;即项目的整体管理&#xff0c;因此存在着不小的挑…
最新文章