储备知识

1、在介绍新版本的ajax请求之前,需要先了解一些dojo/Deferreds。

初次听到“Deferred”这个概念,可能会觉得这是一个神秘的东西。实际上它在执行异步操作的时候非常强大,例如执行Ajax请求。简单来说,Deferred会延迟一段时间再执行某些操作;最重要的,它可以实现等待一个前置动作完成之后才执行你指定的动作。Ajax就是这样一个例子。我们希望在服务器成功返回我们需要的信息之后才执行某些动作。这种情况下,等待返回值是非常重要的。

Dojo实现的可延迟执行的对象是dojo/Deferred(0.3版本就有,并且在1.8版本中进行了重构).实例化一个Deferred对象之后,可以通过向then方法传递一个函数来注册一个动作或者称为回调,这个函数会在Deffered被解析后(调用deffered.resolve)被调用。then方法接收的第二个参数也是一个函数,这个函数会在Deffered被拒绝(deffered.reject)之后调用。让我们来看一个例子。

Resolved

Rejected

require(["dojo/on","dojo/dom","dojo/Deferred","dojo/domReady!"],

function(on,dom,Deferred){

//实例化一个可延迟执行动作的对象Deferred

var deferred = new Deferred();

//注册接收和拒绝后的动作

deferred.then(function(resolveText){

dom.byId("respId").innerHTML = resolveText;

},function(rejectText){

dom.byId("respId").innerHTML = rejectText;

});

//触发接收resolve()方法:Resolve the deferred, putting it in a success state.

on(dom.byId("resolveId"),"click",function(evt){

deferred.resolve("Yes, it is resolved.");

});

//触发拒绝reject()方法:Reject the deferred, putting it in an error state.

on(dom.byId("rejectId"),"click",function(evt){

deferred.reject("Oh,no.it is rejected.");

});

});

上面的例子,当我们点击Resolved按钮或者Rejected按钮之后,在deferred对象的then方法中注册的相应事件就会被调用。而且我们会发现,两个按钮只有第一次被点击的那个生效,以后点击不生效了。也就是说在then方法中注册的两个回调方法只会有一个被执行(一个在成功之后执行,一个在拒绝之后执行),并且只能执行一次。

2、 dojo/promise

promise是代表某个操作返回的事件发生结果的对象,例如ajax请求返回的对象,包括状态(成功或失败)和数据(响应或失败信息);它有以下几个特点:

处在unfulfilled,resolved,rejected中的某一个状态上

状态可以从unfulfilled变化到resolved上,或者从unfulfilled变化到rejected上

实现then方法来注册在状态发生改变时的回调函数

回调函数不能改变promise的返回值(即回调函数里面不会改变传入进来的参数值,但是可以返回新的值,以提供链式操作)

promise的then方法返回一个新的promise,以提供链式操作;同时,保持原来的promise的值不变。

dojo/promise/all

dojo/promise/all替换dojo/DeferredList,提供了一个管理多个异步处理的机制,通过把几个promise合并为一个promise。有些时候,你可能需要平行的(或者说同时)从多个资源处获取数据,并且希望在所有的请求都结束之后能够通知你进行其他操作,使用dojo/promise/all就可以实现。可以通过传入一个或者一组Deferred到dojo/promise/all的构造器来使用dojo/promise/all。返回的结果是:如果是传入单一对象,结果和传入对象一样;如果是传入一组对象,结果是按照传入顺序的一个数组。例如传入A,结果就是A;传入[A,B],结果就是包含A,B的一个数组。我们来看一个例子:

require(["dojo/promise/all", "dojo/Deferred", "dojo/request", "dojo/_base/array", "dojo/dom-construct", "dojo/dom", "dojo/json", "dojo/domReady!"],

function(all, Deferred, request, arrayUtil, domConstruct, dom, JSON){

var usersDef = request.get("users.json", {

handleAs: "json"

}).then(function(response){

var users = {};

arrayUtil.forEach(response, function(user){

users[user.id] = user;

});

return users;

});

var statusesDef = request.get("statuses.json", {

handleAs: "json"

});

all([usersDef, statusesDef]).then(function(results){

var users = results[0],

statuses = results[1],

statuslist = dom.byId("statuslist");

if(!results[0] || !results[1]){

domConstruct.create("li", {

innerHTML: "An error occurred"

}, statuslist);

return;

}

arrayUtil.forEach(statuses, function(status){

var user = users[status.userId];

domConstruct.create("li", {

id: status.id,

innerHTML: user.name + ' said, "' + status.status + '"'

}, statuslist);

});

});

});

