Simple AJAX application

Simple AJAX application

The full name of AJAX is Asynchronous JavaScript and XML. It is a technology that can update some webpages without the need to reload the entire webpage. If the content of a traditional webpage needs to be updated, you must reload the entire page.

1. Create an object
All modern browsers (IE7 +, Firefox, Chrome, Safari, and Opera) Support XMLHttpRequest objects, but IE5 and IE6 use ActiveXObject, which is used to exchange data with the server in the background.
Create object Syntax:
Var xmlhttp = new XMLHttpRequest ();
Syntax for creating objects in IE5 and IE6:
Var xmlhttp = new ActiveXObject (Microsoft. XMLHTTP );

2. send a request to the server
To send requests to the server, use the open () and send () Methods of the XMLHttpRequest object.
Open method:
Open (method, url, async)

Method: Request type, with GET or POSTurl: Location of the file on the server async: selection method, with true (asynchronous) goods false (synchronous)

 

Difference between GET and POST:
GET is simpler and faster than POST, and can be used in most cases.
However, use POST requests in the following cases:

When you cannot use cached files (updating files or databases on the server) to send a large amount of data to the server (there is no data size limit for POST) to send user input containing unknown characters (Password Hiding information ), POST is more stable and reliable than GET. Send method:
Send (string)
Send the request to the server. string is only used for POST requests.
Example 1: GET request
Xmlhttp. open (GET,/cgi-bin/test. cgi? Para = test & var = '000000', true );
Xmlhttp. send ();
Example 2: POST request
Xmlhttp. open (POST,/cgi-bin/test. cgi? Para = test & var = '000000', true );
Xmlhttp. send ();
To POST data like an HTML form, use setRequestHeader () to add an HTTP header.
Xmlhttp. open (POST,/cgi-bin/test. cgi? Para = test & var = '000000', true );
Xmlhttp. setRequestHeader (Content-type, application/x-www-form-urlencoded );
Xmlhttp. send ();

 

3. Server Response
To obtain a response from the server, use the responseText or responseXML attribute of the XMLHttpRequest object.
ResponseText obtains response data in string format
ResponseXML get response data in XML format
If the response from the server is not XML, use the responseText attribute.
Example program:
Document. getElementById (myDiv). innerHTML = xmlhttp. responseText;
If the response from the server is XML and needs to be parsed as an XML object, use the responseXML attribute.

4. readyState status
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. When the readyState attribute changes, the onreadystatechange function is called.
The value of readyState and its meaning are as follows:

0: request not initialized 1: server connection established 2: request received 3: Request Processing in progress 4: request completed and response ready status value and corresponding meaning:
200: OK404: the page is not found in the onreadystatechange event. We stipulate that when the server responds to the task that has been prepared for processing, that is, when readyState is 4 and the status is 200, the response is ready.
Example program:
Xmlhttp. onreadystatechange = function ()
{
If (xmlhttp. readyState = 4 & xmlhttp. status = 200)
{
// Return the task to be executed
}
}

 

5. Complete AJAX example

 

<Script> function loadXMLDoc () {var xmlhttp; if (window. XMLHttpRequest) {xmlhttp = new XMLHttpRequest ();} else {xmlhttp = new ActiveXObject (Microsoft. XMLHTTP);} xmlhttp. onreadystatechange = function () {if (xmlhttp. readyState = 4 & xmlhttp. status = 200) {document. getElementById (myDiv ). innerHTML = xmlhttp. responseText ;}} xmlhttp. open (POST,/cgi-bin/test. cgi? Para = test & var = '000000', true); xmlhttp. setRequestHeader (Content-type, application/x-www-form-urlencoded); xmlhttp. send () ;}</script> Use AJAX to modify the text content Modify content