{"componentChunkName":"component---src-templates-tag-js","path":"/tags/ajax/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/ajax-and-xhr-using-plain-javascript/"},"html":"

What are Ajax and XHR?

\n

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.

\n

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.

\n

\"Ajax

\n

Key technologies for incorporating AJAX -

\n\n

Why AJAX- benefits of AJAX

\n

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.

\n

Sending an XHR request

\n

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

\n\n

Create a XMLHttpRequest object :

\n
var xhrobj = new XMLHttpRequest();
\n

Send the request :

\n
xhrobj.open('GET','example.com/get');\nxhrobj.send();
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
open(method, url[, async[, user[, password]]])It initializes the request.
methodrequest type such as GET,POST etc
urlRequest URL
Asynctrue or false
userUsername for basic authentication
passwordPassword for basic authentication
send(body)It sends the request to the server body : it is optional to send body of data with request.
\n

In case of sending POST request :

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

Receiving the response :

\n

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

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

Conclusion

\n

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.

\n","frontmatter":{"date":"September 22, 2020","updated_date":null,"title":"Ajax and XHR using plain JS","tags":["XHR","JavaScript","AJAX"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/c19cc11ae05c7a1224ef47b974bbf68f/58556/index.webp","srcSet":"/static/c19cc11ae05c7a1224ef47b974bbf68f/61e93/index.webp 200w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/1f5c5/index.webp 400w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/58556/index.webp 800w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/99238/index.webp 1200w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/135cd/index.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Apeksha Gupta","github":"ApekshaAgarwal","avatar":null}}}}]}},"pageContext":{"tag":"AJAX"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}