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.单臂的缺陷有哪些？...
深度解析Windows微信自动化：Wechaty Puppet XP零成本架构设计与实战指南
深度解析Windows微信自动化：Wechaty Puppet XP零成本架构设计与实战指南 【免费下载链接】puppet-xp Wechaty Puppet WeChat Windows Protocol 项目地址: https://gitcode.com/gh_mirrors/pu/puppet-xp 在即时通讯自动化领域，Windows平台微信机器…...
图灵奖得主LeCun团队悄然引动世界模型革新！世界模型终于不崩了！48倍加速！15M参数单GPU端到端训练！自发涌现物理理解！
近日，杨立昆与其团队在新发布的论文《LeWorldModel：基于像素的稳定端到端联合嵌入预测架构》中，介绍了一种新的世界模型LeWorldModel(LeWM) ，这一模型可以端到端的训练，无需任何技巧，同时拥有15M参数、能在…...
LFM2.5-1.2B-Thinking-GGUF前端面试题解析实战：模拟面试与答案生成
LFM2.5-1.2B-Thinking-GGUF前端面试题解析实战：模拟面试与答案生成 1. 开篇：AI如何改变前端面试准备方式 前端开发岗位的竞争日益激烈，技术面试的难度也水涨船高。传统的面试准备方式往往效率低下——求职者要么死记硬背网上的标准答案&…...
双模型灾备方案：OpenClaw同时配置百川2-13B-4bits与Llama3应对服务中断
双模型灾备方案：OpenClaw同时配置百川2-13B-4bits与Llama3应对服务中断 1. 为什么需要双模型灾备 去年冬天的一个深夜，我正在用OpenClaw自动处理一批技术文档的翻译任务。突然收到一连串报警通知——原本稳定运行的Qwen模型服务因为网络波动彻底失联。…...
高效安全备份QQ空间历史说说：GetQzonehistory智能工具全指南
高效安全备份QQ空间历史说说：GetQzonehistory智能工具全指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 在数字记忆日益珍贵的今天，QQ空间作为承载无数青春回…...
告别C++复杂配置：5分钟在UE5里搞定一个简单的HTTP客户端
告别C复杂配置：5分钟在UE5里搞定一个简单的HTTP客户端 在独立游戏开发和教育领域，快速验证网络交互功能的需求日益增长。无论是从服务器拉取动态配置，还是提交玩家成绩数据，一个轻量级的HTTP客户端往往能大幅提升原型开发效率。传…...
实测2-5分钟：CogVideoX-2b生成速度与画质平衡的真实体验报告
实测2-5分钟：CogVideoX-2b生成速度与画质平衡的真实体验报告 1. 从文字到视频：CogVideoX-2b能做什么？ 想象一下，你只需要输入一段文字描述，就能在几分钟内获得一段6秒的高清视频。这不是科幻电影里的场景，…...
前端性能优化终极指南：使用Javalin实现静态资源压缩与智能缓存
前端性能优化终极指南：使用Javalin实现静态资源压缩与智能缓存 【免费下载链接】javalin 项目地址: https://gitcode.com/gh_mirrors/jav/javalin 在现代Web应用开发中，前端资源的加载速度直接影响用户体验和搜索引擎排名。Javalin作为一款轻量级…...
lychee-rerank-mm惊艳效果集：Qwen2.5-VL底座下BF16高精度打分可视化
lychee-rerank-mm惊艳效果集：Qwen2.5-VL底座下BF16高精度打分可视化 想象一下，你有一个包含数百张图片的图库，想快速找出所有“夕阳下的海边剪影”照片。传统方法要么靠记忆，要么一张张翻看，费时费力。现在࿰…...
vscode-drawio扩展依赖更新：安全高效地管理第三方库
vscode-drawio扩展依赖更新：安全高效地管理第三方库 【免费下载链接】vscode-drawio This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-drawio vscode-drawio…...