Fundamentals of Ajax Development Tutorial

This is the ‘Ajax Development Fundamentals’ tutorial which is part of the Javascript Development Course offered by Simplilearn. We will get to know the basics of Ajax and then we will go in detail about other elements of Ajax.

What is Ajax?

Ajax is an acronym for Asynchronous Javascript and XML. It is a group of interrelated web development techniques used on the client side and not on the server side, to create asynchronous web applications.

With Ajax, web applications can send data to and achieve data from a server, and they can do that asynchronously or in the background. It can be done without interfering with the display or behavior of the existing page. Data can be retrieved using the XMLHttpRequest object, and despite the name, the use of XML is not actually required.

Quite often, JSON is used instead, and these requests do not need to be asynchronous. Ajax is not a single technology, but instead, it is a group of technologies. HTML and CSS can be used in combination with markup and style information. So instead of just regular text, you can use HTML and CSS to style it.

DOM (Document Object Model)

The DOM (Document Object Model) is accessed with Javascript two dynamically display and to allow the user to interact with the information presented. Javascript and the XMLHttpRequest object provide a method for exchanging data, asynchronously between the browser and the server to avoid full page reloads.

Basically, we can use Javascript load other pages inside the currently loaded page and the information that we load can be styled using HTML and CSS. Also, information can also be PHP, which will run on the server. It could be regular text, JSON or XML.Once we load the page, we can actually access all the information from our Javascript, and we can use that Javascript to access our DOM or to change something or even make it look more dynamic in the web page.

For example, when we click a picture on a website, you'll notice that a bigger version of the image pops up. The webpage doesn’t load two images for that action. Instead, to make the page actually load faster, it loads a small image and then enlarges it when we click on it, thereby preventing any kind of full-page reloading. Also, the page looks much more dynamic.

Executing Ajax

Executing Ajax is a time consuming process. Typically, we put all of this inside a function, so we don’t have to write this out over and over again. Let’s find out what an Ajax or an XMLHttpRequest looks like.

https://www.simplilearn.com/ice9/free_resources_article_thumb/xml-http-request-sample.JPG

Basically the above code explains that Ajax is the new XMLHttpRequest and the request is Javascript asking the server to have access to the new page. To execute we use ajax.open() and ajax.send() functions.

When we run this above code it gives out the result. But that is not the result that we want. Instead, we want the user to click a button and run the Ajax. For example, when we click a picture on Facebook and a box appears on top of everything else with the picture, comments, likes, and ads. That is actually Ajaxed. None of the elements were preloaded since it would take a lot of time for the servers to load all of those again.

Instead, we put all of them in a function and request the new XMLHttpRequest.

https://www.simplilearn.com/ice9/free_resources_article_thumb/funtion-new-ajax.JPG

Now every time we run this, the function returns an ActiveX object or an XMLHttpRequest.

Test Script

https://www.simplilearn.com/ice9/free_resources_article_thumb/revision-code-ajax.JPG

Function LoadMe() is executed using the above function such as ajax.open() and ajax.send() and finally we assign the LoadMe() Function to a click of a button which will Ajax the page on execution.

Keen on learning more about Ajax Fundamentals? Click to know more!

Let us have an overview of the steps we did in the above code.

  1. Create a function to create our new XMLHttpRequest and return the requested info.
  2. We can then use a variable to access that function and to store that functions information that it returns.
  3. We looked at AjaxHandler.readyState, and if the state = 4, then it's almost ready and almost fully loaded.
  4. We also checked if the AjaxHandler.status = 200. Now, if the ready state = 4 and the status = 200, then the file has been loaded and we can execute the code inside of the if statement.
  5. To open the Ajax request, we must use AjaxHandler.open(request,file, async). Next we use document.getElementById(“name”).innerHTML = value.

This script may not work on our local computer. And if it doesn’t work, we need to run servers such as WAMP or LAMP or upload it online. The reason it doesn’t work is that Ajax will look for the server the file is hosted on and will ask for access to another file, and if we are not running a server it definitely won’t work.

Ajax: Request

An Ajax Request is when you ask the server for permission to a certain file. This is done using the open () method.

https://www.simplilearn.com/ice9/free_resources_article_thumb/ajax-response-example.JPG

The code above returns the Ajax Object. To get our object, we need the value of var ajax from the code. Luckily, we can get that because the function returns the ajax variable. To get this, we write the code given below.  

https://www.simplilearn.com/ice9/free_resources_article_thumb/ajax-value-function.JPG

