前言:

上一章详细阐述了dojo的事件绑定操作,本章将讲解dojo的请求操作

注:dojo的请求操作与js和jquery完全不同!

1、dojo的请求

dojo通过request.get()/.put()/.post()/.del()进行请求操作

 request.post("这里放对应的请求接口地址", {
                //解析服务器json数据
                handleAs: "json",
                // 直接从form表单取json对象作为参数
                data: domForm.toObject("formNode"),
                // 超时时间
                timeout: 2000
            }).then(function(response) {
                //正确获得服务器响应后的操作
                dom.byId('svrMessage').innerHTML = JSON.stringify(response);
            });

2、请求的过程中可以绑定不同操作

//请求过程事件绑定
 require(["dojo/dom", "dojo/request", "dojo/request/notify",
         "dojo/on", "dojo/dom-construct", "dojo/query",
         "dojo/domReady!"
     ],
     function(dom, request, notify, on, domConstruct) {
         //开始
         notify("start", function() {
             domConstruct.place("<p>开始</p>", "divStatus");
         });
         //发送
         notify("send", function(data, cancel) {
             domConstruct.place("<p>发送请求</p>", "divStatus");
         });
         //请求成功
         notify("load", function(data) {
             domConstruct.place("<p>加载完毕</p>", "divStatus");
         });
         //请求失败
         notify("error", function(error) {
             domConstruct.place("<p class=\"error\">加载失败</p>", "divStatus");
         });
         //已经完成之后
         notify("done", function(data) {
             domConstruct.place("<p>请求结束 (response processed)</p>", "divStatus");
             if (data instanceof Error) {
                 domConstruct.place("<p class=\"error\">响应失败</p>", "divStatus");
             } else {
                 domConstruct.place("<p class=\"success\">响应成功</p>", "divStatus");
             }
         });
         //停止
         notify("stop", function() {
             domConstruct.place("<p>请求停止</p>", "divStatus");
             domConstruct.place("<p class=\"ready\">准备</p>", "divStatus");
         });

         on(dom.byId("test"), "click", function(evt) {
             //清空id为divStatus内部元素
             domConstruct.empty("divStatus");
             request.get("getTime", //请求地址
                 {
                     query: this.id = "successbtn",
                     handleAs: "json" //返回的是json数据
                 }).then(function(data) {
                 //发送请求成功后的操作
                 alert("获取成功" + data.data);
                 //发送请求失败后的操作
             }, function(error) {
                 alert("获取失败" + error);
             });
         });
     }
 );

3、与jquery相似,dojo也提供隐藏数据的data()操作

要进行data()操作必须引入NodeList-data和NodeList-manipulate模块

如下所示

var NodeList = require(["dojo/NodeList-data", "dojo/NodeList-manipulate", "dojo/domReady!"], function(NodeList) {
    //设置隐藏数据
    function setData(node) {
        query(node).data("updated", new Date());
    }
    //获取隐藏数据
    function getData(node) {
        var str = query(node).data("updated");
        console.log(str);
    }

到这里dojo的常用操作部分基本讲解完毕了,dom操作可以操作页面增删改,事件绑定操作处理事件绑定,本章请求处理用于处理get/post/put/delete四种请求,普通页面操作基本都可以做到了,后面如果发现前面漏掉的地方将会进一步进行补充。

接下来将开始dojo的高级部分学习

Dojo初探之5:dojo的request(请求)操作、请求过程事件绑定和隐藏数据data()操作(基于dojo1.11.2版本)的更多相关文章

  1. Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作(基于dojo1.11.2版本)

    前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...

  2. Dojo初探之4:dojo的event(鼠标/键盘)事件绑定操作(基于dojo1.11.2版本)

    前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...

  3. Dojo初探之2:设置dojoConfig详解,dojoConfig参数详解+Dojo中预置自定义AMD模块的四种方式(基于dojo1.11.2)

    Dojo中想要加载自定义的AMD模块,需要先设置好这个模块对应的路径,模块的路径就是这个模块的唯一标识符. 一.dojoConfig参数设置详解 var dojoConfig = { baseUrl: ...

  4. Dojo初探

    Dojo 是一个由 Dojo 基金会开发的 Javascript 工具包, 据说受到 IBM 的永久支持,其包括四个部分: dojo, dijit, dojox, util dojo: 有时也被称作 ...

  5. dojo事件驱动编程之事件绑定

    什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...

  6. Configuring Dojo with dojoConfig - The Dojo Toolkit

    转载自Dojo官网 Configuring Dojo with dojoConfig The dojoConfig object (formerly djConfig) allows you to s ...

  7. dojo/Deferred类和dojo/promise类的使用

    参考博客:https://blog.csdn.net/blog_szhao/article/details/50220181        https://dojotoolkit.org/docume ...

  8. (ExtJs 3.4)Ext.Ajax.request的同步请求实现

    ext3.0之前都是这样来提交:var responsea = Ext.lib.Ajax.getConnectionObject().conn;responsea.open("POST&qu ...

  9. Volley(二)—— 基本Request对象 & RequestQueue&请求取消

    详细解读Volley(一)—— 基本Request对象 & RequestQueue&请求取消 Volley它非常适合去进行数据量不大,但通信频繁的网络操作,而对于大数据量的网络操作, ...

随机推荐

  1. Vuex(二)——关于store

    一.总览 Vuex 应用的核心就是 store(仓库). "store" 包含着应用中大部分的状态(state). 二.Vuex 和单纯全局对象的不同 Vuex 的状态存储是响应式 ...

  2. LeetCode 108: Convert Sorted Array to Binary Search Tree DFS求解

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 解题 ...

  3. mui开发app之webview是什么

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,webview被封装在html5+,plus对象中,底层由java,OC实现. 先来谈谈我对webview的理解: 使用mui开发的a ...

  4. AspNetCore-MVC实战系列(三)之个人中心

    AspNetCore - MVC实战系列目录 . 爱留图网站诞生 . git源码:https://github.com/shenniubuxing3/LovePicture.Web . AspNetC ...

  5. 蓝桥杯- 移动距离-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  6. hdu4099 Revenge of Fibonacci 字典树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4099 思想很容易想到 就是预处理出前10w个的fib数,然后建树查询 建树时只用前40位即可,所以在计 ...

  7. [刷题]算法竞赛入门经典(第2版) 5-4/UVa10763 - Foreign Exchange

    题意:有若干交换生.若干学校,有人希望从A校到B校,有的想从B到C.C到A等等等等.如果有人想从A到B也刚好有人想从B到A,那么可以交换(不允许一对多.多对一).看作后如果有人找不到人交换,那么整个交 ...

  8. Java学习笔记——I/O流

    朝辞白帝彩云间,千里江陵一日还.两岸猿声啼不尽,轻舟已过万重山. --早发白帝城 我们老师写代码有个特点,就是简洁.每一句的意图都十分明确.所以他讲课的速度也比较快. 跑题了,说说I/O流: 1.字节 ...

  9. 如何在.Net中使用MongoDB

    最近在研究mongodb,针对.net 中使用mongodb的文章要么是早期的驱动版本,要么资料很少,所以写个随笔记录一下 本文主要记录 1.什么是MongoDB 2.MongoDB windows ...

  10. web.xml报错

    The content of element type "web-app" must match "(icon?,display-name?,description?,d ...