Professional Documents
Culture Documents
Ajax and Yahoo
Ajax and Yahoo
Connection Manager
By Nicholas C. Zakas The introduction of Ajax techniques to the web has spurred a series of JavaScript libraries designed to aid in cross-browser Ajax coding. A search for Ajax libraries on your favorite search engine will reveal a plethora of libraries claiming to be the best for such tasks. Recently, Yahoo! released some of its JavaScript utilities to the public; among them is the Connection Manager. With Ajax making heavy use of XMLHttp, many developers are looking for ways to equalize the differences between browser implementations. The Yahoo! Connection Manager does this by handling all of the processing behind the scenes, exposing a simple API that frees developers from cross-browser concerns. Before beginning, make sure you read the Yahoo! license agreement for JavaScript components at http://developer.yahoo.net/yui/license.txt. It's a standard BSD-style license, but you should be sure to read it over anyway. You can download the Connect Managed code from http://developer.yahoo.net/yui/connection/index.html#download. The code download includes the source code as well as documentation, but no examples.
Setup
There are two JavaScript files necessary to use the Connection Manager: YAHOO.js, which sets up the
YAHOO namespace (this file is used by all the Yahoo! JavaScript components), and connection.js, which
contains the XMLHttp code. The files must be included in this order as well:
Basic Requests
The Yahoo! Connection Manager uses a different methodology than you may be used to for sending XMLHttp requests. Instead of creating objects, the Connection Manager exposes several static methods to handle requests. The method you'll use most often is asyncRequest(), which has the following signature:
var callback = { success: function (oResponse) { //handle a successful response }, failure: function (oResponse) { //handle an unsuccessful request } }
As you can see, this object has two methods: success() and failure(). The former gets called when a response is returned as expected; the latter is called when an error occurs during the request. Essentially, anytime the request doesn't return a status of 200, the failure() method is called. The argument that is
passed in to both methods is a response object containing all of the information about the response (including all XMLHttp properties such as status, statusText, responseText, responseXML, etc.). The final argument of asyncRequest() is the data to post to the server. For POST requests, this value is a string of URL-encoded values to be sent; for GET requests, this value can either be omitted or set to null.
var callback = { success: function (oResponse) { //retrieve the argument var sArg = oResponse.argument; }, failure: function (oResponse) { //retrieve the argument var sArg = oResponse.argument; }, argument: "string of info" }
Once the argument property is defined, it will be returned on the response object that is passed into both the success() and failure() methods. The argument property on the response object contains this value. There may be a case when you want the success() and failure() methods to call methods on another object. To ease this case, you can use the scope property to set the object scope of methods. For instance, suppose you have an object oObject that has the methods handleSuccess() and handleFailure() that you want to use for success() and failure(), respectively. If you were just to pass in pointers to those methods, you would lose the scope in which they are to be executed (i.e., the this object inside of these methods would not refer to oObject). But, by setting the scope property, you can maintain the proper scope for these methods:
Form Interaction
It is becoming more and more common to submit form values through an Ajax request instead of using the traditional form posting technique. The Yahoo! Connection Manager makes this easy by allowing you to set a form whose data should be sent through the request. For instance, suppose you have a form with the ID of "frmInfo". You could set up a POST request to submit the data contained in the form like so:
asyncRequest() is called. The data being sent is the data at the time when setForm() was called, so this
method should only be called right before a call to asyncRequest(), to ensure that the data is the most recent available.
Additional Features
Presently, Internet Explorer uses ActiveX objects for XMLHttp. These ActiveX objects have string-based signatures that must be used to create the object using JavaScript. Since the Connection Manager handles this creation for you, generally you don't need to know what these signatures are. However, if a change to the signatures occurs in the future, you can specify the most recent signature by using setProgId() like so:
YAHOO.util.Connect.setProgId("some.future.ActiveX.signature");
Here, the Connection Manager will attempt to create an ActiveX object with the signature "some.future.ActiveX.signature" before it attempts to create an object from the known list of signatures. This is something that Yahoo! provided to future-proof the library (though Internet Explorer 7 will feature a native
XMLHttpRequest object as other browsers now do; this may not be necessary). Unlike other methods, this method sets the signature string for all requests.
You can also send header information by using the initHeader() method, such as:
Limitations
While the Yahoo! Connection Manager does make some requests easier, it does have its limitations. Currently, only asynchronous requests are supported, so you'll be stuck using old school XMLHttp is you need to make a synchronous request. Though many argue that synchronous requests should never be used, sometimes there are practical reasons for it. It is also worth noting that this is version 0.9 of the Connection Manager, so undoubtedly there will be some additions and changes in the future. However, for the time being, it remains one of the most compact libraries for cross-browser XMLHttp available. Nicholas C. Zakas is the lead author of Professional Ajax by (Wrox, 2006, ISBN: 0-471-77778-1) and the author of Professional JavaScript for Web Developers (Wrox, 2005, ISBN: 0-7645-7908-8). He has worked in web development for more than five years. He has helped develop web solutions in use at some of the largest companies in the world. Nicholas is also an active blogger on JavaScript and Ajax topics at http://www.nczonline.net/ and his most recent other article at Wrox.com is XMLHttp Requests for Ajax.