October 26, 2016
Hot Topics:

Ajax and the Yahoo! Connection Manager

  • April 21, 2006
  • By Nicholas Zakas
  • Send Email »
  • More Articles »

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:

var oForm = document.getElementById("frmInfo");
YAHOO.util.Connect.asyncRequest("post", "datahandler.php", oCallback);

Using the setForm() method, the Connection Manager creates a string of data to be send in the next request. Because of this, there is no need to specify the fourth argument for the asyncRequest() method, since all the data is already retrieved from the form.

It's important to note that the data string is constructed when you call setForm(), not when 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:


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:

YAHOO.util.Connect.initHeader("MyName", "Nicholas");
YAHOO.util.Connect.asyncRequest("get", "info.php", oCallback);

In this example, an extra header with a name of "MyName" and a value of "Nicholas" is sent to the server. Note that this header is only good for one request; all headers reset to default values after each request.

There's no need to set the "Content-type" header for POST requests. The Connection Manager handles this for you behind the scenes.


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.

About the Author

Nicholas C. Zakas is the author of Professional Ajax by (Wiley Press, ISBN: 0-471-77778-1) and Professional JavaScript for Web Developers (Wiley Press, ISBN: 0-7645-7908-8).

Adapted from Professional Ajax written by Nicolas C. Zakas . Copyright 2006 by Wiley Publishing, Inc. All rights reserved. Reproduced here by permission of the publisher.

Page 3 of 3

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel