AJAX What is it? How to AJAX Pt. 1

There is much confusion concerning Asynchronous JavaScript and XML (AJAX). First off AJAX is not a programming language. It provides a new way for you to use the languages I’ve taught you in previous tutorials:

  • HTML
  • Cascading Style Sheets
  • JavaScript
  • PHP
  • XML

AJAX provides you with the ability to:

  • Communicate with your server
  • Pass information back and forth, from the clients browser to the server
  • Update your web page content, without reloading the webpage

For the most part you should have no problem using AJAX techniques, if you understand JavaScript Scripting. In one of my JavaScript Tutorials, I already showed you how to change the content on your site without reloading the page. I’ll review that in this article very soon.

Basics on How to Use AJAX

This is the main way people use AJAX:

  • They write JavaScript code that is triggered to perform some action when a certain event occurs on the website.
  • When that event is triggered, JavaScript is used to get data from the server, using an object called XMLHttpRequest. (More on this very soon)
  • The new information is inserted into your web page, with out a page reload. This is called Asynchronous Data Retrieval.
  • The only negative is that you can only pass XML or Regular Text, between the JavaScript Code and the server.
  • In addition you can use JavaScript code to call PHP code to receive information from a Database.
  • On the fly CSS changes through JavaScript code, is also referred to as an AJAX technique.

Now you know the basics. So it’s time to learn, How to AJAX, like a pro!

A JavaScript Scripting Review

Here I’ll briefly go through how to update your screen text without talking to the server. After this example I’ll explain how to make updates, without reloads, with information from the server.

If you open this file in your browser, you’ll see a simple example on how to update text on screen by triggering an onclick event. Here is the code that makes it all work:

function editNodeText(id, newText) {
var node = document.getElementById(id);
while (node.firstChild)
node.removeChild(node.firstChild);
node.appendChild(document.createTextNode(newText));
}

The Document Object Model & Nodes
Here is probably the most complicated part of this whole script. To understand this code you have to understand what the Document Object Model (DOM) is. The DOM allows you to access all of the objects that lie in your HTML code. Every web page is considered to be a document object. To learn what an object is read my tutorial What is Object Oriented Programming.
So if the browser considers the whole web page to be a document object, how can we work with and edit the HTML by manipulating the document object? HTML documents contain text, images, links, CSS style tags, form elements, etc. These tags are referred to as nodes in the DOM. Javascript can be used to manipulate these HTML elements by referring to them by their defined HTML id name.
In the body of the HTML code below I create a span that contains text, with the following HTML code:
<span id=”ifSpanEx” onclick=”testingIfValue(1,4)”>Compare the values 1 and 4 using a If then Else statement. Click Here for Results</span>
This is a node referred to as ifSpanEx, because that is the id name I gave to it. This is like any other variable and can be given any name you want. In the code:
var node = document.getElementById(id);

  • I create a variable using the keyword var, you define all of your variables using the statement var.
  • The code says I want you to get me the element, being the span defined above, that has the id name defined
  • I pass that id name to the function getElementById()
  • I then assign a short cut that I will refer to as the variable named node.

In the following code:
while (node.firstChild)
node.removeChild(node.firstChild);
I am deleting the text that is currently in the span. I use a while loop, that is used to continually perform an action over and over again. In this case I am repeatedly asking whether there is text in the span. I then delete any text found in the span using the function removeChild(). Put plainly this code is looking for text in the span and if it finds any it is deleting it until the span is empty.
In the code:
node.appendChild(document.createTextNode(newText));
}
I’m saying I want to place new text in my now empty span. The function createTextNode() excepts a variable named newText, and creates a new node that will contain the text I give to it. You see, not only is a tag considered a node, but any block of text can also be considered a node in HTML.
I then use the function appendChild() to assign the newly created text node to the span.
I hope that was understandable? If not leave your questions in the comment section below. Take comfort in the fact that this is the most complicated part of this whole tutorial.
editNodeText(“ifSpanEx”,valueToReturn);
Here I’m calling the function editNodeText() and passing along some variables for it to work with. I already described what that function does.

That is how easy it is to change text div’s or span’s, without a page reload. In the next tutorial I’ll explain how to communicate with the server without a page reload.

Till next time…

Think Tank

7 Responses to “AJAX What is it? How to AJAX Pt. 1”

  1. heisamit says:

    Thanks a million for all the resources you have made available to the online community. God Bless

  2. jyoti says:

    This document is awesome.. rocking .. clear my milions of doubts.. Thanks a ton…

  3. carlos says:

    gracias, eres un master

Leave a Reply

Your email address will not be published.

Google+