The value that is returned is actually the same result returned by the Ajax Function above. Also if we go a step further, Ajax will be an ActiveXObject or XMLHttpRequest. Now that we have the object, we can use the open method.

The open method has three parameters.

  1. Method
  2. URL
  3. Asynchronous or not

Method is either GET or POST. GET is a lot less secure than POST. POST can hold unlimited data.

The URL is the link to the file that you want to access. This is best if you have direct access to the file or if it's on the same server or even on the same website. Trying to Ajax another website doesn't usually work because we are trying to access someone else's file.

Asynchronous is whether you want to load a page while being able to load other scripts. Always set this to true and it allows Ajax to actually be asynchronous.

Example:

https://www.simplilearn.com/ice9/free_resources_article_thumb/open-method-example.JPG

Where:

POST is the method, mypage.html is URL and true is the asynchronous parameter.

Now even if we run this, no changes occur and it doesn’t work. So we need to use the send() method to send our request.

https://www.simplilearn.com/ice9/free_resources_article_thumb/send-method-ajax.JPG

We need to get the information from our request inside the variable.

https://www.simplilearn.com/ice9/free_resources_article_thumb/video-preview-banner-javascript.jpg

Ajax: Response

We have learned how to create a request using the open() method and how to send a request using the send() method. We can send requests until the cows come home, but nothing will change until we know to harvest the information we receive after the request was sent. To receive the information we used the responseText object. We simply attach this object to our AjaxHandler and were able to access the information whether it's XML, HTML, PHP, CSS, etc.

We will be using the same function as earlier.

https://www.simplilearn.com/ice9/free_resources_article_thumb/funtion-new-ajax.JPG

We need to use the AjaxHandler variable to identify how far along the loading is. Loading partial information is useless because if we Ajax a page that starts with a bold tag and it cuts off halfway through, then all information will be in bold. So we use the onreadystatechange object and assign a value to this.

https://www.simplilearn.com/ice9/free_resources_article_thumb/on-ready-state-change.JPG

We made a new request object(the XMLHttpRequest) by using the newAjax() function.

We informed Javascript, that when readyState changes, execute the code inside the curly brackets first.

If readyState==4 and status==200, alert with text from “mypage.html”

With .responseText, we can use the information in any possible way. We can put it into the innerHTML of an element, store it, alert it or any other way possible. In all the ways .responseText is the value from the file we loaded.

Ajax: readyState & Status

onreadystatechange = function(){}

An onreadystatechange is a function that we define at the moment or defined earlier. Also, that function that we defined now or the one that we defined earlier in a separate function will execute every single time that the readyState changes in an Ajax request.

Get more information on Ajax Fundamentals. Click to know more!

readyState

readyState is the status of the XMLHttpRequest that we’ve been making with the newAjax() function. There are five states with zero being the first one because computers always start counting from zero.

readyState

What it Means

0

XMLHttpRequest has not started.

1

There is a connection between you and the server. You have successfully sent the request.

2

Received your request

3

The server is thinking about your request. Will it accept or decline?

4

The request has been accepted and the response text is now available to use.

The reason we always check for readyState = 4 is so that we can actually use the response text.

In most cases, we don't need to check when the readyState < four. So if readyState is 0,1,2 or 3, we don't really need to check that because we don't really do anything with it. Usually, we only care if:

  • The request is accepted.
  • When we can use the information that's being given to us through the response text object.

Status

Remember this is Javascript, so it is case sensitive is how the page is being perceived.

statusCode

What it means

200

This means the pages “OK”. It’s ready to be displayed.

404

Page unknown or page not found. When we try to go to a website that doesn't exist or click a link that brings us to a page that doesn't exist. Those are for are 404 Pages: Not found.

https://www.simplilearn.com/ice9/free_resources_article_thumb/ready-state-changes.JPG

  • The above functions run 5 times since there are 5 ready states.
  • We check, If readyState==4 and status==200
  • We then use ajaxHandler.responseText.

This covers Javascript.

Ajax: Putting it together

Since we have covered Ajax, we will have a look once again at the code we saw earlier.

https://www.simplilearn.com/ice9/free_resources_article_thumb/revision-code-ajax.JPG

We will look at what exactly happens inside when we run this code. We now have a clear understanding of the code.

Conclusion

This concludes ‘Fundamentals of Ajax Development’ Tutorial.

  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.

Request more information

For individuals
For business
Name*
Email*
Phone Number*
Your Message (Optional)
We are looking into your query.
Our consultants will get in touch with you soon.

A Simplilearn representative will get back to you in one business day.

First Name*
Last Name*
Email*
Phone Number*
Company*
Job Title*