Home > YUI > AJAX Request Using YUI

AJAX Request Using YUI

November 12, 2009 Leave a comment Go to comments
Ajax stands for “Asynchronous Javascript And XML”. The interactions between client and server in the standard web applications are “synchronous”. This means that one request has to wait for other to complete. In asynchronous request scenario the multiple requests and responses are independent of each other. That means one request will not have to wait for the other to complete.
Yahoo User Inertface provides a good way to generate the XMLHttpRequest (Ajax request) through its “Connection Manager“. Here I am giving a very simple example to use YUI connection manager for this:

<html>

<head>

<title>Simple Ajax Request</title>

<script type=”text/javascript” src=”http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js”></script&gt;

<script type=”text/javascript” src=”http://yui.yahooapis.com/2.7.0/build/event/event-min.js”></script&gt;

<script type=”text/javascript” src=”http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js”></script&gt;

</head>

<body>

<h1>Simple Example of creating Ajax Request</h1>

<script>

//The callback function:

var callback = {

success: function(a){

//Assign the resonse to the HTML element

document.getElementById(‘response’).innerHTML = a.responseText;

},

failure: function(a){

//Alert the failure message

alert(a.statusText);

}

}

//Make the Ajax request:

function ajaxRequest(){

var newRequest = YAHOO.util.Connect.asyncRequest(‘GET’, ‘Request/Url’, callback);

}

</script>

<!–The div element in which the resonse will be shown –>

<div id=”response”></div>

<input type=”button” value=”Create Request” onClick=”ajaxRequest();”>

</body>

</html>

Hope this example helped in better understanding of Ajax using YUI.

Advertisements
Categories: YUI
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: