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.单臂的缺陷有哪些？...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。 但是&#…...
iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘
美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
【Linux系统】Linux环境变量：系统配置的隐形指挥官
。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量：setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...
OCR MLLM Evaluation
为什么需要评测体系？——背景与矛盾 能干的事： 看清楚发票、身份证上的字（准确率>90%），速度飞快（眨眼间完成）。干不了的事： 碰到复杂表格（合并单元…...