Test Your Skill

Q. I have a web application where I am trying to make a Ajax call using XMLHttpRequest Object. But some times its not working. Seems like its a browser issue. Can you figure out for which browser its not working?
IE 6EpicSafari 8.0FireFox 2.0

View all questions...

How to call webservice using Ajax or JavaScript

We cannot imagine web space without Ajax (Asynchronous JavaScript and XML) and JavaScript. It reduces page load time and hence a good user experience. Today I will show you a sample code on, "How to call webservice using Ajax or JavaScript"(Download Sample Code). Refer "How to make ajax call using jQuery" blog to see jQuery way of doing the same.

Steps to call webservice using Ajax or JavaScript:

Step 1: Create XMLHttpRequest object. The below method returns proper XMLHttpRequest object depending upon browser:

function CreateXMLHttpRequest() {

if (typeof XMLHttpRequest != "undefined") {

//All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) uses XMLHttpRequest object

return new XMLHttpRequest();

}

else if (typeof ActiveXObject != "undefined") {

//Internet Explorer (IE5 and IE6) uses an ActiveX Object

return new ActiveXObject("Microsoft.XMLHTTP");

}

else {

throw new Error("XMLHttpRequestnot supported");

}

Step 2: Call open method and pass proper parameter as per the requirement

var objXMLHttpRequest = CreateXMLHttpRequest();

objXMLHttpRequest.open("method", "<serviceUrl>", isAsync);

open() method parameters:

method - Type of request, it can be GET or POST.
serviceUrl - Url of the webservice or page URL.
isAsync - It will be either 'true' or 'false'. Pass true to make asynchronous webservice call. Add below code if your application calls webservice asynchronously. "onreadystatechange" stores the function that will process the response.

objXMLHttpRequest.onreadystatechange = function () {

if (objXMLHttpRequest.readyState == 4 && objXMLHttpRequest.status == 200) {

result = objXMLHttpRequest.responseXML;

}

Step 3: Use "setRequestHeader" method to set header of the HTTP request. For example, while webservice call we need to pass xml data, so header value will be "text/xml; charset=utf-8" (Refer below code).

objXMLHttpRequest.setRequestHeader("Content-Type", "text/xml; charset=utf-8");

Step 4: Finally we have to prepare packet and call send() method. But be careful while creating packet because, a small mistake can waste a lots of time in debugging.

var packet = '<?xml version="1.0" encoding="utf-8" ?>\

<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/">\

<soap:Body>\

<WebMethodName xmlns="<Webservice Namespace>">\

<ParameterName>value</ParameterName >\

</WebMethodName>\

</soap:Body>\

</soap:Envelope>';

Replace highlighted text with the proper value as per below guidelines:

WebMethodName - Webmethod name and method name is case sensitive.
<Webservice Namespace> - Namespace of webservice. e.g. In the below code "http://SampleWebservice.com/" will be webservice namespace.

Code: [WebService(Namespace = "http://SampleWebservice.com/")]

3. ParameterName - Parameter Name of webmethod and its value

Now it's time to invoke send method to get the response.
Sample code:

objXMLHttpRequest.send(packet);

// Add mentioned below code only if your application calls webservice synchronously. Otherwise use "onreadystatechange" process response.

response = objXMLHttpRequest.responseXML;

I hope, above information will help you understand use of Ajax and don't forget to see jQuery way of doing the same because jQuery way is cleaner and maintainable approach to achieve this functionality (How to make ajax call using jQuery).

Update: Add demo project as per Milin request. Purpose of this demo project is to provide sample code for "How to call WCF service asynchronously using jQuery". jQuery.Ajax method is used to make ajax call. (Download WCF service Ajax Call Sample Code)

Comments

PussPosted on: 5/12/2011 7:27:22 PM

Your answer was just what I needed. It is made my day.

Marco da FonsecaPosted on: 5/17/2011 7:19:37 AM

I can't get it to work... Sigh...

Here's what my Javascript looks like:

var objXMLHttpRequest = CreateXMLHttpRequest();

function CreateXMLHttpRequest() {
if (typeof XMLHttpRequest != "undefined") {
//All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) uses XMLHttpRequest object
return new XMLHttpRequest();
}
else if (typeof ActiveXObject != "undefined") {
// Internet Explorer (IE5 and IE6) uses an ActiveX object
return new ActiveXObject("Microsoft.XMLHTTP");
}
else {
throw new Error("XMLHttpRequestnot supported");
}
}

objXMLHttpRequest.onreadystatechange = function () {

if (objXMLHttpRequest.readyState == 4 && objXMLHttpRequest.status == 200) {

result = objXMLHttpRequest.resposeXML;

}

}

function RunService() {
objXMLHttpRequest.open("POST", 'http://localhost:2900/WebServices1.asmx', false);
var packet = '<?xml version="1.0" encoding="utf-8" ?> <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/"> <soap:Body> <PieTable xmlns="[WebService(Namespace = "http://localhost:2900/")]"> <table>Pie</table> </PieTable> </soap:Body> </soap:Envelope>';

objXMLHttpRequest.send(packet);
var result = objXMLHttpRequest.responseXML;

var outputDiv = document.getElementById("outputDiv");

if (outputDiv != null) {
outputDiv.innerHTML = result;
}

return false;
}

Please help...

Experts CommentPosted on: 5/17/2011 1:45:31 PM

Hi Marco da Fonseca,

Please provide the exception as it will help figure out the problem you are facing.In the mean while, we have attached sample code, that might help you in debugging.

Experts CommentPosted on: 5/17/2011 1:59:42 PM

Hi Marco da Fonseca,

Seems like you are passing wrong webservice namespace.Replace "[WebService(Namespace = "http://localhost:2900/")]" with the correct namespace of webservice.

Updated code:
<PieTable xmlns="http://localhost:2900/">

prince kumarPosted on: 8/24/2011 11:49:18 PM

How can it be used?

AbdullahPosted on: 5/24/2012 3:21:20 PM

this not work properly when i call the web service from other domain html page. please provide me what should i make change in web.config page

SofthackerPosted on: 5/24/2012 8:58:27 PM

Hello Abdullah,

I have created a thread in our forum. So that we can discuss this issue with all the experts. below is the thread url.

http://www.a2zmenu.com/How-to-call-the-webservice-from-other-domain-using-Ajax-or-JavaScript_t110.aspx?ftid=2&siteId=0&forumId=49

Thanks for contacting us.

milinPosted on: 9/25/2012 9:48:55 AM

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>webService</title>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

var t;
function CallLivePrice() {
clearTimeout(t);
$.ajax({
type: "GET",
url: "http://107.22.160.4/ICatService/Service.svc/GetMainCategory/4",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "text/json",
success: OnSuccess,
error: OnError
});
}
function OnSuccess(data, status) {
//alert(response.Get_ICatelog_Main_CategoryResult);
var jSonObj = $.parseJSON(data.d);
$('#lblVal1').text(jSonObj.Cat_Image);
$('#lblVal2').text(jSonObj.Cat_Name);
$('#lblVal3').text(jSonObj.Category_Name);
$('#lblVal4').text(jSonObj.Description);
$('#lblVal5').text(jSonObj.IsActive);
$('#lblVal6').text(jSonObj.MainCat_Id);
$('#lblVal7').text(jSonObj.Price);
$('#lblVal8').text(jSonObj.User_Id);
$('#lblVal9').text(jSonObj.Date);
t = setTimeout("CallLivePrice()", 2000);
}
function OnError(request, status, error) {
$('#lblVal1').text("NA");
$('#lblVal2').text("NA");
$('#lblVal3').text("NA");
$('#lblVal4').text("NA");
$('#lblVal5').text("NA");
$('#lblVal6').text("NA");
$('#lblVal7').text("NA");
$('#lblVal8').text("NA");
$('#lblVal9').text("NA");

t = setTimeout("CallLivePrice()", 2000);
}
window.onload = function () {
CallLivePrice();
}
</script>
</head>
<body>
<div class="wrapper">

<div>

milinPosted on: 9/25/2012 9:49:57 AM

what is the solution on this code not getting proper result

SofthackerPosted on: 9/25/2012 8:31:55 PM

Hello Milin,

1. Please check your endpoint setting in the WCF service config file. It should be somewhat similar to below config entry:

<endpoint address="rh" behaviorConfiguration="WebBehavior" binding="webHttpBinding" contract="<ServiceName>.<Service Interface name>"/>;

2. Suppose your service method name is GetMainCategory and excepting value as an integer type parameter. Add below attribute in your service interface:

[WebGet(UriTemplate = "/data?id={value}", ResponseFormat = WebMessageFormat.Json)]
string GetMainCategory(int value)

3. Update Url in the ajax call to "http://107.22.160.4/ICatService/Service.svc/rh/data?id=4"

Issue should be resolved after following above steps. Please do let me know, If you still face the same issue.

milinPosted on: 9/26/2012 9:44:51 AM

i really dont know what to do please give me whole working example... i have already given same <endpoint> in config file... i dont understand about service interface... and updated url dont work it... please give me working example let me know what you want anymore?

milinPosted on: 9/26/2012 9:46:21 AM

my webservice link has a data that you can see in by going and pasting it into json viewer software...

SofthackerPosted on: 9/26/2012 8:27:59 PM

Hello Milin,

Kindly Refer update section to download sample code and also refer " http://www.a2zmenu.com/Blogs/Ajax/How-to-make-ajax-call-using-jQuery.aspx" blog to understand the concept.

RohitPosted on: 9/29/2012 10:22:56 AM

That is a smart way of thinking about it.

Add Comment

Comment

Name
(Required)

E-mail (Privacy assured)
(Required)

Subscribe to this site by email

Test Your Skill

How to call webservice using Ajax or JavaScript

Add Comment

Poll of the Day

Related Contents

Online Test Papers

Related Tutorials

Fun @ Work

Top Blogs