var myReq = new XMLHttpRequest;

Introduction to XmlHttpRequest

The XmlHttpRequest object is supported in Internet Explorer 7. It is available in window property of the IE browser. Using this object, you can make XML requests via HTTP. This object is the back-bone of the Microsoft’s AJAX (Asynchronous Java and XML) technology to perform callbacks to the server on clients’ request.

With the XMLHttpRequest object, Microsoft Internet Explorer clients can retrieve and submit XML data directly to a Web server without reloading the page. On receiving XML content from the server, you can convert XML data into readable HTML content, using the client-side XML DOM or XSLT.

Properties of XmlHttpRequest object:

Methods of XmlHttpRequest object:

Sample request using XMLHTTP to get an Xml file.

Open Visual Studio 2008 and create a new web site.

Add a new xml file named “books.xml” to the website.

Add a new web page to the site and place a HTML button control on the page. Tap the source tab below to view the markup. Modify the source by adding the following script written in javascript.

    <script type="text/javascript" language="javascript">

    var myReq = new XMLHttpRequest();

    function getBooks()

    {

        if (window.XMLHttpRequest)

            {

                var url = "http://localhost:49216/WebXmlHttpDemo/books.xml"

                myReq.open("GET", url, false)

                myReq.send();

                alert(myReq.responseXML.xml);          

            }

     }

Remember to call this method in the onclick event of the button.

        <input id="Button1" type="button" value="Show Books" onclick="getBooks() " />

Consuming Web Services using  XmlHttpRequest

XmlHttpRequest  object can be used to call even the web service methods. In the open method of the object, set the async flag as true; set the onreadystatechange property to a function. When you make a request to the webservice method asynchronously, the function you specified is called back by XmlHttpRequest reporting the status of the request. In this callback method, you can pass the input parameters for the web service method and invoke the method to get the results.

Now, let me explain how to consume web service asynchronous flag set to true. Note that the web service method invocation involves multiple request-response SOAP messages and there is only a slighter possibility to execute web methods synchronously.

For testing purposes, webservice (.asmx) is added to the existing web site. To do so, In the WebSite menu, Select Add New Item and find the WebService Class in the dialog shown. Name the WebService as SomeService.

[WebService(Namespace = "http://localhost:49216/WebXmlHttpDemo/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class SomeService : System.Web.Services.WebService {

    [WebMethod]

    public string ReverseTheString(string s) {

        string outText = "";

        char[] letters = new char[s.Length];

        s.CopyTo(0, letters, 0,s.Length);

        Array.Reverse(letters);

        foreach (char c in letters)

             outText += c;

        return outText;

    }

    [WebMethod]

    public string GetTimeString()

    {

        return DateTime.Now.ToLongTimeString();

    }

In the above Web Service, there are two web methods namely ReverseTheString that takes a string as input parameter and returns the reversed string as a result; GetTimeString returns the current time on the server side.

Calling a Web Service method with no input parameters

To consume the above web service from the web page, add a HTML button(id=Button1) and textArea control to the web page. In the markup of the page, write the following script; It calls the GetTimeString method defined in the SomeService class.

    <script type="text/javascript" language="javascript">

    var myReq = new XMLHttpRequest();

    function callWSMethod1()

    {

        if (window.XMLHttpRequest)

            {

                var url = "http://localhost:49216/WebXmlHttpDemo/SomeService.asmx?op=GetTimeString"

                myReq.onreadystatechange = checkStatus1;

                myReq.open("GET", url, true); // true indicates asynchronous request

                myReq.send();

            }

    }

    function CheckStatus1()

    {

        if (myReq.readyState == 4) // Completed operation

        {

            myReq.open("POST","http://localhost:49216/WebXmlHttpDemo/SomService.asmx/GetTimeString", false);

            myReq.send();

            form1.TextArea1.value = oReq.responseText;

        }

    }

    </script>

Be sure to call the method CallWSMethod1 in the onclick event of button1.

    <form id="form1" runat="server">

    <div>   

        <input id="Button1" type="button" value="Get Time" onclick="callWSMethod1() " /><br />  

        <textarea id="TextArea1" name="S1"></textarea>

    </div>

    </form>

Output:

Calling a Web Service method with input parameters

To consume the above web service from the web page, add a HTML button(id=Button2). In the markup of the page, write the following script to call the ReverseTheString method defined in the SomeService class.

   <script type="text/javascript" language="javascript">

    var myReq = new XMLHttpRequest();

    function callWSMethod2()

    {

        if (window.XMLHttpRequest)

            {

                var url = "http://localhost:49216/WebXmlHttpDemo/SomeService.asmx/ReverseTheString?someText=";

                url += form1.Text1.value;

                myReq.onreadystatechange = checkStatus2;

                myReq.open("GET", url, true);

            }

    }

    function CheckStatus2()

    {

        if (myReq.readyState == 4)

        {

            form1.TextArea1.value = myReq.responseXML.xml;

        }

    } 

    </script>

Be sure to call the method CallWSMethod2 in the onclick event of Button2.

        <input id="Button2" type="button" value="Reverse The String" onclick="callWSMethod2() " /><br />  

Output:

Before running the page, add the following settings in the Web.Config file to enable Http-Get and Http-Post methods in your website.

  <webServices>

    <protocols>

      <add name="HttpGet"/>

      <add name="HttpPost"/>

    </protocols>

</webServices>