XHR 和 AJAX 的结合 - API 测试

news/2024/11/8 9:09:18/

    大家好,之前一期介绍了怎样通过工具类进行对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.ppmy.cn/news/48885.html

相关文章

@Configuration 和 @Component 注解的区别

一句话概括就是 Configuration 中所有带 Bean 注解的方法都会被动态代理,因此调用该方法返回的都是同一个实例。 理解:调用Configuration类中的Bean注解的方法,返回的是同一个示例; 而调用Component类中的Bean注解的方法&#x…

机器学习——核函数

问:已知三维空间中的两个样本点分别为(2,4,5)和(1,2,3),定义核函数表达式为:试计算这两个样本点映射到十维空间后的 答:首先计算两个样本点的平方内积2*14*25*325 然后代入核函数表…

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

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

ASEMI代理ADG736BRMZ-REEL7原装ADI车规级ADG736BRMZ-REEL7

编辑:ll ASEMI代理ADG736BRMZ-REEL7原装ADI车规级ADG736BRMZ-REEL7 型号:ADG736BRMZ-REEL7 品牌:ADI /亚德诺 封装:MSOP-10 批号:2023 安装类型:表面贴装型 引脚数量:10 类型&#xff1…

Window10下安装DPDK

由于我装的是vs2019,打开Visual Studio Installer,在可选下,选择Windows 10 SDK,点击修改。 右键此电脑属性,查看Windows10版本。 安装WDK,打开网址https://learn.microsoft.com/zh-cn/windows-hardware/…

刚刚入职Android开发的应届生,该如何走向架构师

相信有不少从事Android开发的朋友,在工作一两年后会陷入一段迷茫期,有的是在工作中遇到了瓶颈,感觉无法突破;有的是想进阶成为架构师,但不知道如何进阶,因此产生了一些烦恼。为此小编在这里分享Android开发…

虚拟机配置工作环境

一、安装cmake apt-get install cmake 二、配置JAVA环境 1、将这两个文件放入虚拟机文件系统中,拖进去即可 2、执行安装命令./ 3、拉代码svn rootmlw-virtual-machine:~/svnCode# svn --username wangmiaolin co https://10.200.20.20/svn/TIASDev/Devsrc/Branch…

yolov5-7.0 训练自己的数据集之检测数据集

YOLOv5是一种单阶段目标检测算法,有很高的精度和速度,因为项目需求,需要利用yolov5-7.0训练自己的目标检测数据集。 假设,环境已经配置完成! 1)准备数据集 在D:\Graduation_Project_Coding\network_class…