In this article I will explain with an example, how to call (consume) Web Service using JavaScript XmlHttpRequest in ASP.Net with C# and VB.Net.
The Web Method of Web Service (ASMX) in HTML Page will be called using XmlHttpRequest (XHR) AJAX call in ASP.Net.
Adding Web Service
You will need to add a new Web Service (ASMX) file using Add New Item Dialog of Visual Studio as shown below.
![Call (Consume) Web Service using JavaScript XmlHttpRequest in ASP.Net]()
Namespaces
You will need to import the following namespace.
C#
using System.Web.Services;
VB.Net
Imports System.Web.Services
Configuring Web Service to handle XmlHttpRequest (XHR) AJAX calls
By default the Web Service will not accept requests from client side sent using JavaScript XmlHttpRequest (XHR) AJAX.
In order to allow a Web Service handle JavaScript XmlHttpRequest (XHR) AJAX calls, the ScriptService attribute needs to be specified to the Web Service class.
The following Web Service consists of a Web Method GetDetails, which accepts Name and Age parameters and returns the Name and Age values along with Current DateTime as string.
C#
///<summary>
/// Summary description for Service
///</summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService
{
public Service()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string GetDetails(string name, int age)
{
return string.Format("Name: {0}{2}Age: {1}{2}TimeStamp: {3}", name, age, Environment.NewLine, DateTime.Now.ToString());
}
}
VB.Net
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Service
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetDetails(name As String, age As Integer) As String
Return String.Format("Name: {0}{2}Age: {1}{2}TimeStamp: {3}", name, age, Environment.NewLine, DateTime.Now.ToString())
End Function
End Class
Calling (Consuming) Web Service using JavaScript XmlHttpRequest in ASP.Net
The following HTML Markup consists of two HTML INPUT TextBoxes and an HTML INPUT Button assigned with a JavaScript OnClick event handler.
When the Submit Button is clicked, the CallWebService method is executed and a JavaScript XmlHttpRequest (XHR) AJAX call to the Web Service is made and the Name and Age values are fetched from the TextBoxes and are passed as parameters to the Web Method GetDetails.
The value returned from the Web Service’s Web Method is displayed using JavaScript Alert Message Box.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Name:</td>
<td><input type="text" id="txtName" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" id="txtAge" /></td>
</tr>
<tr>
<td><input type="button" id="btnSubmit" value = "Submit" onclick = "CallWebService()" /></td>
</tr>
</table>
<script type="text/javascript">
function CallWebService() {
var name = document.getElementById("txtName").value;
var age = document.getElementById("txtAge").value;
var request;
if (window.XMLHttpRequest) {
//New browsers.
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
//Old IE Browsers.
request = new ActiveXObject("Microsoft.XMLHTTP");
}
if (request != null) {
var url = "Service.asmx/GetDetails";
request.open("POST", url, false);
var params = "{ name: '" + name + "', age: " + age + "}";
request.setRequestHeader("Content-Type", "application/json");
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
alert(JSON.parse(request.responseText).d);
}
};
request.send(params);
}
}
</script>
Screenshot
![Call (Consume) Web Service using JavaScript XmlHttpRequest in ASP.Net]()
Demo
Downloads
