Consuming
the Webservice from the JavaScript
Indroduction
Now I will
explain how to consume the webservices through javascript.
Let I explain
the local host webservice it will work on remote webservices also(consuming third-party
services)
Step1:
create the Webservice
Solution explorer->add
new item->asp.net web service
Step2:
Write a below code for web service
Step3:
Compile and
run it without errors.Here I embed the below screen shot for understanding the
soap request and response with parameter field .
Step 4:
What am going
to implement is just am sending the “name “parameter from the client side to web
service and get the response from the service.
Design and
Javascript Code Page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Example.aspx.cs" Inherits="Example" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="jquery-1.7.2.min.js"
type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type ="text/javascript" >
function callservice()
{
var xmlHTTP;
if (window.XMLHttpRequest)
{
xmlHTTP = new
window.XMLHttpRequest;
}
else {
try
{
xmlHTTP = new ActiveXObject("MSXML2.XMLHTTP.3.0");
}
catch
(ex)
{
}
}
var param = "Anandakumar";
xmlHTTP.open("POST", "http://localhost:4921/Tickets1/WebService.asmx
", true);
xmlHTTP.setRequestHeader("Content-Type",
"text/xml; charset=utf-8");
xmlHTTP.setRequestHeader("SOAPAction",
"http://tempuri.org/Example");
strRequest = "<?xml version='1.0'
encoding='utf-8'?>";
strRequest = strRequest + "<soap:Envelope
" + "xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
" + "xmlns:xsd='http://www.w3.org/2001/XMLSchema'
" + "xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>";
strRequest = strRequest + "
<soap:Body>";
strRequest = strRequest + "<Example
xmlns='http://tempuri.org/'><name>'"+param+"'</name></Example>";
strRequest = strRequest + "</soap:Body>";
strRequest = strRequest + "</soap:Envelope>";
alert(strRequest);
xmlHTTP.onreadystatechange = function ()
{
if
(xmlHTTP.readyState == 4 && xmlHTTP.status == 200)
{
alert(xmlHTTP.responseXML.xml);
}
}
xmlHTTP.send(strRequest);
}
</script>
<title>Example</title>
</head>
<body>
<form
id="form1"
runat="server">
<p>
<asp:Button ID="Button1"
runat="server"
Text="Submit"
OnClientClick ="callservice()"
/>
</p>
</form>
</body>
</html>
Step 5:
Run under
the IE you will be get a successful result like that
No comments:
Post a Comment