Call Web Service Function via Javascript using AJAX

The implementation of calling a web service function via javascript has become so tremendously easy with Microsoft’s AJAX components. That’s why I’m writing this blog for me to be reminded that I no longer have to worry of writing a special handler to manage the different implementations if the client is using IE or Firefox or Safari or Chrome. Everything is pretty much taken care of by the AJAX components. The beauty part of it also is I can use the dot notation to access the values in the returned objects.

First step is to create a web project in VS 2008 - Target framework: .NET 3.5

Add New Web Service Item

Configure the web service to allow a javascript call

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
…
}

Inside the web service item, I created a custom struct as my data holder
public struct Note
{
public DateTime DateTimeStamp;
public string Comments;
}

I created a couple of functions (getDateStampedNote and getNotes)
[WebMethod]
[XmlInclude(typeof(Note))]
public Note getDateStampedNote(string comments)
{
if (comments == string.Empty)
throw new Exception("Exception: comments must not be empty.");

Note note;
note.DateTimeStamp = DateTime.Now;
note.Comments = comments;
return note;
}

[WebMethod]
[XmlInclude(typeof(Note))]
public ArrayList getNotes()
{
ArrayList ar = new ArrayList();
ar.Add(new Note
{
DateTimeStamp = DateTime.Now,
Comments = "First Note"
});

ar.Add(new Note
{
DateTimeStamp = DateTime.Now,
Comments = "Second Note"
});

ar.Add(new Note
{
DateTimeStamp = DateTime.Now,
Comments = "Third Note"
});

return ar;
}

Note: import XML serialization library in the web service.
using System.Xml.Serialization;

In default.aspx, I added a script manager and inside that I referenced the web service that I just created.

Same aspx file, I added a bunch of javascript functions (but reusable):
function dateStampMyComments()
{
//get comments value
var comments = document.getElementById("comments").value;
WebService.getDateStampedNote(comments,processResultSucess,processResultFailed,Object);
}

function getNotes()
{
WebService.getNotes(processResultGetNotes,processResultFailed,Object);
}

function processResultGetNotes(result)
{
for(index in result){
note = result[index];

document.getElementById("notes").innerHTML = document.getElementById("notes").innerHTML + "
" + note.Comments + " - " + note.DateTimeStamp;
}
}

function processResultSucess(result){
alert(result.DateTimeStamp + " - " + result.Comments );
}

function processResultFailed()
{
alert("Webservice Failed \n" + result._message);
}