AJAX Info

[Zero Tolerence]

Somewhat of a Guide here I guess. When I started learning abaout AJAX, i was told what it was, and what it could do, but never how it worked.

Ajax updates a web page, without actually refreshing a page. I guess it would be more fair to say that Ajax can help you update a section of a web page, without refreshing/reloading the whole page.

I use Lasso, so most of the examples I give will involve lasso code, however, the actuall AJAX part is seperate from any Lasso/PHP/fx.php/CDML/XSLT code, it just javascript.

Every content part of an HTML page can contain an ID, it will look something like the following:

Inside of that DIV is more html, a form or a navigation header, anything.  For these purposes I'm going to leave it blank. The onmouseover call tells the browser what to do when the mouse is moved over that div.  It calls a function “UpdateDiv” while passing the paramater 'testingdiv'.(Well get to the function in a minute)



One of the bigger problems people have with AJAX, is that unless you make it, AJAX does not tell your users that the page has been updated. To counter this, I create numerous blank 

's or 's next to the content that will be updated. Here is the Javascript I will be using:

Assuming I made no mistakes here, that would return the firstname of the person with whatever key i specified when I called the function, and put it right into the divid that was specified at the same time. All this done, without reloading or refreshing any pages.

This is my first attempt at writing something like this, so if you have any questions, or if I have made any mistakes please let me know so I can refine this into something useful for the community.

EDIT: I don't know why the

 tags aren't working, can anyone tell me?

 var FMQuerry = false; 



      if (window.XMLHttpRequest) {

        FMQuerry = new XMLHttpRequest();

      } else if (window.ActiveXObject) {

        FMQuerry = new ActiveXObject("Microsoft.XMLHTTP");

      }

This section of code needs to be included in EVERY page you have that you intend to use AJAX on.  Basically, Internet Explorer handles XMLHttpRequest different than other browsers, and this code makes sure it works on IE and other browsers both.



Now for the actual meat of the AJAX is this javascript:

function UpdateDiv(divid)	{

	var obj = getElementById(divid);

	var udtext = “This div has been updated!”;

	obj.innerHTML = udtext;

}

This code is simple, I'm not querying any databases, I'm just updating a div, but it shows you how to update something on your page without reloading the whole page.

var obj = getElementById(divid);

You guessed it, all that code does is sets the variable 'obj' to whatever divid is specified when you call the function. In our case, 'testingdiv'.  After that, I set my udtest to the text I want displayed in the div, then in the last call 'obj.innerHTML = udtext;  I insert udtext into the innerHTML of the variable 'obj'.



Now on to databases.  To get your AJAX to querry a database, the quick and easy way is to create a separate page that querries that DB, and that returns ONLY the information you want updated in your main page.  In lasso, it would look something like this:

[inline: -Search;

-Username='someuser',

-Password='somepassword',

-Database='db',

-Table='table',

-MaxRecords = '1',

-KeyField_Value=(Action_Param: 'key')]



[Field: tFirst_Name]



[/inline]

This returns the first name of the record that has a KeyField_Value of whatever I specify in the URL.



For instance:

http://127.0.0.1/testpage.lasso?key=2

Would return the first name of whoever had a Key of 2 in the database.



If I call that page in a regular browser, the only thing displayed to me will be his first name, nothing else.  This is the way I want it.



Lets expand our Javascript here for a second:

 

function UpdateDiv(divid, key)	{

	var obj = getElementById(divid);

	var url = “http://127.0.0.1/testpage.lasso?key=” + escape(key);

	FMQuerry.open("GET", url);

		FMQuerry.onreadystatechange = function()	{

			

            		if (FMQuerry.readyState == 4 && FMQuerry.status == 200) { 

			var rpt = FMQuerry.responseText;

				  }

			}

	obj.innerHTML = FMQuerry.responseText;

}

Edited August 11, 2006 by Guest

[Martin Brändle]

You may consult the book "Ajax in Action" by Dave Crane et al, Manning, 2005.

The authors describe how to separate the AJAX content loader and the functions that display the loaded content.

So the inner core of AJAX always stays the same; one just has to pass query and the different display functions to the content loader. I have written an AJAX based web shop that uses this scheme; unfortunately, although functional, it's not yet ready for release due to various reasons.

[Zero Tolerence]

Thank you for the feed back Martin, I believe what your talking about here, is just having a seperate function for the Querry, and one for the innerHTML. While this is a valid point, it goes beyond the scheme of this post, which was meant to help people understand how AJAX works.

To anyone who follows this, If I'm understanding Martin correctly you basically have one function that calls multiple other functions. For instance, rather than hard coding my url as I did above, have it be passed to the funciton in the HTML call.(onmouseover UpdateDiv(url, div, field, key)

thus making your Javascript re-usable many times over.

Thanks for the feedback Martin.

[ericlewis107]

AJAX stands for Asynchronous JavaScript and XML. It is used for allowing the client side of an application to communicate with the server side of the application. Before AJAX, there was no way for the client side of a web application to communicate directly with the server. Instead, you would have to use page loads. With AJAX, the client and server can communicate freely with one another.