Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.

Ajax and XHR using plain JS

Learn the concept of AJAX and XHR in JavaScript, the benefits of AJAX, and how easy it is to implement the AJAX into our web application.

Apeksha Gupta
Apeksha Gupta
September 22, 2020
2 min read

What are Ajax and XHR?

Ajax stands for Asynchronous Javascript and XML. Ajax is a programming technique that allows us to create dynamic, complex, and asynchronous web applications. Ajax allows us to send and receive data from the webserver asynchronously without interfering with the current state or behavior of the web page or application.

XHR is the XMLHttpRequest Object which interacts with the server. Ajax technique in the nutshell leverages the XHR request to send and receive data from the webserver. This object is provided by the browser’s javascript environment. It transfers the data between the web browser and server.

Ajax Call

Key technologies for incorporating AJAX -

  • HTML DOM(document object model)
  • JSON/XML
  • XMLHttpRequest
  • Javascript

Why AJAX- benefits of AJAX

Dynamic content modification of web page: Using Ajax reloading of a web page is not required. The content of a web page can be modified dynamically by calling the XHR request in the background and changing the content using DOM Modification.

Sending an XHR request

To send and receive data from the server and implement the Ajax simple steps are explained below:

  • Create a XMLHttpRequest object.
  • Send the request to retrieve data from the server.
  • Receive the response and display information to the end-user.

Create a XMLHttpRequest object :

var xhrobj = new XMLHttpRequest();

Send the request :

xhrobj.open('GET','example.com/get');
xhrobj.send();
open(method, url[, async[, user[, password]]]) It initializes the request.
method request type such as GET,POST etc
url Request URL
Async true or false
user Username for basic authentication
password Password for basic authentication
send(body) It sends the request to the server body : it is optional to send body of data with request.

In case of sending POST request :

  xhrobj.open("POST", 'example.com/post', true);
  xhrobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhrobj.send("username=john");
setRequestHeader(header,value) It sets the header for the HTTP request.
header name of header parameter
Value value of the parameter

Receiving the response :

On completion of the request, the server sends the response to the request.

xhrobj.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("response").innerHTML = xhrobj.responseText;
  }
}
onreadystatechange = callback() It is a EventHandler called when the readyState attribute changes.
readyState attribute It is an attribute that returns the current state of XMLHttpRequest object
status attribute It is an attribute that returns the status code to the HTTP XHR request.
responseText attribute It is an attribute that returns the DOMstring response as the text.

Conclusion

Implementing the Ajax technique by using the XHR in javascript instead of going with using other javascript library functions like jQuery.ajax has advantages as well. For example, it gives you the freedom to embed your application or script with other applications or platform even if the particular library is not used by other applications. Thus it also helps in code reusability.



LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags

EngineeringJavaScriptNodeJSCSSSecurityReactOAuthSocialLoginGoAuthentication

Are your customers safe on your application?

According to Forbes, data breaches exposed 4.1 billion records in the first six months of 2019. If this gets you worried, we’ve got your back!

LoginRadius protects your customers’ identities. We provide world-class security for your customers during login, registration, password setup, and any other data touchpoints, and make sure that their data is safe. We do so through by offering open source SDKs, integrations with over 150 third party applications, pre-designed and customizable login interfaces, and best-in-class data security products such as MFA, RBA, and Advanced Password Policies. The platform is already loved by over 3,000 businesses with a monthly reach of 1.17 billion users worldwide.Secure Your Application Now

Apeksha Gupta

Apeksha Gupta

I am an software engineer at Loginradius, striving to learn new skills and sharing it with others!

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 5,000 MAU
  • 1 Web or mobile app
  • Standard login
  • 3 Social Login Providers
  • Transactional Email Template
  • Customizable Login Interfaces