Open In App

Explain Technologies that are used by AJAX

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see the different technologies used by AJAX. Ajax is an acronym for Asynchronous Javascript and XML. It is used to communicate with the server without refreshing the web page and thus increasing the user experience and better performance. It is a technique, & not a programming language which is used by the developers to make the websites behave like desktop applications. It operates on the client side for creating asynchronous web applications.

What is AJAX?

Ajax is a group of technologies that are used to develop responsive web applications. By using these technologies together, we make web pages more responsive since small amounts of data are exchanged with the server and web pages are not reloaded or refreshed changes time that a user makes an input change. Ajax provides the user to interact with a web page without the interruption of constant web page reloading of web applications. Website interaction happens quickly with only portions of the page reloading and refreshing.

Different AJAX Technologies: AJAX is not a programming or script language, but it uses other programming languages to make websites responsive. It is a combination of interrelated technologies like JavaScript, dom, XML, HTML, CSS, etc. AJAX was made by Google and it is popular in 2005, with Google Suggest. It is an algorithm similar to Dynamic Html. Asynchronous means that the user need not wait until the server replies. Ajax is used for creating server connections in the background while a user is interacting with a Web front-end. These connections can be created asynchronously. There is a various list of technologies being used in Ajax. We will discuss each of them & understand their implementation through the illustration.

HTML/XHTML & CSS: XHTML stands for EXtensible HyperText Markup Language. These technologies are used for displaying content and style to the user interface. It is mainly used for the presentation of information. CSS is to make more interactive web pages and it is independent of HTML. CSS can be used with any XML-based markup language.

Syntax:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Document Object Model(DOM): It is an API for accessing and manipulating structured documents. Basically, it is a programming interface for HTML(HyperText Markup Language) and XML(Extensible markup language) documents. It defines the logical structure of documents and the way a document is accessed and manipulated. DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users to glide through the document. With DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or Elements of HTML using commands or methods provided by the Document object. Using DOM, JavaScript gets access to HTML as well as CSS of the web page and can also add behavior to the HTML elements.

Syntax:

<!DOCTYPE>
<html>

<head>
    <title>
        <style></style>
    </title>
</head>

<body>
    <a href="#"></a>
    <h1></h1>
    <p></p>
    <script></script>
</body>

</html>

Javascript: JavaScript is the script language of HTML and the Web. It is used for connections between HTML, CSS, and  XML technologies. It is mainly used for Client-side validation that validates the user input in an HTML form before sending the data to a server. JavaScript is key or middle in AJAX operations.

Syntax:

<script src="example.js"></script>

XMLHttpRequest: It is used for asynchronous communication between client and server. It is a JavaScript object that performs asynchronous interaction. The XMLHttpRequest object can be used to request data from a web server.

Syntax:

variable = new XMLHttpRequest();

XML & JSON: JSON and XML have hierarchical structures. Both JSON and XML can be used on the server side for carrying data to and from the server. JSON (Javascript Object Notation) is like XML but short and faster than XML.

Syntax:

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <child>
    <subchild>.....</subchild>
  </child>
</root>

ASP & JSP: JSP (Java Server Pages) & ASP (Active Server Pages) are server-side scripting languages. JSP has access to the entire library of Java APIs. It also has access to enterprise databases.

Syntax:

<% //write the script. %>

Ajax combines these technologies to create a new approach to developing web applications without reloading. Ajax uses technologies that initiate client-to-server communication without page reloads. It provides a way to enable partial page updates. It means improved interaction with a web application, which gives a user-friendly environment, similar to that of a desktop application.

We will understand the above concept through examples.

Example 1: (Ajax request): In this example, we use PHP to POST the data and display it using the echo function. This is a simple AJAX example that uses HTML and PHP to post data. 

Index.php:

PHP




<html>
  
<body>
    <h1 style="color:green">Geeksforgeeks</h1>
    <form action="" method="post">
        Name:
        <input type=text name="t1">
        <br><br>
        <input type=submit name="s">
        <?php
            if(isset($_POST['s']))
            {
                // Accessing value from the text field
                $a=$_POST['t1']; 
                  
                // Displaying result
                echo "The name of the person is:-".$a
            }
        ?>
    </form>
</body>
  
</html>


Output:

 

Example 2: (With JSON response): In this example, we use JSON RESPONSE, PHP, and HTML to display the checked list using an array function named as checked_arr. Ajax gives parameters like type of request (post or get), data, data type, and status. 

Index.php:

PHP




<?php
  
// Handle AJAX request (start)
if( isset($_POST['ajax']) && isset($_POST['checked']) ){
  $checked_arr = $_POST['checked'];
 echo json_encode($checked_arr);
  exit;
}
  
// Handle AJAX request (end)
?>
<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">Geeksforgeeks</h1>
    <form method='post' action>
        <input type='checkbox' value='JavaScript'> JavaScript <br />
        <input type='checkbox' value='PHP'> PHP <br />
        <input type='checkbox' value='jQuery'> jQuery <br />
        <input type='checkbox' value='AJAX'> AJAX <br />
        <input type='button' value='click' id='but'>
        <div id='response'></div>
    </form>
      
    <!-- Script -->
    <script src=
    </script>
    <script>
        $(document).ready(function(){
           $('#but').click(function(){
              var checkarr = [];
              $("input[type=checkbox]:checked").each(function(index,element){
                 checkarr.push($(element).val());
              });
          
              if(checkarr.length > 0){
                 $.ajax({
                    type: 'post',
                    data: {ajax: 1,checked: checkarr},
                    dataType: 'json',
                    success: function(response){
                        $('#response').text('response : '
                        + JSON.stringify(response) );
                    }
                 });
              }
           
           });
        });
    </script>
</body>
  
</html>


Output:

 



Last Updated : 22 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads