dojo(四):ajax请求

储备知识

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

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

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

<div id="respId"></div>
	 <button id="resolveId">Resolved</button>
	 <button id="rejectId">Rejected</button>
	 
	 <script src="dojo-release-1.9.1/dojo/dojo.js" data-dojo-config="async:true"></script>
	 <script>
	     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"),function(evt){
	    		 deferred.reject("Oh,no.it is rejected.");
	    	 });
	     });

2、 dojo/promise

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

• 处在unfulfilled,resolved,rejected中的某一个状态上
• 状态可以从unfulfilled变化到resolved上，或者从unfulfilled变化到rejected上
• 实现then方法来注册在状态发生改变时的回调函数
• 回调函数不能改变promise的返回值（即回调函数里面不会改变传入进来的参数值，但是可以返回新的值，以提供链式操作）
• promise的then方法返回一个新的promise,以提供链式操作；同时，保持原来的promise的值不变。

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/request","dojo/_base/array","dojo/dom-construct","dojo/json",function(all,Deferred,request,arrayUtil,domConstruct,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);
}
);
});

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/dom-form"],function(dom,on,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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!