YouTip

# XML DOM – HttpRequest Object ## XMLHttpRequest Object * * * Using the XMLHttpRequest object, you can update a part of a web page without reloading the entire page. * * * ## XMLHttpRequest Object The XMLHttpRequest object is used to exchange data with a server behind the scenes. The XMLHttpRequest object is a **developer's dream** because you can: * Update a web page without reloading the page * Request data from a server – after the page has loaded * Receive data from a server – after the page has loaded * Send data to a server – in the background * * * ## Creating an XMLHttpRequest Object All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object. Syntax to create an XMLHttpRequest object: ```javascript xmlhttp=new XMLHttpRequest(); Older versions of Internet Explorer (IE5 and IE6) use an ActiveX object: ```javascript xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); To handle all modern browsers, including IE5 and IE6, check if the browser supports the XMLHttpRequest object. If it does, create an XMLHttpRequest object. If not, create an ActiveX object: ## Example ```javascript if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } [Try it »](#) * * * ## Sending a Request to the Server To send a request to the server, we use the open() and send() methods of the XMLHttpRequest object: ```javascript xmlhttp.open("GET","xmlhttp_info.txt",true); xmlhttp.send(); | Method | Description | | --- | --- | | open(_method,url,async_) | Specifies the type of request, the URL, and whether the request should be handled asynchronously. _method_: the type of request: GET or POST _url_: the file's location on the server _async_: true (asynchronous) or false (synchronous) | | send(_string_) | Sends the request to the server. _string_: only used for POST requests | * * * ## GET or POST? GET is simpler and faster than POST, and can be used in most cases. However, always use POST requests in the following situations: * A cached file is not an option (update a file or database on the server) * Sending a large amount of data to the server (POST has no size limitations) * Sending user input (which can contain unknown characters), POST is more robust and secure than GET * * * ## URL - The File on the Server The url parameter of the open() method, is the address of the file on the server: ```javascript xmlhttp.open("GET","xmlhttp_info.txt",true); The file can be any type of file (like .txt and .xml), or server script files (like .html and .php, which can perform actions on the server before sending back the response). * * * ## Asynchronous - True or False? To send the request asynchronously, the async parameter of the open() method must be set to true: ```javascript xmlhttp.open("GET","xmlhttp_info.txt",true); Sending an asynchronous request is a huge advancement for web developers. Many tasks performed on the server are time-consuming. By sending asynchronously, JavaScript does not have to wait for the server's response, but instead it can: * Execute other scripts while waiting for the server's response * Process the response when the response is ready * * * ## Async=true When using async=true, specify a function to execute when the response is ready in the onreadystatechange event: ## Example ```javascript xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","xmlhttp_info.txt",true); xmlhttp.send(); [Try it »](#) * * * ## Async=false To use async=false, change the third parameter of the open() method to false: ```javascript xmlhttp.open("GET","xmlhttp_info.txt",false); Using async=false is not recommended, but it can be okay for a few small requests. Remember that JavaScript will not continue until the server response is ready. If the server is busy or slow, the application will hang or stop. **Note:** When you use async=false, do not write an onreadystatechange function - just place the code after the send() statement: ## Example ```javascript xmlhttp.open("GET","xmlhttp_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText; [Try it »](#) * * * ## Server Response To get the response from a server, use the responseText or responseXML properties of the XMLHttpRequest object. | Property | Description | | --- | --- | | responseText | Get the response data as a string | | responseXML | The responseXML property returns an XML document object, which can be examined and parsed using DOM node tree methods and properties. | * * * ## The responseText Property If the response from the server is not XML, use the responseText property. The responseText property returns the response as a string, and you can use it like this: ## Example ```javascript document.getElementById("myDiv").innerHTML=xmlhttp.responseText; [Try it »](#) * * * ## The responseXML Property If the response from the server is XML, and you want to parse it as an XML object, use the responseXML property: ## Example Request the file [cd_catalog.xml](#) and parse the response: ```javascript xmlDoc=xmlhttp.responseXML; var txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for(i=0;i<x.length;i++){ txt=txt + x.childNodes.nodeValue + "
"; } document.getElementById("myDiv").innerHTML=txt; [Try it »](#) * * * ## The onreadystatechange Event When a request is sent to the server, we need to perform actions based on the response. The onreadystatechange event is triggered every time the readyState changes. The readyState property holds the status of the XMLHttpRequest. Three important properties of the XMLHttpRequest object: | Property | Description | | --- | --- | | onreadystatechange | Stores a function (or the name of a function) to be called automatically each time the readyState property changes | | readyState | Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: Request not initialized 1: Server connection established 2: Request received 3: Processing request 4: Request finished and response is ready | | status | 200: "OK" 404: Page not found | In the onreadystatechange event, we specify what will happen when the server response is ready to be processed. When readyState is 4 or status is 200, the response is ready: ## Example ```javascript xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } [Try it »](#) **Note:** The onreadystatechange event is triggered four times, once for each change of readyState. * * *  ## More Examples [Retrieve header information with getAllResponseHeaders()](#) Retrieve the header information of a resource (file). [Retrieve specific header information with getResponseHeader()](#) Retrieve specific header information of a resource (file). (#) How a web page communicates with a web server while a user types characters in an input field. (#) How a web page retrieves information from a database using the XMLHttpRequest object. (#) Create an XMLHttpRequest to retrieve data from an XML file and display the data in an HTML table.