Posts Tagged ‘AJAX’

jQuery, New Age JS Library

Sunday, May 3rd, 2009
jQuery – The new age JS library
We”ll take two scenario’’s to test the power of jQuery. The first one is, we have an table displayed in a page which has more rows added in it. When the user clicks on a button, the rows(alternate) style should be changed. If we use the normal javascript and DOM functions, then we”ll be using the className attribute to change the class name of the each row in a particular. The code may look like the following.
The First Scenario
			var trCollection = tblElement.getElementsByTagName("tr");
			for(i=0;i<trCollection.length;i++) {
				if(i%2 == 0)
					trCollection[i].className = ''myEvenRow'';
				}
		
The above code may take time in case of MSIE :-) , When the number of rows is about more than 100(We can have a try :-) ). But the same logic with the jQuery can be implemented like the following and it”ll definitely gives you less execution time. The code snippet for jQuery will be like the following.
			$("table tr:nth-child(even)").addClass("myEvenRow");
		
isn’t simple to use and fast in execution, Yes it made a sense when the rows are more. :-D
The Second Scenario
When we have an grid view and the user does the operation based on the selected record using a checkbox or radio option, it’’s always painful for the developers to give a Check All/UnCheck All, :-D , which i really hate when the user selects the option of display records in 100 and you have an check all and uncheck all.
Here goes my stone age code(js) :-)
		var trColl = document.getElementsByName("checkboxesName");
		for(i=0;i&amp;lt;trColl.length;i++)
			trColl[i].checked = true;
	
Lovely jQuery Code
		$(''input[name=checkboxesName]'').attr(''checked'', true);
		
It really made huge difference when i had more # of checkboxes in the page. I tried increasing from 300 to 3000 elements to check, it made a huge difference in the execution time in MSIE 8.0, but FF i was not able to see the big difference, We can even try with timers in both the method of execution.
jQuery is really rocking and still i”m a baby in jQuery, will update you all soon with some other topics. ;)
Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

XHR – Backbone for Web2.0

Wednesday, April 22nd, 2009
XHR-Xml HTTP Request.XMLHttpRequest is a JavaScript object that was designed by Microsoft, adopted by Mozilla, and is now being standardized in the W3C. It provides an easy way to retrieve data at a URL. Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports connections other than HTTP. The most interesting story about XHR is, MS has introduced in 2000 for it’’s Web Outlook.It has been available since the introduction of Internet Explorer 5.0 and is accessible via JScript, VBScript and other scripting languages supported by IE browsers.
			var req = new XMLHttpRequest();
		
The above javascript creates an XHR, whcih can be used to request a data from Server asynchronously or synchronously.The following method shows how to create an XHR in different versions of browser(s).
			var objectXHR = "";
			try {
				objectXHR = new XMLHttpRequest(); //Supports in Latest Browsers
			}
			catch (trymicrosoft) {
				try {
					objectXHR = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch (othermicrosoft) {
					try {
						objectXHR = new ActiveXObject("Microsoft.XMLHTTP");
					}
					catch (failed) {
						objectXHR = false;
					}
				}
			}
			
The objectXHR can be used to send the request to server asynchronously or synchronously. The following code will send the synchronously.
			var XHR = new XMLHttpRequest();
			XHR.open(''GET'', ''http://www.techmaddy.com/'', false);
			XHR.send(null);
				if(XHR.status == 200)
					alert("Yeahhh....My First Successful Sync Request ");
		
The Open method used to send the request to servers. The third parameter decides the request shoud be asynchronous or synchronous.
			XHR.open(''GET'', ''http://www.mozilla.org/'', false);
		
The following code calls the server in Asynchronous mode
			var XHR = new XMLHttpXHRuest();
			XHR.open(''GET'', ''http://www.techmaddy.com/'', true);
			XHR.onreadystatechange = function () {
				if (XHR.readyState == 4) { //transaction Complete
					if(XHR.status == 200) //Successful Return
						dump(XHR.responseText);
					else
						dump("Error loading pagen");
				}
				else {//Show the busy icon	}
			};
			XHR.send(null);
		
The XHR is most useful in refreshing the page partially. Validating the username, password strength check.
Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Get Adobe Flash player