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.
- DOM – Is used to represent the structure of XML and HTML documents.
- CSS – Used in building the presentation style to display the content.
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();
req.open(“GET”,”test.txt”); the file can be of any type .txt or .xml
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();
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().
Below are the list of actions that happen in AJAX.
- 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.
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.
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.
- 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.
- 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.