DEV Community

Surya Teja Chatrathi
Surya Teja Chatrathi

Posted on

2

AJAX

INTRO :

Asynchronous JavaScript and XML is a term coined by Jesse James Garrett in 2005. Ajax model is a combination of technologies including HTML, CSS, JavaScript, DOM, XML and XMLHttpRequest object.

why AJAX ? :

AJAX helps us to make quick incremental updates without reloading the entire web page, by exchanging the data with web server behind the scenes.

XMLHttpRequest :

The XMLHttpRequest objects are the crucial part of AJAX. These are used to interact with the web servers behind the scenes, this enables us to update a part of the webpage without reloading th entire page.

Create an XMLHttpRequest :

syntax : variable = new XMLHttpRequest( );

  • Eg.* : xhr = new XMLHttpRequest( );

Properties of XMLHttpRequest :

  1. XMLHttpRequest.onreadystatechange : This property contains the event handler to be called when readystate property changes.

    syntax : XMLHttpRequest.onreadystatechange = callback;

  2. XMLHttpRequest.onreadystate : This property returns the state of the XMLHttpRequest

    0 ==> Client has been created. open() not yet called.
    1 ==> open() called, server connection is established.
    2 ==> send() called, request received.
    3 ==> Downloading; processing request.
    4 ==> Done. request finished.

  3. XMLHttpRequest.responseText : This property returns a DOM string which contains a textual data or null is if the request failed.

syntax : var result = XMLHttpRequest.responseText;

  1. XMLHttpRequest.status : This property returns the status of the request.

    200 ==> "OK"
    403 ==> "Forbidden"
    404 ==> "Not Found"

Methods of XMLHttpRequest :

  1. Abort() : This method aborts the request i.e., sent and readystate is changed to 0.

    syntax : XMLHttpRequest.abort();

  2. getAllResponseHeaders() : This method returns all the response headers as a string or null if no response is received, if network error happens it returns "".

    syntax : var headers =
    XMLHttpRequest.getAllResponseHeaders();

  3. getResponseHeader() : This method returns the string of a particular headers value. If there are multiple response headers with same name then a single concatenated string is returned where the strings are separated by comma.

    syntax : var myHeader =
    XMLHttpRequest.getResponseHeader();

  4. open(method, url, async, user, psw) : This method initializes a newly created request, or re-intializes the existing one.

    syntax : XMLHttpRequest.open(method, url, async, user,
    psw);

    method : type of request such as "GET","POST","PUT","DELETE"
    e.t.c
    url : file location
    async : true(asynchronous), false(synchronous).
    user : optional username used for authentication purposes.
    password : optional password used for authentication purposes.

  5. send() : It sends the request to the server, used for "GET".

  6. send(string) : It sends the request to the server, used for "POST".
    syntax : XMLHttpRequest.send(body)

Get Request

This is a simple get request, to request the data from a specified source.

Eg : xhr.open("GET", "url");
xhr.send();

Post Request

This is a simple post request, this is to send the data to a server to create or update the resource.

Eg : xhr.open("POST", "url");
xhr.send();

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more