Introduction
This tip describes how to call a webservice using JavaScript and also calling that webservice in a regular interval of time without doing a postback in the page.
Here it uses simple JavaScript, JQuery, and ASP.NET Webservice.
The webservice is calling in a regular interval of time without doing a page postback.
Background
You should have basic knowledge about ASP.NET, JavaScript and webservice. This can be applied to SharePoint page as well, by editing the page and put the JavaScript code using SharePoint designer. Currently, it will work only in Internet Explorer 8, not with Internet Explorer 9.
Using the Code
Core Steps
- Create an ASP.NET webservice
- Create an ASP.NET web site
Steps in Details
1. Create an ASP.NET Webservice
Create a new project 'ASP.NET Web Service Application' in Visual Studio.
Open the 'Service1.asmx.cs' file and uncomment the following line from the attribute section of the class 'Service1. This change is for allowing the webservice to be called from script.
[System.Web.Script.Services.ScriptService]
By default, you will have a method "HelloWorld" in the class 'Service1'.
Make the class like below. This method will return the current time in the server.
[WebMethod]
public string HelloWorld()
{
TimeSpan time = DateTime.Now.TimeOfDay;
return time.ToString();
}
Build the webservice project and we will add this webservice in the ASP.NET website project to check whether the webservice is available to use. I will describe this below.
Now, the webservice is ready.
2. Create an ASP.NET Web Site
In the same project (WebService Project), add 'New Project -> New Web Site' and choose 'ASP.NET Web Forms Site' and choose 'File System' as the web location.
Test the Web Service Created in the Above Step
Once you create the new website project, then we can test our web service (created in the first step).
- Right click on the website project.
- Add Service Reference.
- Click on 'Discover' button. It will show the webservice in the window. You can use that webservice URL for accessing the service.
- In the browser, access that URL and check whether your webservice is showing '
HelloWorld' method in the browser.
Now, we can go to the implementation of calling webservice using JavaScript in the page 'Default.aspx'.
Steps
- Download 'webservice.htc' file from the Microsoft site and put this file in the same place where 'Default.aspx' is residing in the project. Calling webservice using this method 'webservice.htc', is one of the methods, we can have other methods also for calling the webservice using JavaScript.
- Open the 'Default.aspx' file and put the following controls in the
<form> tag.
<div id="myWebService" style="behavior:url('webservice.htc')" onresult="getResult()"></div>
<asp:Label ID="Result" runat="server">Result will be here.</asp:Label>
</div>
- Put the following JavaScript code in the
<head> tag.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
setInterval("CallWebService()", 2000);
});
function CallWebService() {
var callID = 0;
myWebService.useService(
"http://localhost:46668/Service1.asmx?wsdl", "Service1Soap");
callID = myWebService.Service1Soap.callService("HelloWorld");
}
function getResult() {
document.getElementById("Result").innerText = event.result.value;
}
</script>
Here replace the service URL (http://localhost:46668/Service1.asmx?wsdl[^]) with your webservice URL.
JavaScript Code Explanation
setInterval method is calling the method every 2000 milliseconds (2 seconds). - Method
CallWebService is calling the webservice using JavaScript method. - Here '
myWebService' is the id of the div control. - In '
useService' method, the first argument is the webservice URL with ?wsdl in the ending, and the second argument is any name you like.
