DONATE  
MENU
JAVASCRIPT
AJAX
HTML
JSON

AJAX Tutorials

JAVASCRIPT AJAX

» Introduction

» HTTP Request Object

» AJAX Example

» AJAX GET Request

» AJAX POST Request

.. » AJAX » Javascript Ajax » AJAX Example
Share Tweet WhatsApp

AJAX Example

Below, let's demonstrate some examples of AJAX at work so that you can grasp the AJAX concept.
NOTE:
  • Do not be overwhelmed with the syntaxes contained in the following examples. This is simply an example page to demonstrate how AJAX works. You will get to understand and work with AJAX once you start practicing.
AJAX REQUEST TO A TEXT DOCUMENT In this example, we are going to create a text document on the server and send an AJAX request to get the content of that document. ajax_example_20210114082758.txt - THE TEXT DOCUMENT
JavaScript is a client - side web programming language that is used in instructing a website on how it should behave with its user. As a client side programming language, its interpretation lies with the web visitor's browser and not the computer where your website lives.

Unlike HTML, a website may not necessarily use JavaScript but then, a whole lot of websites use JavaScript because JavaScript enables you to create website that are very interactive and user friendly.

Copy PRACTICE IT

Our Webpage
<h1>JAVASCRIPT TUTORIAL</h1>

<!-- The Content of the text file will be display on the div below -->
<div id='about_js'></div>

<!-- BUTTON -->
<p><button onclick='about_js()'>READ ABOUT JS</button></p>

<script>
//Function to send ajax request to the text document

function about_js(){
var http = new XMLHttpRequest(); //Creating http request object

http.onreadystatechange = function(){
if (this.readyState = 4 && this.status == 200)
{
document.getElementById("about_js").innerText = this.responseText;
}
};
http.open("GET","ajax_example_20210114082758.txt", true);
http.send();
}
</script>

Copy PRACTICE IT

Above, we created a text document on our server and thereafter sent an AJAX request to get the content of the document and display on an HTML element whenever a user clicks a button on our webpage. AJAX REQUEST TO HTML DOCUMENTS You can send AJAX request to html documents or documents containing HTML markups, get such markups and have them interpreted in your webpage. ajax_example_20210114085654.html - THE HTML DOCUMENT
<div><p><b>STATUS</b><p><textarea style='border:1px solid black; width:100%;' rows='10'></textarea></div>

Copy PRACTICE IT

Our Webpage
<h1>STATUS UPDATE</h1>

<!-- The Content of the html document will be display on the div below -->
<div id='statusbox'></div>

<!-- BUTTON -->
<p><button onclick='getHTML()'>SHOW STATUS FORM</button></p>

<script>
//Function to send ajax request to the HTML document

function getHTML(){
var http = new XMLHttpRequest(); //Creating http request object

http.onreadystatechange = function(){
if (this.readyState = 4 && this.status == 200)
{
document.getElementById("statusbox").innerHTML = this.responseText;
}
};
http.open("GET","ajax_example_20210114085654.html", true);
http.send();
}
</script>

Copy PRACTICE IT

AJAX REQUEST TO PHP FILES Below, we are sending an AJAX request to a PHP file. Since PHP is a server side language and PHP is installed on our server, the content of the PHP file will be interpreted and any output returned. ajax_example_20210114090846.php - PHP FILE AJAX REQUEST WILL SENT TO
<?php

if ($_SERVER['REQUEST_METHOD'] == "GET"){
$username = $_GET['username'];
$password = $_GET['password'];

if ($username == "SBAdmin" && $password == 123){
echo 1;
}
else
{
echo 0;
}
}
?>

Copy SEE RESULT

Our Webpage
<html>
    <head>
        <title>MyLOGIN PAGE</title>
    </head>
    <body>
<div>
    <h2>MyLOGIN PAGE</h2>
<p><b>Username:</b><p>
    <input style='border-radius:5px; border:1px solid #1561ad; padding:6px;' type='text' id='username'/>
        <p><b>Password:</b><p>
    <input type='text' style='border-radius:5px; border:1px solid #1561ad; padding:6px;' id='password'/>
<p style='display:none' id='fdbk'></p>
            <p><button style='padding:5px; font-weight:bold; background-color:white; color:#1561ad; border:1px solid #1561ad;' onclick='submit()'>LOGIN</button></p>
      </div>  
        <script>
            //Function to handle login
function submit(){
var fdbk = document.getElementById("fdbk"); //Get our feedback paragraph element
var username = document.getElementById("username").value; //Username value
var password = document.getElementById("password").value; //Password value

if (username == ""){ //Username is empty
fdbk.style.display = "";
fdbk.innerText = "No login username."
}
else if (password == ""){ //Password is empty
fdbk.style.display = "";
fdbk.innerText = "No login password."
}
else
{
//Nothing is empty. Process Login
var http = new XMLHttpRequest(); //Create HTTP request object
http.onreadystatechange = function(){//Function when readystate changes
if (this.readyState == 4 && this.status == 200)
{
//Server response is positive i.e request processed

var response = this.responseText; //Response from our php page
if (response == 1){ //Login successful
fdbk.style.display = "";
fdbk.innerText = "Login successful. You will now be redirected to your soon to be created webpage."
}
else
{
//Login not successful
fdbk.style.display = "";
fdbk.innerText = "Incorrect credentials."
}
}
};
http.open("GET","ajax_example_20210114090846.php?username="+username+"&password="+password,true); //Open file request is being sent to
http.send(); //Send request
}
}
            </script>
            </body>
    </html>

Copy PRACTICE IT

SUMMARY
  1. We demonstrated how AJAX request can be sent to various documents.
  2. If such documents are plain text (requiring no further interpretation) documents or HTML, CSS, JS documents (requiring a browser's interpretation), the server returns the whole content of such documents.
  3. But if such files are documents that the server have ability to interpret, the server will interpret such documents before returning any text if any output is available from the interpretation.
  4. For example, PHP is a server side language. If PHP is installed on a server and a request is sent to a PHP document, the server will not return the codes or content of the PHP file rather it will interpret the PHP codes and if any output results from the interpretation, only such output will be returned.
Take a short quiz on AJAX Example.
Ask a question or tell us if AJAX Example is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode