Practice Code
JavaScript Example (Program)
Learn Details

What is Javascript Ajax ?


Ajax programming language नहीं है। यह web development के set / tricks है। यह client side के लिए जाता है । मतलब कि किसी भी static website का use dynamic website की तरह किया जाता है

Q. Why are use ajax in website ?

जब किसी भी webiste के page को बिना reload किये हुए किसी data को display करना हो तो ajax का उपयोग करते हैं

Q. How to create ajax ?

1. create XMLHttpRequest object
2. send request on server
3. recived response server

Syntax for : Compleate ajax using GET Method

1. create ajax
YourajaxName = new XMLHttpRequest();

2. for create request
YourajaxName.open("GET", "url_of_file", true)

3. for send request
YourajaxName.send()

4. for data recive
YourajaxName.onload = function(){
let x = this.responseText
console.log(x)
}

Example 1 : use with local json text file



raj.txt (Json text file)

  
    [
    {
        "id" : 1,
        "name" : "Ram Kumar",
        "email" : "ram@gmail.com",
       "age" : 35,
        "salary" : 35000
    },
    {
        "id" : 2,
        "name" : "Ramesh Kumar",
        "email" : "ramesh@gmail.com",
       "age" : 25,
        "salary" : 25000
    },    
    {
        "id" : 3,
        "name" : "suresh Kumar",
        "email" : "suresh@gmail.com",
       "age" : 20,
        "salary" : 20000
    },
    
    {
        "id" : 4,
        "name" : "Ganesh Kumar",
        "email" : "Ganes@gmail.com",
       "age" : 30,
        "salary" : 30000
    },
    
    {
        "id" : 5,
        "name" : "Manohar Kumar",
        "email" : "manohar@gmail.com",
       "age" : 27,
        "salary" : 27000
    }
]

Example 2 : use with server json api



<!DOCTYPE html>
<html>
<head>
    <title></title>
    </head>
<body>

    <button onclick="myfunc()">Click Me</button>
    <table class="table" border="1" cellspacing="0" cellpadding="10" width="100%">
        <thead class="thead-light">
    
          <tr>
            <th>id</th>
            <th>Title</th>
            <th>Price</th>
            <th>description</th>
            <th>Category</th>
            <th>View</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody class="data-list">
            
         
        </tbody>
      </table>
    <script>
        function myfunc(){
            let myajax = new XMLHttpRequest();
            myajax.open("GET", "https://fakestoreapi.com/products?limit=5", true);
            myajax.send()
            // myajax.onprogress = function (){
            //     console.log("Please Wait..")
            // }
            myajax.onload = function(){
                if(this.status === 200){
                let myobj = JSON.parse(this.responseText)
                    let mytable = document.querySelector(".data-list");          
                    for(var i  = 0; 1<myobj.length; i++){
                        var mytr = `
                                    <tr>
                                        <td>${myobj[i].id}</td>
                                        <td>${myobj[i].title}</td>
                                        <td>${myobj[i].price}</td>
                                        <td>${myobj[i].description.substring(0, 50)}</td>
                                        <td>${myobj[i].category}</td>
                                        <td><img src="${myobj[i].image}" width="120"></td>
                                        <td>${myobj[i].rating.rate}<br>
                                            ${myobj[i].rating.count}</td>
                                    </tr>
                                    `;
                        mytable.innerHTML += mytr;

                    }
                }
                else{
                    console.log("Some thing Wrong")
                }
            }
        }
    </script>



</body>

Some important XMLHttpRequest Object Methods for create ajax

Method Name Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
open(method, url, async, user, psw)

Specifies the request

  • method: the request type GET or POST
  • url: the file location
  • async: true (asynchronous) or false (synchronous)
  • user: optional user name
  • psw: optional password
send() Sends the request to the server
Used for GET requests

XMLHttpRequest Object Properties

Property Description
onload Defines a function to be called when the request is recived (loaded)
readyState

Specifies the request

Holds the status of the XMLHttpRequest.

0: request not initialized

1: server connection established

2: request received

3: processing request

4: request finished and response is ready
send() Sends the request to the server
Used for GET requests