Ajax In JavaScript

 

    Learning outcome from AJAX

    1. What is AJAX?

    2. How is work AJAX in javascript?

    Let do.......

   

    Ajax stands for Asynchronous JavaScript And XML. 

   1. Ajax loads the data from the server

   2. Updating the parts of a web page selectively without reloading the whole page

    Here XML means-extensible markup language that means HTML.

 

    Work AJAX: 

   built-in browser XMLHttpRequest (XHR) objects ---> send -> receive information     to and from a web server asynchronously.

   without blocking the page or interfering with the user's experience.

 

   Ajax uses

   1. XHTML for the content, CSS for designing 

   2. Document Object Model and JavaScript for dynamic content display

  

   Note: 

   Examples of Ajax-driven online applications are Gmail, Google Maps, YouTube,       Facebook, and so many others applications.

   

   XMLHttpRequest (XHR) object: used to interact with servers  

   

   Basic Syntax: creating the object 

    req = new XMLHttpRequest();

Two types of methods open() and send().

     req.open("GET", "abc.php", true);

req.send();    

     The two methods follow the parameters of the GET and POST methods.

     The second parameter is " Handle the request" 

     

   The onreadystatechange stores a function (or the name of the function)to be called automatically each time the readyState property changes.

  The readyState holds different values ranging from 0 to 4.

1. request, not initialized-0
2. server connection established-1
3. request received-2
4. processing request-3
5. the request is finished and the response is ready-4

     The total code is

 // ajex detail

   // even listen

   

   let myBtn= document.getElementById("myBtn");

   myBtn.addEventListener("click", buttonClickHandler);

   function buttonClickHandler(){

   

      console.log("i am clicked")

     

      // 1.Instantiate an xhr object

      let xhr= new XMLHttpRequest();

      // 2. Open the object

      xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

      //what to do progress(optional)

      //readyState-use before past

      xhr.onreadystatechange= function(){

         console.log('ready state is', xhr.readyState)

      }

      //onload the rq-nowa-days use

      xhr.onload= function(){

      if(this.status== 200){

         console.log(this.responseText)

      }

      else{

         console.error("we error")

      }

      console.log(this.response);

      }

      // send the request

      xhr.send();

   }