Back to blogs

What Is the Purpose of AJAX in JavaScript.

Read it in 7 Mins

Last updated on
17th Mar, 2021
Published
10th Nov, 2020
Views
9,625
What Is the Purpose of AJAX in JavaScript.

Asynchronous JavaScript And Xml (AJAX) is the best solution, whenever you want to update your webpages asynchronously by exchanging the data to/from the server . It simply means that without reloading the complete webpage for your application we can update parts of the web application dynamically and asynchronously without sending the request back to the server. AJAX is the combination of XMLHttpRequest Object, JavaScript and HTML DOM (Document Object Model). 

As we already know, JavaScript allows us to add enhanced functionality and helps web pages to interact with the clients asynchronously. JavaScript mainly runs on the client side, which is known as the browser. Whenever a JavaScript function sends the request asynchronously from the client to the server, the server responds back with the response which is used to update the page. Generally, the response is in XML format, but it may be in JSON also. In simple terms, AJAX means the interaction between client and server.  

AJAX enables us to partially update our web applications asynchronously. When the Ajax interaction is complete, JavaScript updates the HTML source of the page. The changes are made immediately without requiring a page refresh. Ajax interactions can be used to validate form entries while the user enters the data using server-side logic, to retrieve data from the server and to dynamically update data on a page. 

What is AJAX and How it works:- 

With the help of AJAX, we can create dynamic web pages which allow us to display the changes immediately without the request having to be sent to the server again. AJAX helps to send only the important data/information to server instead of the entire web page which will eliminate the load on the server. This will help in faster processing and loading of the interactive web pages. 

How Ajax Works – 

  • Whenever a user triggers an event on the web page like a button click. 
  • HTTPRequest is sent to the server using XMLHTTPRequest object is configured with the request parameter over the network 
  • XMLHTTPRequest makes an asynchronous request to the server. 
  •  From server side, the object which will be a servlet or an event listener handles the request which has been received from client, like data retrieved from the data base. The response is built with the requested data in the form of XML document. 
  • Using the call back function XMLHTTPRequest object receives the data, processes it and updates the HTML DOM to display the page with new data requested by client.  

AJAX combines other technologies as it cannot work independently to create dynamic and interactive web pages. Below is the list of technologies which AJAX uses for building the web pages. 

  • JavaScript – When an event is triggered it invokes JavaScript function. Ajax interactions are initiated by JavaScript code, and once the interaction is complete, JavaScript updates the HTML source of the page. 
  • DOM – Is used to represent the structure of XML and HTML documents. 
  • CSS – Used in building the presentation style to display the content. 
  • XMLHTTPRequest—Used to perform asynchronous interaction from client to server using JavaScript Object. 

Advantages of AJAX— 

  • AJAX eliminates the need to submit the form for validation. AJAX allows us real-time form validation, as and when the user starts entering the data in the form. 
  • AJAX avoids the entire page being reloaded, as it partially updates the webpage. 
  • AJAX is based on open standards like HTML, CSS for webpage presentation. Data is sent, retrieved, and stored in XML which is fetched from the server. 
  • Data is fetched using XMLHttpRequest object.     

Sending Request and Retrieving the Response:-  

  • Instantiating an XMLHTTPRequest using  

 var req = new XMLHTTPRequest();  

  • Sending the request to the server, we use open() 

req.open(“GET”,”test.txt”); the file can be of any type .txt or .xml 
req.open(“POST”, add-emp.php); 

  • GET is generally used to send small amounts of data to the server and using POST methods data is sent as part of HTTP request body. When data is sent using GET, data is sent as query URL parameter, whereas in POST data is not visible. 

  • Using send() of XMLHTTPRequest(); we can send the request to the server 
    req.send(); Send() accepts optional parameter body which will allow us to specify the request body. 

Ajax GET and Post Request:- 

