Ajax from scratch

Ajax Introduction

Ajax refers to Asynchronous JavaScript and XML (Asynchronous JavaScript and XML ).
Ajax is a programming model promoted by Google in 2005.
Ajax is not a new programming language, but a new method that uses existing standards.
With Ajax, you can create better, faster, and more friendly web applications.
Ajax Based on JavaScript and HTTP requests (HTTP requests)
What Is Ajax?
Ajax = Asynchronous JavaScript and XML.
Ajax is a technology used to create fast dynamic web pages.
By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.
 

Ajax-create an XMLHTTPRequest object

XMLHTTPRequest object
All modern browsers support XMLHttpRequest objects (ie5 and IE6 use activexobject ).
XMLHttpRequest is used to exchange data with the server in the background. This means that you can update a part of a webpage without reloading the entire webpage.
Create an XMLHTTPRequest object
All modern browsers (IE7 +, Firefox, chrome, Safari, and opera) have built-in XMLHttpRequest objects.
Syntax for creating an XMLHTTPRequest object:
Variable = new XMLHttpRequest ();
Earlier versions of Internet Explorer (ie5 and IE6) Use ActiveX objects:
Variable = new activexobject ("Microsoft. XMLHTTP ");
To handle all modern browsers, including ie5 and IE6, check whether the browser supports XMLHttpRequest objects. If yes, create an XMLHTTPRequest object. If not, activexobject is created:
VaR XMLHTTP;
If (window. XMLHttpRequest)
{// Code for IE7 +, Firefox, chrome, opera, Safari
XMLHTTP = new XMLHttpRequest ();
}
Else
{// Code for IE6, ie5
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}

Send a request to the server

To send requests to the server, use the open () and send () Methods of the XMLHTTPRequest object:
XMLHTTP. Open ("get", "test1.txt", true );
XMLHTTP. Send ();
 
Open (method, URL, async): Specifies the request type, URL, and whether to asynchronously process the request.
Parameters:
Method: Request type; get or post
URL: the location of the file on the server
Async: true (asynchronous) or false (synchronous)
Send (string): send the request to the server.
Parameters:
String: used only for post requests.
 
Get or post?
Get is simpler and faster than post, and can be used in most cases.
However, in the following cases, use post requests: the cache files cannot be used (to update files or databases on the server); a large amount of data is sent to the server (there is no data size limit for post ); when sending user input containing unknown characters, post is more stable and reliable than get.
 
 

Ajax-Server Response

To obtain a response from the server, use the responsetext or responsexml attribute of the XMLHTTPRequest object.
Responsetext: obtains response data in the string format.
Responsexml: Get Response Data in XML format.
 
 

Ajax-onreadystatechange event

Onreadystatechange event
When a request is sent to the server, we need to execute some response-based tasks.
When the readystate changes, the onreadystatechange event is triggered.
The readystate attribute contains the status information of XMLHttpRequest.
The following are three important attributes of the XMLHTTPRequest object:
Onreadystatechange: storage function (or function name). This function is called whenever the readystate attribute changes.
Readystate: the status of XMLHttpRequest. Changes from 0 to 4.
0: the request is not initialized.
1: The server connection has been established.
2: The request has been received
3: The request is being processed
4: The request is complete and the response is ready.
Status: 200: "OK"; 404: the page is not found.
In the onreadystatechange event, we specify the tasks executed when the server responds to the prepared tasks. When readystate is 4 and the status is 200, the response is ready.
 
Use the callback function
The callback function is a function that is passed to another function as a parameter.
If there are multiple Ajax tasks on your website, you should compile a standard function for creating the XMLHTTPRequest object and call this function for each Ajax task.
This function call should contain URLs and tasks executed when the onreadystatechange event occurs (each call may be different ).