IO Transports [AJAX]
Submitted by amaah on Mon, 05/21/2007 - 13:03.
dojo.io.bind() has been replaced with more specific functions that give a better indication about which IO transport is being used. However, the style of using one object argument that has properties detailing the IO call is still used in 0.9.
For 0.9, IO methods also return a dojo.Deferred object, to allow you to attach error and completion callbacks after you make the initial IO call.
Here is an extended example call that does a GET request using XMLHttpRequest and attached extra callbacks via the returned deferred object:
var deferred = dojo.xhrGet({
url: "path/to/endpoint.cgi",
handleAs: "text",
timeout: 5000, //Time in milliseconds
handle: function(response, ioArgs){
//This function handles the response.
//Inside this function, the "this" variable
//will be the object used as the argument to the dojo.xhrGet() call.
if(response instanceof Error){
if(response.dojoType == "cancel"){
//The request was canceled by some other JavaScript code.
console.debug("Request canceled.");
}else if(response.dojoType == "timeout"){
//The request took over 5 seconds to complete.
console.debug("Request timed out.");
}else{
//Some other error happened.
console.error(response);
}
}else{
//Success.Since original call wanted the response handled
//as text (handleAs: "text"), response will be a text string.
console.debug("Successful server response: " + response);
//ioArgs is an object with some useful properties on it.
//For instance, for XMLHttpRequest calls, ioArgs.xhr is the
//XMLHttpRequest that was used for the call.
console.debug("HTTP status code: ", ioArgs.xhr);
}
//If you think there could be other callback handlers registered with this deferred, then
//return response to propagate the same response to other callback handlers. Otherwise,
//the error callbacks may be called in the success case.
return response;
}
});
//Add another callback for the success case
deferred.addCallback(function(response){
//Note that attaching a callback to the deferred
//object after the original IO call will *not* receive the ioArgs object as a function
//argument. There will only be one argument, the response argument.
//Since original call wanted the response handled as text (handleAs: "text"),
//response will be a text string in this case.
console.debug("Also got a successful server response: " + response);
//If you think there could be other callback handlers registered with this deferred, then
//you MUST return the response object from this function, otherwise the error callbacks
//will be called.
return response;
});
//Add another callback for the error case
deferred.addErrback(function(response){
//Note that attaching a callback to the deferred
//object after the original IO call will *not* receive the ioArgs object as a function
//argument. There will only be one argument, the response argument.
//In the errback case, response will be an Error object. If the error was a Deferred cancel()
//call, then response.dojoType == "cancel". If the error was a request timeout (the time specified
//in the IO call with the "timeout" property has elapsed), then response.dojoType == "timeout".
console.error("Another error handler", response);
//If you think there could be other callback handlers registered with this deferred, then
//return response to propagate the same response to other callback handlers.
return response;
})
//Add another callback to the Deferred, but this callback will be called if either
//the success or error callback path is fired.
deferred.addBoth(function(response){
//See the "handle" function property of the original IO call for an example on how
//to handle both success and error callbacks in the same function. Note that you do not
//have access to the ioArgs object argument in this case. Also, the "this" variable
//will not be the value mentioned in the "handle" function.
console.debug(response);
//If you think there could be other callback handlers registered with this deferred, then
//return response to propagate the same response to other callback handlers.
return response;
});
url: "path/to/endpoint.cgi",
handleAs: "text",
timeout: 5000, //Time in milliseconds
handle: function(response, ioArgs){
//This function handles the response.
//Inside this function, the "this" variable
//will be the object used as the argument to the dojo.xhrGet() call.
if(response instanceof Error){
if(response.dojoType == "cancel"){
//The request was canceled by some other JavaScript code.
console.debug("Request canceled.");
}else if(response.dojoType == "timeout"){
//The request took over 5 seconds to complete.
console.debug("Request timed out.");
}else{
//Some other error happened.
console.error(response);
}
}else{
//Success.Since original call wanted the response handled
//as text (handleAs: "text"), response will be a text string.
console.debug("Successful server response: " + response);
//ioArgs is an object with some useful properties on it.
//For instance, for XMLHttpRequest calls, ioArgs.xhr is the
//XMLHttpRequest that was used for the call.
console.debug("HTTP status code: ", ioArgs.xhr);
}
//If you think there could be other callback handlers registered with this deferred, then
//return response to propagate the same response to other callback handlers. Otherwise,
//the error callbacks may be called in the success case.
return response;
}
});
//Add another callback for the success case
deferred.addCallback(function(response){
//Note that attaching a callback to the deferred
//object after the original IO call will *not* receive the ioArgs object as a function
//argument. There will only be one argument, the response argument.
//Since original call wanted the response handled as text (handleAs: "text"),
//response will be a text string in this case.
console.debug("Also got a successful server response: " + response);
//If you think there could be other callback handlers registered with this deferred, then
//you MUST return the response object from this function, otherwise the error callbacks
//will be called.
return response;
});
//Add another callback for the error case
deferred.addErrback(function(response){
//Note that attaching a callback to the deferred
//object after the original IO call will *not* receive the ioArgs object as a function
//argument. There will only be one argument, the response argument.
//In the errback case, response will be an Error object. If the error was a Deferred cancel()
//call, then response.dojoType == "cancel". If the error was a request timeout (the time specified
//in the IO call with the "timeout" property has elapsed), then response.dojoType == "timeout".
console.error("Another error handler", response);
//If you think there could be other callback handlers registered with this deferred, then
//return response to propagate the same response to other callback handlers.
return response;
})
//Add another callback to the Deferred, but this callback will be called if either
//the success or error callback path is fired.
deferred.addBoth(function(response){
//See the "handle" function property of the original IO call for an example on how
//to handle both success and error callbacks in the same function. Note that you do not
//have access to the ioArgs object argument in this case. Also, the "this" variable
//will not be the value mentioned in the "handle" function.
console.debug(response);
//If you think there could be other callback handlers registered with this deferred, then
//return response to propagate the same response to other callback handlers.
return response;
});
Common IO arguments
The following properties are allowed on all IO functions listed below:- url: "/path/to/server.cgi". String URL to server endpoint.
- content: {name: "value1"}. Object containing properties with string values. These properties will be serialized as name1=value2 and passed in the request.
- timeout: 1000. Milliseconds to wait for the response. If this time passes, the then error callbacks are called.
- form: dojo.byId("formId"). A DOM node for a form. Used to extract the form values and send to the server.
- preventCache: true. Boolean. Default is false. If true, then a "dojo.preventCache" parameter is sent in the request with a value that changes with each request (timestamp). Useful only with GET-type requests.
- handleAs: "text". String. Acceptable values depend on the type of IO transport (see below).
- load: function(response, ioArgs){}. The load function will be called on a successful response.
- error: function(response, ioArgs){}. The error function will be called in an error case.
- handle: function(response, ioArgs){}. The handle function will be called in either the successful or error case.
- args: the original object argument to the IO call.
- xhr: For XMLHttpRequest calls only, the XMLHttpRequest object that was used for the request.
- url: The final URL used for the call. Many times it will be different than the original args.url value.
- query: For non-GET requests, the name1=value1&name2=value2 parameters sent up in the request.
- handleAs: The final indicator on how the response will be handled.
- id: For dojo.io.script calls only, the internal script ID used for the request.
- canDelete: For dojo.io.script calls only, indicates whether the script tag that represents the request can be deleted after callbacks have been called. Used internally to know when cleanup can happen on JSONP-type requests.
- json: For dojo.io.script calls only: holds the JSON response for JSONP-type requests. Used internally to hold on to the JSON responses. You should not need to access it directly -- the same object should be passed to the success callbacks directly.
- dojo.xhrGet()
- dojo.xhrPost()
- dojo.rawXhrPost()
- dojo.xhrPut()
- dojo.rawXhrPut()
- dojo.xhrDelete()
- handleAs: "text". String. Acceptable values are "text" (default), "json", "json-comment-optional", "json-comment-filtered", "javascript", "xml"
- sync: false. Boolean. false is default. Indicates whether the request should be a synchronous (blocking) request.
- headers: {}. Object. Additional HTTP headers to send in the request.
- postData: "". String. Only applicable for dojo.rawXhrPost(). The raw data to send in the body of the POST request.
- postData: "". String. Only applicable for dojo.rawXhrPut(). The raw data to send in the body of the PUT request.
- dojo.io.script.get()
- callbackParamName: "". String. The URL parameter name that indicates the JSONP callback string. For instance, when using Yahoo JSONP calls it is normally, callbackParamName: "callback". For AOL JSONP calls it is normally callbackParamName: "c".
- checkString: "". String. A string of JavaScript that when evaluated like so: "typeof(" + checkString + ") != 'undefined'" being true means that the script fetched has been loaded. Do not use this if doing a JSONP type of call (use callbackParamName instead).
- dojo.io.iframe.send()
- method: "POST". What type of HTTP method to use for the request. Valid values are "POST" (default) or "GET".
- handleAs: Valid values are text/plain, text/html, text/javascript, text/json, application/json. IMPORTANT: For all values EXCEPT text/html, The server response should be an HTML file with a textarea element. The response data should be inside the textarea element. Using an HTML document the only reliable, cross-browser way this transport can know when the response has loaded. If text/html is specified for the handleAs argument, just return a normal HTML document. NOTE: text/xml or any other XML type is NOT supported by this transport.
-
For the load, error and handle functions, the ioArgs object will contain the following properties:
XMLHttpRequest
To make an IO call using an XMLHttpRequest object, use the following functions (all defined in the base dojo.js):Script request/JSONP (dojo.io.script)
To make an IO call using a script tag (for instance, for cross-domain JSONP calls), dojo.require("dojo.io.script"), and use:IFrame requests (dojo.io.iframe)
To send an IO call using an IFrame (for instance, to send a file to the server), dojo.require("dojo.io.iframe"), and use:- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
formNode and 0.4 --> 0.9 porting information
Since this is a porting guide, it would be good to show the changes to "dojo.io.bind". I would have needed the information, that "formNode" is now just "form" for example (and that this is exactly the same).
If you could do something as in the ContentPane section (http://dojotoolkit.org/book/dojo-porting-guide-0-4-x-0-9/widgets/content...) for example, that would be great :)
Thanks!
and what about "file:" in dojo.io.BrowserIO ?
That was interesting in order to customize the file uploading. One strength of Ajax is to be able to set exactly what we send to the server and how. With the necessity of using a "form:" argument, it is a lot like using the normal HTML way of uploading a file, and we cannot upload the content of a textarea, for example, as if it was a file.
text/json does not turn response into a js object
I am using a handleAs : "text/json" but the response I get is a string that contains the serialized js object. I have to call dojo.fromJson to convert to an object. This problem exists with the dojo.io.iframe transport.
Can anyone confirm? I think this problem did exist in an earlier version of 0.4.3, too.
Cheers\
Sven
---
Sven Haiges
Subscribe to the Grails Podcast: http://hansamann.podspot.de/rss
Skype: hansamann
it may just be parsing the
it may just be parsing the 'text' part, because i think the handleAs: for automated-to-json is just handleAs: json
(see above documentation), though i wonder: because you are using dojo.io.iframe, it is important to know the data must come back wrapped in a
tag?textarea
Yeah, I now about the html with textarea response. I do all that, will try handleAs: 'json' once i get back to the code. thanx
missing ';' on method
missing ';' on method "deferred.addErrback(function(response){........})"
Styling return HTML
Hi,
I want to update a drag and drop when I click on a node in a dojo tree. I am trying to use xhrGet, it returns the html and puts it in the correct innerHTML but the CSS is not applied. Any help much appreciated
persistent connection (comet)
i can do a pesistent conection with dojo.xhrGet() transport?
if i can what timeout arg i put, this have to be infinite!
thanks,
Vinicius Dittgen
vinipd@gmail.com
Content-type
Just because it was not clear to me I wanted to note:
When using dojo.io.iframe.send be sure to set
* DO NOT format the return header as JSON, use text/html
* Make sure your file input has a name AND id field
* $_FILES is not a true array -- functions like array_keys() will generate exceptions
* If for some reason you are not getting your JSON data nicely, use Firebug to look at the response batch for PHP errors thrown into the mix or what not
* The Textarea requirement is buried in the iframeio.
If you don't do this you'll get a Save As return dialog rather then a quiet exit into the function.
Taken from:
http://dojotoolkit.org/forum/dojo-core-dojo-0-9/dojo-core-support/dojo-i...