ArcGIS API for JavaScript 4.15系列（7）——Dojo中的Ajax请求操作
1、前言
作为重要的前后端交互技术，Ajax被广泛应用于Web项目中。无论是jQuery时代的$.ajax还是Vue时代下的axios，它们都对Ajax做了良好的封装处理。而Dojo也不例外，开发者使用dojo/request模块可以轻松实现Ajax相关操作，下面开始介绍。
2、Get请求的一般格式
Dojo中的dojo.request模块提供了request.get方法，该方法可以向后台发送Get请求，其一般格式如下所示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body><input id="userName" type="text" value="admin" /><input id="password" type="password" value="12345" /><button id="btn">提交</button><script>require(['dojo/dom', 'dojo/on', "dojo/request"], function (dom, on, request) {on(dom.byId('btn'), 'click', function () {// 获取表单值var userName = dom.byId('userName').value;var password = dom.byId('password').value;// 发送Get请求request.get('Handlers/GetDataHandler.ashx', {query: 'userName=' + userName + '&password=' + password,sync: false,handleAs: 'json'}).then(// 请求成功的回到函数function (response) {window.alert('用户：' + response.UserName + '\r\n密码：' + response.Password);},// 求情失败的回调函数function (error) {window.alert(error);})})});</script>
</body>
</html>
后台代码如下：
using Newtonsoft.Json;
using System.Web;namespace App.Handlers
{/// <summary>/// GetDataHandler 的摘要说明/// </summary>public class GetDataHandler : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";// 获取参数string userName = context.Request["userName"].ToString();string password = context.Request["password"].ToString();// 创建对象User user = new User{UserName = userName,Password = password};// 输出context.Response.Write(JsonConvert.SerializeObject(user));}public bool IsReusable{get{return false;}}}public class User{public string UserName { get; set; }public string Password { get; set; }}
}
运行结果如下图所示：
3、Post请求的一般格式
Dojo中的dojo.request模块提供了request.post方法，该方法可以向后台发送Post请求，其一般格式如下所示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body><input id="userName" type="text" value="admin" /><input id="password" type="password" value="12345" /><button id="btn">提交</button><script>require(['dojo/dom', 'dojo/on', "dojo/request"], function (dom, on, request) {on(dom.byId('btn'), 'click', function () {// 获取表单值var userName = dom.byId('userName').value;var password = dom.byId('password').value;// 发送Get请求request.post('Handlers/GetDataHandler.ashx', {data: {userName: userName,password: password},sync: false,handleAs: 'json'}).then(// 请求成功的回到函数function (response) {window.alert('用户：' + response.UserName + '\r\n密码：' + response.Password);},// 求情失败的回调函数function (error) {window.alert(error);})})});</script>
</body>
</html>
后台代码如下：
using Newtonsoft.Json;
using System.Web;namespace App.Handlers
{/// <summary>/// GetDataHandler 的摘要说明/// </summary>public class GetDataHandler : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";// 获取参数string userName = context.Request["userName"].ToString();string password = context.Request["password"].ToString();// 创建对象User user = new User{UserName = userName,Password = password};// 输出context.Response.Write(JsonConvert.SerializeObject(user));}public bool IsReusable{get{return false;}}}public class User{public string UserName { get; set; }public string Password { get; set; }}
}
运行结果如下图所示：
4、query参数
在上面的代码中，Get请求有一个query参数，该参数主要用于URL传值。一般情况下，Get请求的参数包含在URL中，代码如下：
request.get('Handlers/GetDataHandler.ashx?userName=' + userName + '&password=' + password, {sync: false,handleAs: 'json'
})
Dojo允许把Get请求的参数写在query参数中，代码如下：
request.get('Handlers/GetDataHandler.ashx', {query: 'userName=' + userName + '&password=' + password,sync: false,handleAs: 'json'
})
5、data参数
在Get请求中，我们可以把需要传递的参数直接写在URL中，也可以写在query参数中。而在Post请求中，参数需要定义在data参数的键值对中，代码如下：
request.post('Handlers/GetDataHandler.ashx', {data: {userName: userName,password: password},sync: false,handleAs: 'json'
})
6、handleAs参数
handleAs参数用于定义后台传回的数据格式。上面的代码将handleAs参数的值设置为json，这表示后台传回的数据会被浏览器解析为JSON对象，因此在回调函数中可以使用response.UserName获取用户名，代码如下：
function (response) {window.alert('用户：' + response.UserName + '\r\n密码：' + response.Password);
}
如果将上面代码中handleAs参数的值设置为text，则运行结果如下所示。因为此时浏览器会将后台返回的数据解析为一般的文本字符串，所以无法通过response.UserName和response.Password获取值，运行结果自然也就是undefined了。
7、sync参数
一般情况下，Ajax都会被设置为异步执行，因此Ajax请求并不会阻塞后续的代码执行。sync参数表示是否同步执行，true表示同步执行，false表示异步执行。先看一段异步执行的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body><script>require(["dojo/request"], function (request) {// 异步Ajaxrequest.post('Handlers/GetDataHandler.ashx', {sync: false,handleAs: 'text'}).then(function (response) {console.log(response);})// 其他代码console.log('Hello World');});</script>
</body>
</html>
后台代码如下：
using System.Web;namespace App.Handlers
{/// <summary>/// GetDataHandler 的摘要说明/// </summary>public class GetDataHandler : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";context.Response.Write("执行Ajax");}public bool IsReusable{get{return false;}}}
}
运行结果如下所示，可以发现异步的Ajax请求并未阻塞其他代码的执行。
Hello World
执行Ajax
如果将sync参数的值设置为true则表示同步执行，此时Ajax请求会阻塞其他代码的执行，运行结果如下所示：
执行Ajax
Hello World
8、结语
本文简单介绍了Dojo中的Ajax请求操作。其实Dojo中的Ajax模块内容非常丰富，有兴趣的同志可以访问Dojo官方文档自行了解。
相关文章：
ArcGIS API for JavaScript 4.15系列（7）——Dojo中的Ajax请求操作
1、前言 作为重要的前后端交互技术，Ajax被广泛应用于Web项目中。无论是jQuery时代的$.ajax还是Vue时代下的axios，它们都对Ajax做了良好的封装处理。而Dojo也不例外，开发者使用dojo/request模块可以轻松实现Ajax相关操作，下面开始…...
智慧校园电子班牌系统
智慧电子班牌区别于传统电子班牌，智慧校园电子班牌系统更加注重老师和学生的沟通交流和及时数据交互。学校为每个教室配置一台智能电子班牌，一般安装于教室门口，用来实时显示学校通知、班级通知，可设置集中分布式管理，…...
软考高项——第五章进度管理
范围管理进度管理总线索规划进度管理定义活动活动排序估算活动资源估算活动时间制定进度管理计划控制进度进度管理总线索 进度管理的总线索包括： 1）规划进度管理 2）定义活动 3）活动排序 4）估算活动资源 5）…...
基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【二】【整合springSecurity】
1、创建数据库 注意：mysql默认字符集为utf8，默认排序规则为utf8_general_ci。一般我们也会选择字符集为utf-8 MySQL在5.5.3之后增加了这个utf8mb4的编码，utf8mb4完全向下兼容utf8，为了节省空间，一般情况下使用utf8也就…...
字节6面，成功唬住面试官拿了27K，软件测试面试也没有传说中那么难吧....
字节的面试挺独特，每轮面试都没有 HR 约时间，一般是晚上 8 点左右面试官来一个电话，问是否能面试，能的话开始面，不能就约一个其它时间。全程 6 面，前五面技术面，电话面试，最后一面是…...
Qt扫盲-QMake 语言概述
QMake 语言概述一、概述二、变量三、替换函数四、测试函数一、概述 这里主要就是记录一下如何使用 qmake Manual，里面关于我对 qmake的理解，以及如何配置这个 qt 工程文件，通过配置工程文件，来构建出，APP，…...
代码随想录二刷Day02链表:203.移除链表元素，707.设计链表，206.反转链表
203.移除链表元素（写if的时候，要考虑要不要写else语句） 文章链接：代码随想录 (programmercarl.com) 思路： （1）要操作链表的话，可以设置一个虚拟头节点，从而方便操作 …...
Zabbix 3.0 从入门到精通(zabbix使用详解)
Zabbix 3.0 从入门到精通(zabbix使用详解) 第1章 zabbix监控 1.1 为什么要监控 在需要的时刻，提前提醒我们服务器出问题了 当出问题之后，可以找到问题的根源 网站/服务器 的可用性 1.1.1 网站可用性 在软件系统的高可靠性（也称为可用性…...
基于JDBC框架的事务管理
事务: Transaction, 是数据库中的一种能够保证多个写操作要么全部成功, 要么全部失败的机制在基于Spring JDBC的数据库编程中, 在业务方法上添加Transactional注解, 即可使得这个业务方法是事务性的举例, 一个银行转账操作, 转账时需要执行的sql语句大致是:UPDATE 存款表 SET 余…...
使用IPV6+DDNS连接内网主机
0、前言 IPV6已经普及多年，但是作为互联网用户好像并没有在实用性上有更多感受，或者说IPV6并没有让普通用户感觉到改变。我作为网络从业者其实也没有过多关注。在工作中普遍遇到的还是基于IPV4的网络，比如各个行业的网络、单位的内网区域和互…...
【新2023】华为OD机试 - 高效的任务规划（Python）
华为 OD 清单查看地址：blog.csdn.net/hihell/category_12199275.html 高效的任务规划 题目 你有 n 台机器编号为1-n，每台都需要完成一项工作， 机器经过配置后都能独立完成一项工作。 假设第i台机器你需要花 Bi 分钟进行设置， 然后开始运行，Ji分钟后完成任务。 现在，你…...
sql复习（数据处理、约束）
一、DML（数据操纵语言） DML(Data Manipulation Language – 数据操纵语言) 可以在下列条件下执行： –向表中插入数据 –修改现存数据 –删除现存数据 事务是由完成若干项工作的DML语句组成的 1.insert语句 使用 INSERT 语句向表中插入数据…...
前端入门~
我们应该怎样理解前端呢？前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率…...
工业网关控制器CK-GW06-E01与欧姆龙 PLC配置说明
工业网关控制器CK-GW06-E01是一款工业级网关控制器，以太网通信接口，支持 EtherNet IP|Modbus TCP 工业协议。可实现一拖六，同时带有六组输入 检测 IO 和六组输出控制 IO。 本文将重点介绍工业网关控制器CK-GW06-E01与欧姆龙 PLC配置说明。 工…...
uni-app前端H5页面底部内容被tabbar遮挡
如果你想在原生 tabbar 上方悬浮一个菜单，之前写 bottom:0。这样的写法编译到 h5 后，这个菜单会和 tabbar 重叠，位于屏幕底部。 原码： <view style"position: fixed;bottom:0;left: 0;background-color: #007AFF;right: …...
昇腾CANN算子开发揭秘
开发者在利用昇腾硬件进行神经网络模型训练或者推理的过程中，可能会遇到以下场景：1、训练场景下，将第三方框架（例如TensorFlow、PyTorch等）的网络训练脚本迁移到昇腾AI处理器时遇到了不支持的算子。2、推理场景下&…...
华为OD机试注意事项，备考思路，刷题要点，答疑，od Base 提供
华为 OD 机试是华为公司用于招聘岗位的一种在线编程测试，通常要求应聘者在规定的时间内完成一定数量的编程题目，以测试其编程能力和解决问题的能力。 本篇博客就华为 OD 机试注意事项，备考思路，刷题要点，答疑为大家一一…...
Python 自己简单地造一个轮子.whl文件
造轮子引言准备文件原始文件打包轮子文件运行验证引言 平时使用的python第三方库很顺手，这第三方库一般都是大家一起努力的结果，那我们是不是也可以贡献一点力量呢？首先从造一个本地的.whl文件开始。 在python中，引用第三方库时…...
NVIDIA Tesla V100部署与使用
在先前的实验过程中，使用了腾讯云提供的nvidia T4GPU，尽管其性能较博主的笔记本有了极大提升，但总感觉仍有些美中不足，因此本次博主租赁了nvidia V100 GPU，看看它的性能表现如何。 和先前一样，只需要将服务…...
网络知识点梳理与总结
作者简介：一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭：低头赶路，敬事如仪 个人主页：网络豆的主页 目录 前言 一.知识点梳理 前言 本章将会对高级网络应用一些知识点进行梳理。 一.知识点梳理 1.单臂的缺陷有哪些？...
基于Bing搜索的GPT智能体：实现大语言模型实时联网搜索
1. 项目概述：一个基于Bing搜索的GPT智能体 最近在GitHub上闲逛，发现了一个挺有意思的项目，叫 bujnlc8/gptbing 。光看名字，你可能会觉得这又是一个“GPT套壳”应用，无非是把OpenAI的API包装一下。但如果你仔细琢磨一…...
【Oracle数据库指南】第03篇：Oracle SQL分组统计与排序——GROUP BY、HAVING与ORDER BY深度解析
上一篇【第02篇】Oracle SQL查询高级技巧——条件与函数 下一篇【第04篇】Oracle多表查询与连接操作——JOIN的全面解析 摘要 本文详细讲解Oracle SQL中的分组统计功能，包括分组函数（COUNT、SUM、AVG、MAX、MIN等）的用法、GROUP BY子句的多列…...
如何用PyWxDump破解微信数据解析的三大技术壁垒：从困境到突破的完整指南
如何用PyWxDump破解微信数据解析的三大技术壁垒：从困境到突破的完整指南 【免费下载链接】PyWxDump 删库 项目地址: https://gitcode.com/GitHub_Trending/py/PyWxDump 微信数据解析一直是个技术难题，就像试图打开一个不断变换密码的智能保险箱。…...
第五篇：Spring事务管理——@Transactional的底层实现与失效场景
前言 在前面的文章中，我们拆解了Spring AOP的底层原理——动态代理和切面编程。现在，我们来看AOP最经典的应用：事务管理。 你每天用着Transactional，往Service方法上一加，事务就自动开启了。但面试中，事务是…...
超算联盟抗疫：430Petaflops算力如何加速病毒研究与药物发现
1. 项目概述：当超级计算遇上全球危机2020年初，一场突如其来的公共卫生危机席卷全球，科研界面临着一个前所未有的挑战：如何以最快的速度理解一种全新的病毒，并找到遏制其传播的方法？传统的药物研发和流行病学…...
AI网关架构解析：统一管理多模型API，提升服务治理与性能
1. 项目概述：一个AI驱动的开源网关框架最近在开源社区里，我注意到一个名为hoazgazh/aigate的项目。这个名字乍一看有点神秘，但拆解一下，“aigate”直译就是“AI网关”。这立刻让我联想到当前技术领域的一个核心痛点：如…...
从《飞机大战》项目倒推环境搭建：手把手教你为Python 3.8+配置Pygame开发环境（Windows版）
从《飞机大战》项目倒推环境搭建：手把手教你为Python 3.8配置Pygame开发环境（Windows版） 当你决定用Python开发一个《飞机大战》游戏时，第一步不是急着写代码，而是搭建一个能跑起来的环境。这就像盖房子前要先打地基—…...
从GAN到领域自适应：揭秘‘特征对齐’如何让AI模型跨域工作
从GAN到领域自适应：特征对齐如何突破AI模型的跨域瓶颈 想象一下，你花费数月训练的视觉识别模型在实验室测试集上准确率高达98%，但部署到真实场景后性能骤降至60%。这种"实验室到现实"的落差，正是领域自适应(Domain Adap…...
Taotoken多模型聚合平台为开发者提供稳定高效的大模型调用服务
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Taotoken多模型聚合平台为开发者提供稳定高效的大模型调用服务 对于需要集成多种大模型能力的AI应用开发者而言，管理不…...
QMC音频转换工具终极指南：快速免费解锁加密音乐文件
QMC音频转换工具终极指南：快速免费解锁加密音乐文件 【免费下载链接】qmc-decoder Fastest & best convert qmc 2 mp3 | flac tools 项目地址: https://gitcode.com/gh_mirrors/qm/qmc-decoder 你是否曾遇到过下载的音乐文件无法在普通播放器中播放的困扰…...