AJAX: Create the XMLHttpRequest object

AJAX = asynchronous JavaScript and XML. AJAX is a technique for creating fast, dynamic web pages. AJAX enables web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that parts of a page can be updated without reloading the entire page.

Create the XMLHttpRequest object

The XMLHttpRequest object:

All modern browsers support the XMLHttpRequest object (IE5 and IE6 use ActiveXObject).

Syntax for creating an XMLHttpRequest object:

variable = new XMLHttpRequest();
Copy the code

Older versions of Internet Explorer (IE5 and IE6) use ActiveX objects:

variable = new ActiveXObject("Microsoft.XMLHTTP");
Copy the code

To handle all modern browsers, including IE5 and IE6, check whether the browser supports the XMLHttpRequest object. If so, the XMLHttpRequest object is created. If not, create an ActiveXObject:

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");
}
Copy the code

Send a request to the server

Send a request to the server

To send a request to the server, we use the open() and send() methods of the XMLHttpRequest object:

xmlhttp.open("GET"."test1.txt".true);
xmlhttp.send();
Copy the code

1) open (method,url,async) :

Specifies the type of request, URL, and whether the request is handled asynchronously.

• Method: Request type. GET or POST
• Url: The location of the file on the server
• Async: True or false for asynchronous or synchronous

2) send (string) :

Send the request to the server.

• String: Used only for POST requests

The GET and POST

GET is simpler and faster than POST, and works in most situations.

Use a POST request in the following cases:

• Unable to use cached file (update file or database on server)
• Send a large amount of data to the server (POST has no data limit)
• POST is more stable and reliable than GET when sending user input that contains unknown characters

1) GET request

A simple GET request:

xmlhttp.open("GET"."demo_get.asp".true);
xmlhttp.send();
Copy the code

In the example above, you might get cached results. To avoid this, add a unique ID to the URL:

xmlhttp.open("GET"."demo_get.asp? t=" + Math.random(),true);
xmlhttp.send();
Copy the code

If you want to send information through the GET method, add information to the URL:

xmlhttp.open("GET"."demo_get2.asp? fname=Bill&lname=Gates".true);
xmlhttp.send();
Copy the code

2) POST request

A simple POST request:

xmlhttp.open("POST"."demo_post.asp".true);
xmlhttp.send();
Copy the code

If you need to POST data like an HTML form, use setRequestHeader() to add the HTTP header. Then specify the data to send in the send() method:

xmlhttp.open("POST"."ajax_test.asp".true);
xmlhttp.setRequestHeader("Content-type"."application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
Copy the code

• SetRequestHeader (Header,value) : Adds an HTTP header to the request

Server response

To get a response from the server, use the responseText or responseXML property of the XMLHttpRequest object.

attribute	describe
responseText	Get the response data as a string
responseXML	Get the response data in XML form

If the response from the server is not XML, use the responseText property. The responseText property returns the response as a string, so it can be used like this:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Copy the code

If the response from the server is XML and needs to be parsed as an XML object, use the responseXML property:

Example: Request the CD_catalog.xml file and parse the response:

function loadXMLDoc() {
    var xmlhttp;
    var txt,x,i;
    if (window.XMLHttpRequest) {
        // Execute code for Internet Explorer 7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // IE6, IE5 executes code
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            xmlDoc=xmlhttp.responseXML;
            txt="";
            x=xmlDoc.getElementsByTagName("ARTIST");
            for (i=0; i<x.length; i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>";
            }
            document.getElementById("myDiv").innerHTML=txt;
        }
    }
    xmlhttp.open("GET"."cd_catalog.xml".true);
    xmlhttp.send();
}
Copy the code