Tag Archive | "ajax"

Tags: , , , , , ,

Using AJAX to create a Simple Application

Posted on 05 February 2012 by Moki

As stated in earlier posts AJAX is a technique and not a new programming language for creating fast and dynamic web pages. Here we will show an ajax application that will simply change data on a page when a button is clicked. The application will contain one DIV section and a button that when clicked will call a function and return data from a server and replace the current content of that DIV.

The HTML to Create the Div and Button:

<html>
<body>

<div id="somename"><h2>AJAX will change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change DIV Content</button>

</body>
</html>

 

Create the LoadXMLDoc() function:

<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script will be here ...
}
</script>
</head>

 

This is of course just the process behind it and not a fully functional setup. The AJAX itself is not included but this is how you would setup the page so that you are ready to use AJAX to create the process itself. We will be posting functioning examples of AJAX being used shortly.

Comments (0)

Tags: , , , , , , ,

What is AJAX and how does it Work?

Posted on 05 February 2012 by Moki

First thing that you need to know about Ajax is that it is to be used by those that already have at least some working knowledge of HTML/XHTML, CSS and Javascript/DOM. Ajax stands for “Asynchronous Javascript and XML and is a not a language but technique used to create dynamic and fast webpages.

Ajax allows a developer to create pages that are updated asyncronously by sending and recieving small amounts of data through the server in the background. This means you can reload data on the page without actually reloading the page itself. Some examples of sites that use AJAX to create this type of features are Google Maps, Youtube and Facebook tabs. In fact the AJAX method was made popular in 2005 being used with Google Suggest.

How does AJAX work?

  1. Browser creates an XMLHttpRequest object and sends it
  2. Server processes the HTTPRequest, creates a response and sends the new data back to the browser
  3. Browser processes the returned data using Javascript and updates the pages content.

Keep in mind that AJAX applications are ran within the browser and are OS independant. AJAX uses internet standards and uses a combination of XMLHttpRequest objects to exchange the data as stated above, Javascript/DOM to display and interact with the information, CSS to style the data and XML generally is used as the format to transfer the data.

Comments (0)