Archive

Archive for the ‘YUI’ Category

AJAX Request Using YUI

November 12, 2009 Leave a comment
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.

Categories: YUI

YUI Profiler

November 5, 2009 Leave a comment
Yahoo User Interface (YUI) provides a very good feature to profile your javascript code. One can measure the performance of their code in the terms of the number of times the function call, average time, minimum time,
maximum time taken by a code block or script to execute. The best feature I feel with YUI code profiler is the ability to profile a specific code block like functions. Here I am going to present how to create a profile using YUI profiler for a code block:
Include the code profiler source file in your script:
HTML block:
<div id=”p_report”></div>
<input type=”button” name=”d_profile” id=”d_profile” value=”Create Profile”>
JavaScript:
YAHOO.util.Event.on(‘d_profile’, ‘click’, function(){
YAHOO.tool.Profiler.registerFunction(“pObject.sayHello”);
var pObject = {
sayHello : function(){
return “Hello”;
}
};
//register method on a global object – no second argument needed
YAHOO.tool.Profiler.registerFunction(“pObject.sayHello”);
//alternate – providing second argument
YAHOO.tool.Profiler.registerFunction(“pObject.sayHello”, pObject);
//call this function
var hello = pObject.sayHello();
var calls = YAHOO.tool.Profiler.getCallCount(“pObject.sayHello”);
var max = YAHOO.tool.Profiler.getMax(“pObject.sayHello”);
var min = YAHOO.tool.Profiler.getMin(“pObject.sayHello”);
var avg = YAHOO.tool.Profiler.getAverage(“pObject.sayHello”);
YAHOO.tool.Profiler.unregisterFunction(“pObject.sayHello”);
document.getElementById(‘p_report’).innerHTML =
“pObject.sayHello(): was called ” + calls +” times.<br>”+
“The average time was ” + avg + “ms.”+”<br>”+
“The max time was ” + max + ” ms.” +”,<br>”+
“The min time was ” + min + ” ms.”;
});

The HTML part will display a button “Create Profile”. Clicking on that button will generate the report of the pObject.sayHello() function call and display the result in the div with id “p_report”.

This is just an example of how to use YUI code profiler.  Hope this will help creating code profiles.

Categories: YUI