Calling Asp.NET web service from javascript (Ajax)


Here we will be calling the default helloworld webservice that is already created for us when we open a asp.net webservice project template in Visual Studio.

We’ll just have a textbox(html control) which will display us the Hello World! response returned from the web service.

This is the step we need to follow

1) Create a new ASP.NET WebApplication

2) Put a html textbox control on the form

<input type=”text” id=”info”/>

3) Put this script code in the head section of the aspx page

<script language=”javascript”>

var xmlHttp;

function getMessage()

{

xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

xmlHttp.open(“post”, “http://localhost/WebService1/Service1.asmx/HelloWorld&#8221;, false);

xmlHttp.onreadystatechange=doUpdate;

xmlHttp.send();

return false;

}

function doUpdate()

{

if(xmlHttp.readyState==4)

{

var startTag = “<string xmlns=\”http://tempuri.org/\”>”;

var endTag = “</string>”;

var exch;

var valueStart = 0;

var valueEnd = 0;

valueStart = xmlHttp.responseXML.xml.indexOf(startTag, valueEnd) + startTag.length;

valueEnd = xmlHttp.responseXml.xml.indexOf(endTag, valueEnd+1);

exch = xmlHttp.responseXML.xml.substring(valueStart, valueEnd);

document.forms[0].elements[‘Info’].value=exch;

}

</script>

4) Call the getMessage function in the body’s onLoad eventHandler

<BODY onload=”getMessage()”>

5) Run the applicaton. We’ll see the HelloWorld! text in our textbox(‘info’)

Now let us understand what is happening inside the javascript code

xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)

This line of code creates the XMLHttpRequest object. This object sends request to the server and processes the responses from it.

The above code creates the object specific to Internet Explorer( <=6.o).

It is implemented as Active X for IE. However in IE 7 XMLHttpRequest will come as native JavaScript object.

For other browsers we can write

xmlHttp=new XMLHttpRequest();

or best we can write this

if(window.ActiveXObject)

{

xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

else if (window.XmlHttpRequest)

{

xmlHttp=new XMLHttpRequest();

}

xmlHttp.open(“post”, “http://localhost/WebService1/Service1.asmx/HelloWorld&#8221;, false);

The open method initializes the connection to the server and informs the xmlHttp object how to connect to the server.

post- it indicates how we want to send the data. It can be “get” as well

url- comes the url where we are connecting

false- this means we are making a synchronous call. To make asychronous call simply set it to true

xmlHttp.onreadystatechange=doUpdate;

This specifies the name of the function to be called whenever the state of the xmlHttpRequest changes

xmlHttp.send();

Send method than makes the request to server. This method would return immediately in case of asynchronous call and it would block until the synchronous response is received from the server.

if(xmlHttp.readyState==4)

It tells about the current state of the request

0- uninitialized

1- loading

2- loaded

3-interactive

4-complete

xmlHttp.responseXML.xml

It returns the current response from server in XML=

<?xml version=”1.0″?>

<string xmlns=”http://tempuri.org/”>Hello World !</string>

Than we are using some javascript functions to get the Hello World! and remove everything else.

document.forms[0].elements[‘Info’].value=exch;

Finally assigning the value to our textBox.

The function doUpdate() can be written differently so that we don’t have to make use of any string functions.

function doUpdate()

{

if(xmlHttp.readyState==4)

{

// Here the server is returning us XML in response so we can make use of responseXML

// Here the browser creates a DOM tree to represent that XML and puts a reference to that DOM tree

// in the request’s (xmlHttp) object’s responseXML

var xmlDoc=xmlHttp.responseXML;

var responseElement=xmlDoc.getElementsByTagName(“string”)[0];

var respText=responseElement.firstChild.nodeValue;

document.forms[0].elements[‘Info’].value=respText;

}

 

However creating a ASP.NET AJAX webservice is little different than our normal ASP.NET web service, and calling them using the ASP.NET AJAX client library is also a bit different

https://nishantrana.wordpress.com/2007/11/06/creating-and-calling-aspnet-ajax-web-service/

Bye

Author: Nishant Rana

I love working in and sharing everything about Microsoft.NET technology !

8 thoughts on “Calling Asp.NET web service from javascript (Ajax)”

  1. Hello Nishant
    I just used your code to try in My MS CRM. But I came with an “Permission Denied” error. Can you able to help me on this issue.

    Kind Regards
    Jaber

    Like

  2. xmlHttp.open(”post”, “http://localhost/WebService1/Service1.asmx/HelloWorld”, false);

    —-
    How to pass parameters to webmethod?

    Regards,
    Tintu

    Like

Please share your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

CRM for You and Me

Customer Relationship Mgt App for the Professional

D CRM Explorer

Learn about Microsoft Dynamics CRM Power Platform customization and implementation and other cool stuffs

Stroke // Jonas Rapp

I know pre-stroke. I will improve who I was.

Power Melange

Power Melange By Shalinee

Clavin's Blog

Power Automate - Power Apps - SharePoint Online - Azure - Nintex - K2 - Artificial Intelligence

Sat Sangha Salon

An Inquiry in Being

The Indoencers

The Influencers & Influences of Indian Music

Monika Halan's blog

Hand's-free money management

D365 Demystified

A closer look at Microsoft Dynamics 365.

Microsoft Mate (msftmate) - Andrew Rogers

Experienced consultant primarily focused on Microsoft Dynamics 365 and the Power Platform

Knowhere365

Specific topics by Django Lohn on the whole Microsoft365 Stack

Manmit Rahevar's Blog

One Stop Destination for Microsoft Technology Solutions

MG

Naturally Curious

Brian Illand

Power Platform and Dynamics 365

Steve Mordue MVP

A Microsoft Business Applications MVP

Subwoofer 101

Bass defines your home theater

SQLTwins by Nakul Vachhrajani

SQL Server tips and experiences dedicated to my twin daughters.

Everything D365

Discovering Azure DevOps and D365 Business Applications

Tech Wizard

Lets do IT Spells

Two Bite Tips

Valuable Tips To Grow Your Business

XRM Tricks (Power Platform & Dynamics CRM )

Power Platform & Dynamics CRM

CRM TIPS BY PRM

Mail to crmtipsbyprm@gmail.com for queries and suggestions

nijos.dev

Giving back to the community what I have learned

xrm CRM Dynamics

Dynamics CRM Technical & Functional Info

Dynamics 365 Blogs - Explained in unique way

Sometimes you need to look at things from different perspective.

CRM Keeper

Dynamics 365 Customer Engagement, CRM, Microsoft CRM, Dynamics CRM

EVOLVED365

Step into the world of a Dynamics 365 Consultant

Dianamics PCF Lady

Diana & Dynamics 365 & Power Platform

Sara Lagerquist

No Code Customization Concepts

innovativeaj

developer, designer, writer, fun loving, patriotic, humble and a sweet person inside out :) love and respect people who have a great sense of humor.

Temmy Wahyu Raharjo

Dreaming to be a clean coder and TDD minded programmer.

Transform 365

We blog about problems we face and code we write to help others

%d bloggers like this: