XMLHttp : Step 2

Sanjeet — Sat, 14 Apr 2007 04:17:00 GMT

How to call Webserver methods using Javascript

If you are planning to call your own ASP.Net webservice from client side using XMLHttp you need to configure its web.config.

Add the following inside <system.web>:

<webservices>
<protocols>
<add name="HttpPost">
<add name="HttpGet">
</protocols>
</webservices>

Paste the following in your htm page. This, however, requires you to fine tune according to your setup. I am using the default namespaces for the XML SOAP header, and my webservice resides on one of my servers.

<html>
<head>
<script language="javascript">

//Instantiated an XMLHTTP object.

var xmlRequest = new ActiveXObject("MSXML2.XMLHTTP");

//The following is the event handler for the object.

function OnComplete()
{
var spn = document.getElementById("ContentSpan");

//object.readyState gives us the current status of the async operation. The meaning of status code is printed on the page using the innerHTML property of span. e.g. readyState value 1 corresponds to an open connection.

switch(xmlRequest.readyState){
case 1:
spn.innerHTML = "connection opened."
break;
case 2:
spn.innerHTML += "<br>POST request sent."
break;
case 3:
spn.innerHTML += "<br>recieving data...<br>"
break;
case 4:
var responseXML = xmlRequest.responseText;
spn.innerHTML += responseXML;
alert("Length of response = " + responseXML.length);
spn.innerHTML += "<br>complete."
break;
}
}

//The following is actually the handling the onClick event for the button.

function Invoke_Click()
{

//The following creates a SOAP header for the request.

var soapEnvelope = "<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\""
soapEnvelope += " xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\""
soapEnvelope += " xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">"
soapEnvelope += "<soap:Body>"
soapEnvelope += " <About xmlns=\"http://tempuri.org/\" />"
soapEnvelope += "</soap:Body>"
soapEnvelope += "</soap:Envelope>"

//Assign OnComplete handler to onreadystatechanged. This handler asynchronously gives the status of the response.

xmlRequest.onreadystatechange = OnComplete;

//Open the connection, send a POST request to the Webservice. The "true" parameter marks that an async request is sent.

xmlRequest.open("POST", "http://sanjeets-2k3/LogParserWS/LogParserService.asmx/HelloWorld", true);
try{

//The Content-Type needs to be set to text/xml

xmlRequest.setRequestHeader("Content-Type", "text/xml");

//Use the send method to send the request. You can also add the request header that we created above. Although its optional.
xmlRequest.send(soapEnvelope);
}
catch(e){
alert(e.message);
}
}

</script>
</head>
<body>

//A simple HTML button.

<input type="button" id="InvokeButton" value="Invoke" onclick="Invoke_Click();" />
<br />

//A span to write the response HTML.

<span id="ContentSpan"></span>
</body>
</html>

XMLHttp : Step 1

Sanjeet — Wed, 11 Apr 2007 17:32:00 GMT

What is XMLHttpRequest?

- It is an API that is used by JavaScript and some other scripting languages to transfer data (XML/plain text) "to-and-from" a web server over HTTP.
- You can make a call from an html page also. In the following example we are not using any aspx page. Its plain simple htm with javascript.
- The point to note is: XMLHttpRequest is used by client side scripting engines to call server side methods. Your client needs to be capable enough to handle responses delivered by the request.
- The communication between client and server happens over a separate channel, and its the underlying concept behind AJAX.
- Practically, this simply means that you don't have to refresh the page in order to get "some" data. You are performing a partial page update.
- In Internet Explorer 6 and earlier, XMLHTTP was implemented as an ActiveX object provided by Microsoft XML (MSXML). Beginning with Internet Explorer 7, XMLHTTP is also exposed as a native scripting object.
- Internet Explorer 7 still supports the legacy implementation of XMLHTTP alongside the new native object, so pages currently using the ActiveX control do not need to be rewritten. However, it is much more efficient to create the native scriptable object than an ActiveX object. This is especially beneficial to those AJAX applications that create a new XMLHTTP object for each request.
- In the following example we are not calling any server side code that implements business logic, instead we are fetching the text response from http://www.microsoft.com. We will discuss how to consume Webservices directly from a browser with XMLHttpRequest without using AJAX.

What options can we use to instantiate an XMLHttpRequest object?
- There are chances that XMLHttp may be disabled on a domain level. We need to take this into account.
if(window.XMLHttpRequest) returns false
> Its disabled! but we can use "var xmlRequest = new ActiveXObject('MSXML2.XMLHTTP.3.0');" to instantiate
> You are not using IE 7, so you need to use: var xmlRequest = new ActiveXObject('MSXML2.XMLHTTP.3.0');

Prior to IE 7 you required the following to use XMLHttp:
var xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

However with IE 7 you can use the following pice of code:
var xmlRequest = new XMLHttpRequest();

var xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

function OnComplete(){
    var spn = document.getElementById("spn");
    switch(xmlRequest.readyState){
    case 1:
        spn.innerHTML = "connection opened.";
        break;
    case 2:
        spn.innerHTML += "<br>GET request sent.";
        break;
    case 3:
        spn.innerHTML += "<br>recieving data...<br>";
        break;
    case 4:
        spn.innerHTML += xmlRequest.responseText;
     alert("Length of response = " + xmlRequest.responseText.length);
     spn.innerHTML += "complete.";
        break;
    }
}

function hell(){
    xmlRequest.onreadystatechange = OnComplete;
    xmlRequest.open("GET", "http://www.microsoft.com", true);
    try{
     alert("about to send");
     xmlRequest.send();
     }
    catch(e){
     alert(e.message);
        }
}
</script>

XMLHttpRequest Object
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/obj_xmlhttprequest.asp

Sanjeetosphere : xmlhttprequest

XMLHttp : Step 2

XMLHttp : Step 1