XML Web Requests

In this chapter, we will learn what web request is and how it is used to display data from server. Here, we can refer XML HttpRequest for actual web request.

HttpRequest is an object which is used to get data from external resources like server. Once we get data from server by using that object, we can display either in xml data format or we can use HTML to display formatted data in browser.

The main benefits of using HttpRequest, you can use javascript and load data from server without refreshing whole page. Javascript run on client side and does not reload whole page to load data from server. You can also submit your data to server by using this object without reloading page. This is also called asynchronous call to action to perform action like get and post.

Let’s understand it with an example.

<!DOCTYPE html>
<html>
<head>
<title>Read XML File by XMLHttpRequest</title>
<meta charset="utf-8" />
<script>
    function LoadData()
    {
        var objXMLHttpRequest = new XMLHttpRequest();
        objXMLHttpRequest.onreadystatechange = function ()
        {
            if(objXMLHttpRequest.readyState == 4 && objXMLHttpRequest.status == 200)
            {
                document.getElementById("dvContent").innerHTML = objXMLHttpRequest.responseText;
            }
        };
        objXMLHttpRequest.open("GET", "xmlfiles/products.xml", true);
        objXMLHttpRequest.send();
    }
</script>
</head>
<body>
<div> <button type="button" onclick=" LoadData()">Load Data</button></div>
<div id="dvContent"></div>
</body>
</html>

OUTPUT:

In above example, we read xml file by using XMLHttpRequest object and display into web page without any design or format. First we created object by declaring it. Then, we used property onreadystatechange which used to execute function when the status of object changed.

We also used readystate and status which everytime check whether its changed or not and based on that it execute rest of the code to read text from xml file by using responetext property.

The result you see that is without any format, it displays all the values as one text.