Ajax正文

4、dojo通过dojo/request来实现Ajax请求,先来看一个简单的例子

require(["dojo/request"], function(request){

request("helloworld.txt").then(

function(text){

console.log("The file's content is: " + text);

},

function(error){

console.log("An error occurred: " + error);

}

);

});

所有的Ajax方法返回的都是一个dojo/Deferred对象,我们可以在这个Deferred对象的then方法中注册回调函数。当Ajax请求成功后,dojo会帮我们调用这个Deferred的对象的resolve对象,继而会执行我们注册的响应成功的回调函数;当Ajax请求失败后,dojo会帮我们调用这个Deferred对象的rejected对象,继而执行我们注册的响应失败的回调函数。

We开发者需要他们的工具具有可扩展性以应对各种各样的环境,这样他们才会在项目组使用它,dojo/request的api正好具有这样的特点。第一个、必需的参数是请求的URL。第二个参数是一个包含请求选项的对象(非必需)。常用的选项有下面几个:

method--代表HTTP方法的大写字符串。dojo提供了几个帮助函数来更方便的指定这个选项(request.get,request.post,request.put,request.del)。

sync--布尔值。true:同步请求方式,请求阻塞知道服务区返回响应或者超时;fasle:异步请求方式。

query--附加在URL后面的查询参数,可以是一个字符串或者键值对。

data--字符串或者键值对,或者FormData对象,它们包含要发送给服务器的数据。

handleAs--代表如何转化服务器响应中负载(或者叫响应数据)的字符串。经过转化的服务器响应数据才会传递给回调函数。可能的格式是“text"(默认值),"json","javascript"和”xml"。

headers--包含请求头的键值对。

让我们来看一个例子:

require(["dojo/request"], function(request){

request.post("post-content.php", {

data: {

color: "blue",

answer: 42

},

headers: {

"X-Something": "A value"

}

}).then(function(text){

console.log("The server returned: ", text);

});

});

如果我们需要处理服务器返回的响应头怎么办?为了获取响应头,我们可以使用promise.response.header(dojo.request返回的promise没有这个属性)。另外,使用promise.response.then的时候,响应(传递到回调函数里面的参数)不是服务器返回的数据,而是一个具有data属性的对象。我们来看一个例子:

require(["dojo/dom", "dojo/on", "dojo/request", "dojo/dom-form"],

function(dom, on, request, domForm){

// Results will be displayed in resultDiv

var form = dom.byId('formNode');

// Attach the onsubmit event handler of the form

on(form, "submit", function(evt){

// prevent the page from navigating after submit

evt.stopPropagation();

evt.preventDefault();

// Post the data to the server

var promise = request.post("../resources/php/login-demo.php", {

// Send the username and password

data: domForm.toObject("formNode"),

// Wait 2 seconds for a response

timeout: 2000

});

// Use promise.response.then, NOT promise.then

promise.response.then(function(response){

// get the message from the data property

var message = response.data;

// Access the 'Auth-Token' header

var token = response.getHeader('Auth-Token');

dom.byId('svrMessage').innerHTML = message;

dom.byId('svrToken').innerHTML = token;

});

});

}

);

JSONP (Javascript Object Notation with Padding)

Ajax请求被限制在同一个域。如果需要向一个不同的域请求数据,可以使用JSONP。

AJAX requests are restricted to the current domain. If you need to request data from a different domain, you can useJSONP. When using JSONP, a script tag is inserted in the current page, thesrcfile is requested, the server wraps the data in a callback function, and when the response is interpreted, the callback is called with the data as its first argument. JSONP requests are made withdojo/request/script.