GET is typically used to retrieve the information from the server. The send() returns immediately as the request is asynchronous; hence we must check where the response exists in its life cycle before processing it further. It uses readyState property of XMLHTTPRequest; readyState is simply an integer value which describes the status of HTTP request, whenever onreadystatechange function is called when readyState property changes. Values of readyState: 

  • 0 – UNSENT – request is not yet initiated 
  • 1 – OPENED – open() successfully established server connection to fulfil the request 
  • 2 – HEADER_RECEIVED – Server has received request successfully 
  •  3 – LOADING – Processing of request is in progress 
  • 4 – DONE – Request is processed and response is ready at the server. 

readstatechange event is triggered every time the readyState property is changed. 

The HTTP status code returns status property of the XMLHTTPRequest’s response, most commonly used status code. 

  • 200 – OK Server processed request successfully  
  • 404 – Server can’t find the page requested. 
  • 503 – Server is temporarily unavailable. 

POST is used to submit form data to the server. Form data can be sent using FormData object or using query string as req.send(key=value1&key=value2&..&keyN=valueN). Whenever we are sending the data as query string, we need to explicitly set the request header using setRequestHeader(); 

Req.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); 

The setrequestHeader() is called just after open() is called and before calling send(); 

Most commonly used request headers as part of setRequestHeader();  

txt/html, text/plain, application/xml, application/json. 

With the help of form data we can easily construct set of key/value pairs used for representing form fields and their values are sent using XMLHTTPRequest.send().  

Ajax Actions:- 

  Below are the list of actions that happen in AJAX. 

  • Client triggers the event, a JavaScript function is invoked and XMLHTTPRequest object is created and configured. 
  • Asynchronous call is made to server by XMLHHTPRequest, server returns the response in XML format. 
  • Response is processed using callback() of XMLHTTPRequest object and DOM is updated.  

Ajax Security:- 

  Client-side security in AJAX –  

  • Avoid building XML or JSON dynamically, to make XML and JSON use a safe library to keep the attributes and element data safe. 
  • Always keep the data which requires encryption at server side by using TLS/SSL. 
  • Never use eval() at the client side, always use .txt instead of .html as .txt prevents most of the XSS problems. 
  • To prevent injection style issues, always make sure that the data is encoded properly before sending. 
  • Poorly written JavaScript code will help hackers and cause security problems. 
  • Users can read JavaScript, so ensure that all the crucial business logic takes place on the server, rather than the browser. 
  • Move JavaScript that is not needed at load time to the bottom of the page to make the page load faster. Moving the JS to the end of the page will ensure the browser will display what is needed first and load the JavaScript later on. 
  • Always use minified JavaScript, as minification reduces the JavaScript size by removing unnecessary characters. 

Server-side security in AJAX –  

  • Avoid writing serialization code on the server side  
  • Always use CSRF tokens at the server side. 
  • Always use framework while using JSON or XML. 
  • Specify authentication, authorization, and other data protection either in web.xml or do it programmatically. 

Conclusion

In this blog we have learnt that using AJAX we can simply exchange the data asynchronously over the network; updating the page dynamically without reloading the entire content. The popularity of AJAX is increasing as it is a scripting language using JavaScript which provides numerous advantages.   

  • AJAX is a collection of robust technologies that are used to develop dynamic web pages.  
  • It helps us in building more responsive pages by transmitting only the required form data to the server.  
  • One of the important objects which AJAX uses is XMLHTTPRequest object from JavaScript which helps in asynchronous communication from client and server.  
  • Using AJAX we can significantly bring down network load and bandwidth usage by requesting only the required data.  
  • Without AJAX, traditional web pages would take a longer time to get the data from the server.  Even if small changes were present in the web page, the entire web page would be reloaded. 
  •  AJAX offers the biggest advantage with Form which is the common element in a web page. Using AJAX, the validation is instant, with callback making a quick round trip to and from the server to retrieve and/or save data without posting the entire page back to the server. By not performing a full postback, network utilization is minimized and operations are quicker.  

Ajax enabled applications will always be more responsive, faster and more user-friendly; with vastly improved speed, performance and usability. 

Profile

KnowledgeHut

Author
KnowledgeHut is an outcome-focused global ed-tech company. We help organizations and professionals unlock excellence through skills development. We offer training solutions under the people and process, data science, full-stack development, cybersecurity, future technologies and digital transformation verticals.

Trending Blog

6