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.
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.
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
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.
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:
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.
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.
Client-side security in AJAX –
Ajax enabled applications will always be more responsive, faster and more user-friendly; with vastly improved speed, performance and usability.
Your email address will not be published. Required fields are marked *
Full stack developer roles are among the hottest c... Read More