ajax dojo deferred,dojo(四):ajax请求相关推荐

  1. 学习Ajax框架之dojo:第六节——dojo类的声明和继承(附源代码)

    Dojo通过dojo.declare方法实现类的声明和继承.首先,来看一下最简单的情况--如何使用dojo.declare声明一个类.接着,讲述了类如何实现继承和多继承.分两种情况讲述了如何正确的调用 ...

  2. dojo异步编程之dojo/Deferred

    dojo/Deferred介绍 dojo/Deferred是一个类,是Dojo中管理异步线程的基础. 简单来说,一个Deferred对象会等待一段时间再去执行指定的调用,直到某个特定的事件发生或者前一 ...

  3. Ajax入门-搭建服务器并使用ajax技术向服务器发送一个请求并获得服务器返回的数据

    今天刚入坑学习ajax,刚开始就遇到服务器这一知识盲区,经过解决各种问题,成功运行的代码,下面就分享给你们,希望能够帮你们解决问题. (一)node.js安装 1.进入官网,下载对应版本 2.下载了. ...

  4. python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)...

    python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页) 一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 fro ...

  5. Ajax中option什么意思,AJAX请求中出现OPTIONS请求

    背景 有一个前后端分离的VUE项目来发送ajax请求, 查看Nginx日志或使用Chrome Dev Tools查看请求发送情况时, 会看到每次调后台API的请求之前, 都会发送一个OPTIONS请求 ...

  6. SpringMVC(四)——Ajax技术

    文章目录 1. 什么是Ajax技术 2. 伪造Ajax 3. Ajax相关测试 1. 什么是Ajax技术 AJAX = Asynchronous JavaScript and XML(异步的 Java ...

  7. Ajax学习系列——向服务器发送请求

    1.如何发送请求? 如果需要向服务器发送请求,我们使用的是XMLHttpRequest对象中的open()和send()方法. var xhr = new XMLHttpRequest();//具体创 ...

  8. tomcat项目的ajax路径问题,Tomcat下ajax请求路径总结

    ajax的url有两种,一种是绝对路径,另一种是相对路径. 一.绝对路径:包括协议名称.主机地址.端口.web项目名称等的完整请求路径. 例如: $.ajax({ url:"http://l ...

  9. promise将ajax变为同步,ES6-Promise改造异步请求为同步

    1.扩展:ajax 1.1 代码如下 $.ajax({ url:'地址', type:'get/post', data:{}, dataType:'json/jsonp', success:funct ...

最新文章

  1. 《C#精彩实例教程》小组阅读06 -- C#运算符与表达式
  2. BOM--location对象、history对象
  3. go语言学习(二)——Gin 框架简介
  4. dlib 获取人脸姿态 6个关键点
  5. mysql server id为0_MySQL内核月报 2014.12-MySQL· 答疑释惑·server_id为0的Rotate-阿里云开发者社区...
  6. MySQL查看表占用空间大小(转)
  7. Python爬取B站5000条视频,揭秘为何千万人看「哪吒」流泪
  8. 暑期训练日志----2018.8.21
  9. 如何手工配置DBControl
  10. 华为harmonyos发布会,海雀科技首款HarmonyOS智能摄像头Pro亮相华为智慧屏新品发布会...
  11. 第二次作业+105032014149
  12. dmol3给定关键字不在字典中_一日一技:举例说明python中的map()方法
  13. 一条命通关,这个AI算法玩超级马里奥操作秀翻天丨视频+开源代码
  14. 31. Element previousSibling 属性
  15. 【NOIP 模拟赛】Evensgn 剪树枝 树形dp
  16. 黑暗森林定律:对费米悖论的解释
  17. 如何将txt、excel文档里面的电话号码快速转换为vcf格式的电话簿导入手机
  18. P4556 [Vani有约会]雨天的尾巴 树链剖分 线段树合并
  19. php下载列表如何实现,phpcms v9 列表页直接下载功能代码实现
  20. java计算机毕业设计水果商城源代码+数据库+系统+lw文档

热门文章

  1. go语言中的float类型
  2. python生成递增序列_Python的6种内建序列之通用操作
  3. springboot 主键重复导致数据重复_Springboot实现防重复提交和防重复点击(附源码)...
  4. AI部署:聊一聊深度学习中的模型权重
  5. Deep Learning for 3D Point Clouds: A Survey 论文阅读
  6. ICRA2021| 自动驾驶相关论文汇总
  7. 基于双目事件相机的视觉里程计
  8. mnist深度学习入门
  9. php接口 汉字出错 空,php接口开发时,数据解析失败问题,字符转义,编码问题(示例代码)...
  10. 监控摄像头cad图例_一套实用的智能化弱电系统大样图,可以作为弱电项目CAD设计素材...