Introduction To Ajax

by Alex Raiano

Related link: http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html



IBM is hosting a great introduction to Ajax. If you've never used Ajax before you should definitely check out their tutorial. The tutorial does a great job breaking down the technology that makes Ajax possible. I know that I understand Ajax a lot better now....

5 Comments

LeProgrammeur
2006-05-11 22:48:38
Introduction to Ajax tutorial
INSERT INTO Tutorials (ID, TutorialTitle, TutorialDescription, TutorialLink, TutorialType, TutorialLanguage) VALUES (54,'Ajax using Get Request','This tutorial has the objective to introduce you to Ajax. You can call methods on the server without refreshing the browser using Ajax. You can use the GET or POST methods. In this tutorial, you will use the GET method.','','Ajax','English')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,1,'IE and Firefox use different Ajax objects. IE uses the MSXML.XMLHttp activeX object. There are actually 5 versions of the IE activeX object. Because of these differences, you will create a function that returns the right Ajax object.','Type function createXMLHttp(){}','Images/AjaxGetMethod/Tutorial-0001.jpg','transptexto=function createXMLHttp(){}','77','242','505','74')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,2,'First, you use an if block to check if the Firefox version of the Ajax object is available. If it is, it returns an instance of this object.','Type if(typeof XMLHttpRequest != "undefined"){}','Images/AjaxGetMethod/Tutorial-0002.jpg','transptexto=if(typeof XMLHttpRequest != "undefined"){}','88','265','504','62')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,3,'First, you use an if block to check if the Firefox version of the Ajax object is available. If it is, it returns an instance of this object.','Type return new XMLHttpRequest();','Images/AjaxGetMethod/Tutorial-0003.jpg','transptexto=return new XMLHttpRequest();','123','293','474','60')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,4,'Next, you will test if the browser supports ActiveX objects. If it doesn''''t then a message telling the user that the Ajax (MSXML) object is not installed on the browser will appear.','Type else if(window.ActiveXObject){}','Images/AjaxGetMethod/Tutorial-0004.jpg','transptexto=else if(window.ActiveXObject){}','99','322','494','81')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,5,'Because IE has 5 different versions for the Ajax object, you will need to use a try/catch block for each attempt of creating an Ajax (MSXML) object. It will attempt to create the newest version going down towards the oldest. The first attempt that succeeds will return the object.','Type var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];','Images/AjaxGetMethod/Tutorial-0005.jpg','transptexto=var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];','123','333','474','47')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,6,'Because IE has 5 different versions for the Ajax object, you will need to use a try/catch block for each attempt of creating an Ajax (MSXML) object. It will attempt to create the newest version going down towards the oldest. The first attempt that succeeds will return the object.','Type for(var i=0;i insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,7,'Because IE has 5 different versions for the Ajax object, you will need to use a try/catch block for each attempt of creating an Ajax (MSXML) object. It will attempt to create the newest version going down towards the oldest. The first attempt that succeeds will return the object.','Type try{}','Images/AjaxGetMethod/Tutorial-0007.jpg','transptexto=try{}','141','331','458','57')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,8,'Because IE has 5 different versions for the Ajax object, you will need to use a try/catch block for each attempt of creating an Ajax (MSXML) object. It will attempt to create the newest version going down towards the oldest. The first attempt that succeeds will return the object.','Type var oXmlHttp = new ActiveXObject(aVersions[i]);','Images/AjaxGetMethod/Tutorial-0008.jpg','transptexto=var oXmlHttp = new ActiveXObject(aVersions[i]);','165','321','424','53')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,9,'Because IE has 5 different versions for the Ajax object, you will need to use a try/catch block for each attempt of creating an Ajax (MSXML) object. It will attempt to create the newest version going down towards the oldest. The first attempt that succeeds will return the object.','Type return oXmlHttp;','Images/AjaxGetMethod/Tutorial-0009.jpg','transptexto=return oXmlHttp;','166','333','431','54')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,10,'You will need a catch block just to guarantee that for each try that doesn''''t succeed will not stop JavaScript from attempting to create the next version.','Type catch(oError){}','Images/AjaxGetMethod/Tutorial-0010.jpg','transptexto=catch(oError){}','148','254','447','96')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,11,' If the Firefox Ajax object could not be found and no attempt to create an IE Ajax object succeeded, then the application will throw an exception to let the user know that Ajax is not installed.','Type throw new Error("MSXML is not installed.");','Images/AjaxGetMethod/Tutorial-0011.jpg','transptexto=throw new Error("MSXML is not installed.");','100','334','493','50')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,12,'Next, you will code the function that will be used in the click event of the button to call the server-side code that returns customer information.','Type function getCustomerID(obj){}','Images/AjaxGetMethod/Tutorial-0012.jpg','transptexto=function getCustomerID(obj){}','77','343','513','43')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,13,'Next, you will code the function that will be used in the click event of the button to call the server-side code that returns customer information.','Type var oXmlHttp = createXMLHttp();','Images/AjaxGetMethod/Tutorial-0013.jpg','transptexto=var oXmlHttp = createXMLHttp();','89','333','505','48')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,14,'First, we obtain the right Ajax object by using your createXMLHttp function.','Type oXmlHttp.open("get","GetCustomer.aspx?customerID=" + obj.value, true);','Images/AjaxGetMethod/Tutorial-0014.jpg','transptexto=oXmlHttp.open("get","GetCustomer.aspx?customerID=" + obj.value, true);','100','333','492','51')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,15,'Remember that Ajax allows you to use either the GET or POST methods. You will use the GET method and pass a QueryString variable containing the customer ID.','Type oXmlHttp.onreadystatechange = function(){}','Images/AjaxGetMethod/Tutorial-0015.jpg','transptexto=oXmlHttp.onreadystatechange = function(){}','100','333','495','72')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,16,'Notice that there is a "true" value in the last parameter of the open method. It defines that you will make an asynchronous call. If set to "false", it makes a synchronous call. Because you will make an asynchronous call, you need to define the callback event handler.','Type if(oXmlHttp.readyState == 4){}','Images/AjaxGetMethod/Tutorial-0016.jpg','transptexto=if(oXmlHttp.readyState == 4){}','112','333','483','65')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,17,'The way you setup the callback event handler is by assigning a function to the "onreadystatechange" event of the Ajax object. The "readyState" property of the Ajax object can have 5 values: 0, 1, 2, 3 or 4. You will check if the value of "readyState" is 4 which means "complete", in other words, if the server returned the value.','Type if(oXmlHttp.status == 200){}','Images/AjaxGetMethod/Tutorial-0017.jpg','transptexto=if(oXmlHttp.status == 200){}','147','332','441','51')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,18,'Complete doesn''''t means success. Therefore, you need to check the value of another property: "status". The value of 200 means success.','Type displayMsg(oXmlHttp.responseText);','Images/AjaxGetMethod/Tutorial-0018.jpg','transptexto=displayMsg(oXmlHttp.responseText);','166','332','435','53')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,19,'If it was a success, you call the displayMsg function (you will code it later) passing to it the value of "responseText". The "responseText" Ajax object''''s property contains the returned value from the server.','Type else{}','Images/AjaxGetMethod/Tutorial-0019.jpg','transptexto=else{}','148','344','445','56')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,20,'If it was not a success, then you will call the displayMsg passing an error message.','Type displayMsg("An error occurred: " + oXmlHttp.statusText);','Images/AjaxGetMethod/Tutorial-0020.jpg','transptexto=displayMsg("An error occurred: " + oXmlHttp.statusText);','172','333','422','50')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,21,'The Ajax object contains the "send" method. That is how you make the actual call to the server. You will pass null in its parameter because you are using the GET method. The GET method doesn''''t have body content. For the POST method, you would not pass null.','Type oXmlHttp.send(null);','Images/AjaxGetMethod/Tutorial-0021.jpg','transptexto=oXmlHttp.send(null);','100','333','495','86')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,22,'In this tutorial, you will simply call the JavaScript alert method to print on the screen the returned value from the server (which in this case it should be the company name.','Type function displayMsg(sText){alert(sText);}','Images/AjaxGetMethod/Tutorial-0022.jpg','transptexto=function displayMsg(sText){alert(sText);}','76','333','519','55')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,23,'Next, you will add a textbox and a button. You will assign to the onclick event of the button the getCustomerID function.','Click on the vertical scrollbar down arrow.','Images/AjaxGetMethod/Tutorial-0023.jpg','onclick','589','333','38','40')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,24,'Next, you will add a textbox and a button. You will assign to the onclick event of the button the getCustomerID function.','Type ','Images/AjaxGetMethod/Tutorial-0024.jpg','transptexto=','65','307','528','77')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,25,'Next, you will add a textbox and a button. You will assign to the onclick event of the button the getCustomerID function.','Type ','Images/AjaxGetMethod/Tutorial-0025.jpg','transptexto=','62','320','531','74')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,26,'Next, you will create the server side code.','Press any key to proceed.','Images/AjaxGetMethod/Tutorial-0026.jpg','key=','','','','')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,27,'You will not need to type anything. This tutorial will add the code for you. All it does is receive the passed customer id and return the related company name.','Press any key to proceed.','Images/AjaxGetMethod/Tutorial-0027.jpg','key=','','','','')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,28,'An asp.net web form has a lot of HTML contents that for this example don''''t have to be returned to the Ajax call. Therefore, you will remove all the HTML tags leaving in just the top page tag.','Click on the GetCustomer.aspx tab.','Images/AjaxGetMethod/Tutorial-0028.jpg','onclick','180','92','111','45')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,29,'An asp.net web form has a lot of HTML contents that for this example don''''t have to be returned to the Ajax call. Therefore, you will remove all the HTML tags leaving in just the top page tag.','Press any key to proceed.','Images/AjaxGetMethod/Tutorial-0029.jpg','key=','','','','')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,30,'Now it''''s time to test the application. This tutorial will launch the application for you.','Press any key to proceed.','Images/AjaxGetMethod/Tutorial-0030.jpg','key=','','','','')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,31,'You will enter a customer id in the textbox and click on the Get Customer button. The Ajax code will call the GetCustomer.aspx page passing the customer id as a query string variable. The server side code will return the related company name.','Type ALFKI','Images/AjaxGetMethod/Tutorial-0031.jpg','transptexto=ALFKI','12','126','155','55')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,32,'You will enter a customer id in the textbox and click on the Get Customer button. The Ajax code will call the GetCustomer.aspx page passing the customer id as a query string variable. The server side code will return the related company name.','Click on the Get Customer button.','Images/AjaxGetMethod/Tutorial-0032.jpg','onclick','164','113','138','48')
insert into TutorialDetails(TutorialID,SlideID,Comment,Instruction,ImageUrl,EventType,XPos,YPos,Width,Height)Values(54,33,'Conclusion: Ajax has different object versions for each browser. In this example, the server side code returned only a simple string (company name). Keep in mind that instead of a single string, you could return the entire HTML content that could be bound to the innerHTML property of the DIV tag, allowing you to render content dynamically without requesting postback.','You may close this tutorial.','Images/AjaxGetMethod/Tutorial-0033.jpg','last','','','','')
LeProgrammeur
2006-05-11 22:49:35
Introduction to Ajax tutorial
Hi guys!
I just want to share with you this website that I created where I added more than 200 tutorials. They work like training simulators that walk you through the actual steps that you would do in real life. I just recently added a new tutorial called Ajax using Get Request. This tutorial, in a very simple way, walks you through an example of developing an application that uses Ajax.
I hope you guys like it!
Also, in my website, there is a link called "Request a New Tutorial" so that you guys can request me to develop other tutorials.
LeProgrammeur
2006-05-11 22:50:04
Introduction to Ajax tutorial
PLEASE FORGET ABOUT THIS MESSAGE!


Sorry guys! I made a mistake :)

434
2006-08-29 23:45:43
345
fasdfa
2007-01-12 07:30:24
fasdfdas