原文地址：http://dojotoolkit.org/documentation/tutorials/1.7/ajax/
?
Ajax是一个动态网站的基本功能，在这个教程中，你将会学到如何使用dojo的ajax使用方法，包括了基本的XHR连接，自定义回调函数，处理多类型数据和使用json跨域取值。
?
开始
由于在dojo,dijit,dojox的多个组件和类中都要用到ajax功能，所以dojo就把ajax方法放到了dojo base类中。但是在操作使用ajax时他的依赖类还是要被指定的。ajax工具类被放置于dojo/_base/xhr这个模块中。下面是示例
?
// Require the xhr module
require(["dojo/_base/xhr"],
function(xhr) {
// Execute a HTTP GET request
xhr.get({
// The URL to request
url: "get-message.php",
// The method that handles the request's successful result
// Handle the response any way you'd like!
load: function(result) {
alert("The message is: " + result);
}
});
});
?上面的例子演示的是以ajax方式从get-message.php地址中请求数据，如果取值成功将会把返回的信息alert出来。如果取值出问题会怎么样？又或者返回的数据是json或xml格式的我们可以怎么处理？还有，我想要提交一个form的数据将怎么办？xhr都可以完全的处理这样问题。
?
定制ajax请求
一个web的开发者要能够使用ajax功能来实现不同的请求任务，要能完成以下功能，但不是只限于这些功能
?
- 从服务器中取得静态数据
- 能处理从服务器中传来的XML或JSON格式的数据
- 能发送数据到服务器
- 能对页面进行局部刷新
xhr就可以完成以上的功能。xhr有xhr.get和xhr.post两种方式。我们来看看这两种方法的一些参数。
- url 要请求的路径
- handleAs 字符串类型，指要以什么样的格式来处理返回的数据，有"text","json","javascript","xml"，默认为"text"，如果是"javascript"片断的话会在返回后执行它
- timeout 超时时间，以毫秒记，如果超时会触发error方法
- content 以键值对的形式表现的参数，也就是请求参数
- form 一个有同的参数，通过我们都是使用form来提交的，如果你没有使用url而指定的form，那么将会请求form中的action值，同样，如果你使用了content，那么将会不覆盖form中的参数，所有content/form两者选一个，不要同时使用
上面的参数是来配置怎么发送，对于返回数据的处理有三种方法。
- load(response,ioArgs) 当请求成功返回值时会调用这个方法。第一个参数是返回值
- error(errorMessage) 当请求失败时会调用该方法，第一个参数是错误信息
- handle(response,ioArgs) 不管是成功还是失败都会调用该方法，load或error先调用，然后再调用该方法
示例
刷新节点内容
?
?
require(["dojo/_base/xhr", "dojo/dom", "dojo/domReady!"],
function(xhr, dom) {
// Using xhr.get, as very little information is being sent
xhr.get({
// The URL of the request
url: "get-content.php",
// The success callback with result from server
load: function(newContent) {
dom.byId("contentNode").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
});
?
运行示例
?
检查用户名是否可用
?
// Local var representing the node to be updated
var availabilityNode = dom.byId("availabilityNode");
// Using xhr, as very little information is being sent
xhr.get({
// The URL of the request
url: "check-username.php",
// Allow only 2 seconds for username check
timeout: 2000,
// Send the username to check base on an INPUT node's value
content: {
username: dom.byId("usernameInput").value.toLowerCase()
},
// The success callback with result from server
load: function(result) {
if(result == "available") {
availabilityNode.innerHTML = "Username available!";
}
else {
availabilityNode.innerHTML = "Username taken! Please try another.";
}
}
});
?
?运行示例
?
form提交
?
// Local var representing if the form has been sent at all
var hasBeenSent = false;
// Local var representing node to be updated
var messageNode = dom.byId("messageNode");
// Using xhr.post, as the amount of data sent could be large
xhr.post({
// The URL of the request
url: "submission.php",
// No content property -- just send the entire form
form: dom.byId("contactForm"),
// The success handler
load: function(response) {
messageNode.innerHTML = "Thank you for contacting us!";
},
// The error handler
error: function() {
messageNode.innerHTML = "Your message could not be sent, please try again."
},
// The complete handler
handle: function() {
hasBeenSent = true;
}
});
?
?运行示例
?
什么是JSON
JSON(Javascript Object Notation) 中一种非标准的数据格式，他可以传送复杂的数据结构。结构中可以包括字符串，数字，布尔值，数组和对象。dojo的xhr是支持json格式的。下面就是一个处理json的小例子
?
require(["dojo/_base/xhr", "dojo/dom", "dojo/_base/array", "dojo/domReady!"],
function(xhr, dom, arrayUtil) {
// Keep hold of the container node
var containerNode = dom.byId("newsContainerNode");
// Using xhr.get, as we simply want to retrieve information
xhr.get({
// The URL of the request
url: "get-news.php",
// Handle the result as JSON data
handleAs: "json",
// The success handler
load: function(jsonData) {
// Create a local var to append content to
var content = "";
// For every news item we received...
arrayUtil.forEach(jsonData.newsItems, function(newsItem) {
// Build data from the JSON
content += "<h2>" + newsItem.title + "</h2>";
content += "<p>" + newsItem.summary + "</p>";
});
// Set the content of the news node
containerNode.innerHTML = content;
},
// The error handler
error: function() {
containerNode.innerHTML = "News is not available at this time."
}
});
});
?
?运行示例
?
JSON已经被使用了很多年了，而且大多数的服务端语言都支持对json的加密解密。如php就使用json_encode 和 json_decode方法来处理json数据
?
JSONP和dojo/io/script
对于基本的ajax功能有一个限制，你不能进行跨域请求。比如你不能在你的服务器中使用xhr.get来请求我的服务器地址。但有另一个方法，你可以使用JSONP。其工作方式为
?
- 创建一个script节点
- 设置script节点的src属性为你要请求的地址，在地址中加入请求参数，还有再加上回调函数名
- script节点会被加载在DOM中，将触发浏览器的一个局部请求
- 服务器返回JSON数据，并按约定包装了回调函数
- 浏览器执行返回的数据，并调用回调函数
使用JSONP的方法在dojo/io/script模块中，这个模块中的get方法和xhr.get方法有着类似的参数属性，只是多了一个callbackParamName的属性，这个属性将执行回调函数，这个回调函数不是你创建的，而是服务器包装的，所以，你要去查看提供这种服务的说明文档。
下面就是从Twitter取值的一个片断
// Require the xhr module
require(["dojo/io/script", "dojo/on", "dojo/dom", "dojo/_base/array", "dojo/domReady!"],
function(script, on, dom, arrayUtil) {
// Connect the button
on(dom.byId("getJson"), "click", function() {
// Output message to DOM
var tweetsHolder = dom.byId("tweetsHolder");
// Use the get method
script.get({
// The URL to get JSON from Twitter
url: "http://search.twitter.com/search.json",
// The callback paramater
callbackParamName: "callback", // Twitter requires "callback"
// The content to send
content: {
q: "@dojo" // Searching for tweets about Dojo
},
// The success callback
load: function(tweetsJson) { // Twitter sent us information!
// Log the result to console for inspection
console.info("Twitter returned: ",tweetsJson);
// Output the tweets to a DOM element
// Or output a "no tweets" message
var message = "";
// If there were tweets returned...
if(tweetsJson.results && tweetsJson.results.length) {
// Start the list
message += "<ul>";
// For every tweet returned
arrayUtil.forEach(tweetsJson.results,function(tweet) {
message += "<li>" + tweet.from_user + " said: " + tweet.text + "</li>";
});
//End the list
message += "</ul>";
}
else { // Output "no tweets" message
message = "No tweets about Dojo were available.";
}
// Output message to DOM
tweetsHolder.innerHTML = message;
},
// Ooops! Error!
error: function() {
tweetsHolder.innerHTML = "Error! Tweets could not be received.";
}
});
});
});
?注意：在以上代码中，我们自己并没有创建名叫callback的方法。
所以我们可以很容易的使用JSONP来使用ajax跨域取取值
但我们一定要记住。服务提供者一定要支持JSONP的API，并不是我们在所有的服务器中都能使用dojo/io/script的
最佳实践
?
- get方法是用于从服务器简单取值的方法，post是用户发送表单数据或大量数据到服务器的方法
- 建议使用error的回调函数，不要期望你的ajax请求是肯定成功的
- 在发送和接收数据的过程中使用console打印到控制台来确保你的数据都是正确的
- 根据经验，在ajax请求中要给用户一点提示，如一个在加载的图标等
结论
dojo减少了跨域请求的大量的工作量，并且通过dojo/_base/xhr提供了非常简单的API。同时也通过dojo/oi/script提供了跨域方法xhr.get和xhr.post
?
?