What is AJAX? ( Asynchronous JavaScript And XML.) What is GET and POST

What is AJAX?

• AJAX  stands for Asynchronous JavaScript And XML..
• AJAX is not programming language Rather. it's a set of existing technologies.
• AJAX helps in fetching data asynchronously without interfering with the existing page.
• No page reload/ refresh.
• Modern websites use JSON instead or XML for data transfer.

Why Use AJAX?

• Read data from a web server - after the page has loaded
• Update a web page without reloading the page
• Send data to a web server - in the background

How it Works?

• AJAX uses XMLHttpRequest object (also called xhr object) to achieve this.
• Modern website use JSON instead or XML for data transfer.
• Data can be transfer in any format and protocol (Not always https necessarily).

Open() and send() method of XMLHttpRequest objectis used to send request to a server.

   // Instantiate an xhr object
    const xhr = new XMLHttpRequest();
    // Open the object
    xhr.open('GET', 'shreyash.txt', true);
    xhttp.send();;

Open(method,URL,async	method is a type of request GET or POST URL is server(file) location async(True) or sync(false)
send() or send(string)	send request to the server (used for GET) or (Used for Post

console.log("this is the ajax tutorial");
let fetchBtn = document.getElementById('fetchBtn');
fetchBtn.addEventListener('click', buttonClickHandler)
function buttonClickHandler() {
     console.log('You have clicked the fetchBtn');
    // Instantiate an xhr object
    const xhr = new XMLHttpRequest();
    // Open the object
    xhr.open('GET', 'shreyash.txt', true);
    
    // Progress
    xhr.onprogress = function(){
        console.log('on progress');
    }
    // when an object has been loaded
    xhr.onload = function (){
        // responseText return the text received from server
        console.log(this.responseText);
    }
    
    // send the request
    xhr.send();
}

Output

this is the ajax tutorial
 You have clicked the fetchBtn
 on progress
hey guys,
    my name is shreyash and im a computer application student

HTTP response status codes

• Informational responses (100–199)
• Successful responses (200–299)
• Redirection messages (300–399)
• Client error responses (400–499)
• Server error responses (500–599)

Ready States

0	UNSENT	Client has been created. but open() not called.
1	OPENED	open() has been called
2	HEADER_RECEIVED	send() has been called and headers and status are available
3	LOADING	Downloading
4	DONE	The Operation is complete

Difference between Get and Post Methods

GET	POST
Only limited amount of data can be send becouse data is send in header.	Large amount of data can be send becouse data is send in body
Get request is not Secured becouse data is exposed in URL bar.	Post request is secured becouse data is not exposed in URL bar.
GET request is idempotent(secound request will be ignored and first request is delivered	POST request is non-idempontent
GET request is more efficient and used more than post	Post request is less efficent and used less than get.

    // use this was post request
    xhr.open('POST', 'http://dummy.restapiexample.com/api/v1/employees', true);
    xhr.getResponseHeader('content-type', 'application/JSON');
    a = `{'name':'Shreyash','salary':'1223','age':'23'}`
    xhr.send(a);