AJAX Basics - Coding Cyber

AJAX Basics

Creating a Simple AJAX Request with JavaScript

In this first step, you are going to learn about creating a simple Ajax Request. So that this can be reused in other Scripts, this step is like basics to entire AJAX. If you understand this step, you can create Ajax functions on your own later after completing this.

Other Articles in Learn AJAX

Creating a Hello World Alert with Javascript – JS Basics

First of all, we will start with displaying a simple alert message with JavaScript using script tags. Use this code in head section of your HTML page after the title tag.

After adding this code, you should see an alert message in your browser after loading this HTML page.

You can use the same script tag before the closing body tag, you can use it in both the places.

Here we will see one more method, that is executing this alert message on click event of a button. Just add this button code inside the body tag.

After loading this page in the browser, you will see a button. Click on the button to execute this alert message.

We can wrap this alert message code inside JavaScript function. So that we can execute this on click event of the button. Use this JavaScript function in script tags, you can use it in head section or body section.

And Update the button code, with this below code. It works similar to our previous button except that here I’m using a function to execute the alert message.

We are going to use these JavaScript functions until learning about Event Listeners.

Creating Simple AJAX Request

For creating a simple Ajax Request, we need these three. XMLHttp Object, Open function and Send function. These are the most basic elements for forming Ajax Request.

Here is the code for creating XMLHttp Object, Here I’m using xhr as a variable, you can use xmlhttp or any other variable.

Next is open function, Open function serves as configuration to XMLHttpRequest Object. In this function, we should pass three arguments. First argument is the method, that is either GET method or POST method. Here in this case, I’m using the GET method.

Second argument is the file name, it’s either HTML/PHP or text file. Third argument is an asynchronous request, it’s boolean true or false. It will be always true because it is an asynchronous request, that means request will be sent in the background.

Next is the Send function, send functions is to send the request asynchronously to ajax.php with GET or POST method. We will use send function to send the values with POST method, we will see this later.

If you combine all these three statements then you can create simple Ajax Request, we will see it in next step.

Sending Data in AJAX Request with GET Method

By combining all the three statements we can create a simple Ajax Request with GET method. We will also see how to pass values using GET method to PHP file.

We can pass the values using GET method to PHP file, You can see an example in the below code.
Here I’ve created a variable with the name of url, with the URL variable I’m passing the values in URL.

Now you know, how to pass the values in URL with GET method. In next step, we will see how to pass values in POST method.

Sending Data in AJAX Request with POST Method

For creating Ajax Request with POST method, we can just change the method in open function to POST method from GET method. And we will pass the values to PHP file through send function.

While using post method we should change the headers with setRequestHeader function. We will set the content type to “application/x-www-form-urlencoded” only while using POST method.

Here is the code for Ajax Request with POST method.

By using above code, you can send Ajax Request with POST method.

Receiving Response with AJAX

Till now we have seen sending data in Ajax Request. In this step, we will see receiving the response and update it in our HTML file.

We can receive the response using responseText and responseXML. responseText function while working with text, HTML, any string. responseXML function while working with XML.

We will assign the response to a variable, here is an example code.

responseText

responseXML

Next we should update the HTML, for this we should find the element with the id. Create a Div element with id ajax. And now we can find this div element with id ajax using document.getElementById

Updating HTML is simple, we have to use innerHTML on the target element.

By combining all the above lines of code into our ajax JavaScript function, we can create a successful ajax request.

By using above code, we won’t be able to update the HTML because to update the HTML we should check the readystates. We will see it in next step.

Knowing About ReadyStates

For updating the HTML, we should use the readystate. If the readystate is certain level then only we will update the HTML.

These are five ready states :

  • 0 : Connection created but not opened
  • 1 : Connection opened
  • 2 : Request sent, received by server
  • 3 : Response in progress (partial data)
  • 4 : Response complete (success or failure)

With onreadystatechange function, we can check if the readystate is 4 and the server response code is 200 then we will continue to update the HTML.

Here is the code to update the HTML after reaching the correct readystate.

By using this above code in our JavaScript ajax function, we can create a successful ajax request, we will see it in next step.

AJAX Example Code

Till now we have learned all the basics to create a successful ajax request. In this step, we will see working ajax code.

Create a new file and save it as ajax.php, just add any simple line of text. This text will be displayed in HTML file after making the ajax request.

Now after loading the file and clicking the button, you should see the text from the ajax.php file in the div element with id ajax.

Related Posts
No related posts for this content
Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: