YUI: Connection Example
Click the button below to fire an XHR request to a page that will sleep for about 5 seconds.
Click to make Connection
The HTML
<button id="make_conn">Click to make Connection</button>
The CSS
#make_conn { margin: 1em; border: 1px solid black; padding: .25em .25em .25em 18px; background-color: #eee; } .calling { background-image: url( progress.gif ); background-repeat: no-repeat; background-position: 3px 3px; color: #999; font-style: italic; } .good { color: green; } .bad { color: red; }
The Javascript
var conn = null; var conn_maker = null; function init() { conn_maker = YAHOO.util.Dom.get('make_conn'); YAHOO.util.Event.addListener(conn_maker, 'click', makeConnection); } callback = { success: handleGood, failure: handleBad } function handleGood(o) { YAHOO.util.Dom.replaceClass('make_conn', 'calling', 'good'); YAHOO.util.Dom.get('make_conn').innerHTML = 'Connection Worked'; } function handleBad(o) { YAHOO.util.Dom.replaceClass('make_conn', 'calling', 'bad'); YAHOO.util.Dom.get('make_conn').innerHTML = 'Connection Failed'; } function makeConnection() { YAHOO.util.Dom.removeClass('make_conn', 'good'); YAHOO.util.Dom.removeClass('make_conn', 'bad'); YAHOO.util.Dom.addClass('make_conn', 'calling'); YAHOO.util.Dom.get('make_conn').innerHTML = 'Calling Server...'; var sUrl = "xml.php"; var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); } YAHOO.util.Event.addListener(window, 'load', init);