(untagged)

Web Service: Calling a web service using Ajax (XML SOAP request)

Virendrachandra

0.00/5 (No votes)

19 Sep 2007

This is the simple example of web service and Ajax. Web service method is calling using xmlRequest using SOAP. Here javascript code is written a way like OOPS.

Download TestApp2005.zip - 485.3 KB

Introduction

This is simple example to call any web service method by using AJAX. Here Javascript is written like OOPs, so here you can see how the javascript is used as class and objects. In this project I am accessing value like Data Object generally used in C# programming.

Background

This sample project you can add, edit, delete and view the employee information without any post back. Using AJAX it calls the webservice method and manipulate the data from client to server and vice-versa.

Using the code

This sample project I have three differet project file:

1. CoreService

2. AjaxWeb

3. TestWebService

1. CoreSevice

It contains the EmployeeDO.cs and EmployeeDL.cs. Instead of creating different project for data access layer and data object I have put it into a single project. Here I don't have any business layer because it's a sample one.

2. AjaxWeb

This is actual project where I have employee.aspx to manipulate employee data. Here I have a javascript called "Employee.js".

//

// JScript File

var SEL_EMPID = "ddlEmployee";
var TXT_EMP_F_NAME = "txtFirstName";
var TXT_EMP_L_NAME = "txtLastName";
var TXT_COUNTRY = "txtCountry";
var IdPreFix = "ctl00_cphBody_";
var BTN_ADDNEW = "btnAddNew";
var BTN_SAVE = "btnSave";
var BTN_UPDATE = "btnUpdate";
var BTN_DELETE = "btnDelete";

function EmployeeDO()
{

"ltr" style="MARGIN-RIGHT: 0px">
//this.objEmpFirstName = function(){return document.getElementById(IdPreFix+SEL_EMPID);}

this.EmpID = document.getElementById(IdPreFix+SEL_EMPID);
this.EmpFirstName = document.getElementById(IdPreFix+TXT_EMP_F_NAME);
this.EmpLastName = document.getElementById(IdPreFix+TXT_EMP_L_NAME);
this.Country = document.getElementById(IdPreFix+TXT_COUNTRY);


}

function Buttons()
{

"ltr" style="MARGIN-RIGHT: 0px">
this.CtrlAddNew = document.getElementById(IdPreFix+BTN_ADDNEW);
this.CtrlSave = document.getElementById(IdPreFix+BTN_SAVE);
this.CtrlUpdate = document.getElementById(IdPreFix+BTN_UPDATE);
this.CtrlDelete = document.getElementById(IdPreFix+BTN_DELETE);


}

function ShowHide(Add,Update,Delete,Save,bCheck)
{

"ltr" style="MARGIN-RIGHT: 0px">
var objButtons = new Buttons();
var objEmployeeDO = new EmployeeDO();
if(objEmployeeDO.EmpID.selectedIndex == 0 && bCheck == true)
{
objButtons.CtrlAddNew.style.display = "block";
objButtons.CtrlUpdate.style.display = "none";
objButtons.CtrlDelete.style.display = "none";
objButtons.CtrlSave.style.display = "none";
}
else
{
objButtons.CtrlAddNew.style.display = Add;
objButtons.CtrlUpdate.style.display = Update;
objButtons.CtrlDelete.style.display = Delete;
objButtons.CtrlSave.style.display = Save;
}

}

function GetEmployee(obj)
{

"ltr" style="MARGIN-RIGHT: 0px">
var EmpId = obj.value;
var employeeProxy = new EmployeeProxy();
employeeProxy.onDeserialized = PopulateEmployee;
employeeProxy.onXmlDataLoaded = onShowResponseXml; 
if(EmpId == "0")
{
var objEmployeeDO = new EmployeeDO(); 
objEmployeeDO.EmpID.selectedIndex = 0;
objEmployeeDO.EmpFirstName.value = "";
objEmployeeDO.EmpLastName.value = "";
objEmployeeDO.Country.value = "";
ShowHide('block','none','none','none',false);
}
else
{
employeeProxy.getEmployee(EmpId);
ShowHide('block','block','block','none',false);
}

}

function AddNewEmployee()
{

"ltr" style="MARGIN-RIGHT: 0px">
var objEmployeeDO = new EmployeeDO(); 
objEmployeeDO.EmpID.selectedIndex = 0;
objEmployeeDO.EmpFirstName.value = "";
objEmployeeDO.EmpLastName.value = "";
objEmployeeDO.Country.value = ""; 
ShowHide('none','none','none','block',false); 

}

function SaveEmployee()
{

"ltr" style="MARGIN-RIGHT: 0px">
var employeeProxy = new EmployeeProxy();
employeeProxy.onDeserialized = AfterAddEmployee;
employeeProxy.onXmlDataLoaded = onShowResponseXml;
var objEmployeeDO = new EmployeeDO(); 
if(objEmployeeDO.EmpFirstName.value == "" || objEmployeeDO.EmpLastName.value == "")
alert("Fill Required Fields");
else
{
ShowHide('block','block','block','none',false);
employeeProxy.insertEmployee(objEmployeeDO.EmpFirstName.value,objEmployeeDO.EmpLastName.value,objEmployeeDO.Country.value);
}

}

function UpdateEmployee()
{

"ltr" style="MARGIN-RIGHT: 0px">
//ShowHide('block','block','block','none');

var employeeProxy = new EmployeeProxy();
employeeProxy.onDeserialized = AfterUpdateEmployee;
employeeProxy.onXmlDataLoaded = onShowResponseXml;
var objEmployeeDO = new EmployeeDO();
if(objEmployeeDO.EmpFirstName.value == "" || objEmployeeDO.EmpLastName.value == "")
alert("Fill Required Fields");
else
{
ShowHide('block','none','block','none',false);
employeeProxy.updateEmployee(objEmployeeDO.EmpID.value,objEmployeeDO.EmpFirstName.value,objEmployeeDO.EmpLastName.value,objEmployeeDO.Country.value);
}

}

function DeleteEmployee()
{

"ltr" style="MARGIN-RIGHT: 0px">
ShowHide('block','block','block','none',false);
var employeeProxy = new EmployeeProxy();
employeeProxy.onDeserialized = AfterDeleteEmployee;
employeeProxy.onXmlDataLoaded = onShowResponseXml;
var objEmployeeDO = new EmployeeDO(); 
if(objEmployeeDO.EmpID.value == "0")
{
ShowHide('block','block','none','none',false);
}
else
{ 
employeeProxy.deleteEmployee(objEmployeeDO.EmpID.value); 
}

}

function PopulateEmployee(result)
{

"ltr" style="MARGIN-RIGHT: 0px">
if(result.length > 0)
{
var objEmployeeDO = new EmployeeDO();
var index = 0;
objEmployeeDO.EmpID.value = result[index].EmpID;
objEmployeeDO.EmpFirstName.value = result[index].EmpFirstName;
objEmployeeDO.EmpLastName.value = result[index].EmpLastName;
objEmployeeDO.Country.value = result[index].Country;
}

/* var tableHtm = '';
var trHtm = '';
for(var index = 0; index < result.length; index++)
{ 
var row = new Array();
trHtm = '<tr>';
row.push(result[index].EmpID);
row.push(result[index].EmpFirstName);
row.push(result[index].EmpLastName);
row.push(result[index].Country);
trHtm += '<td>' + row[0] + '</td>';
trHtm += '<td>' + row[1] + '</td>';
trHtm += '<td>' + row[2] + '</td>';
trHtm += '<td>' + row[3] + '</td>';
trHtm += '</tr>'; 
}
if(result.length)
{
tableHtm = '<table>' + trHtm + '</table>';
//grdData.innerHTML = tableHtm;
}
alert(tableHtm);*/

} 

function AfterAddEmployee(result)
{

"ltr">
var objEmployeeDO = new EmployeeDO();
var i = objEmployeeDO.EmpID.options.length;
objEmployeeDO.EmpID.options[i] = new Option(objEmployeeDO.EmpFirstName.value,result);
objEmployeeDO.EmpID.selectedIndex = i;


} 

function AfterDeleteEmployee(result)
{

"ltr"> 
if(eval(result) != 0)
{
alert("Deleted Successfully");
} 
var objEmployeeDO = new EmployeeDO();
var i = objEmployeeDO.EmpID.selectedIndex;
objEmployeeDO.EmpID.options[i] = null; 
objEmployeeDO.EmpID.selectedIndex = 0;
objEmployeeDO.EmpFirstName.value = "";
objEmployeeDO.EmpLastName.value = "";
objEmployeeDO.Country.value = ""; 
ShowHide('block','none','none','none',false);


} 

function AfterUpdateEmployee(result)
{

"ltr"> 
if(eval(result) != 0)
{
alert("Updated Successfully");
}


} 



function onShowResponseXml(responseXml)
{

"ltr">
//alert(responseXml);


}

function getIdPrefix(obj)
{

"ltr"> 
var IdIndex = obj.id.lastIndexOf('_');
IdPreFix = obj.id.substring(0,IdIndex+1);

}
//

If you see the above code it is very easy to use.

3. TestWebService

This is my web service project. Here I have web method like GetEmployee(),AddEmployee() etc.

The code of Employee.asmx.cs is like this:

//


using System;
using System.Data;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.ComponentModel;
using System.Collections.Generic;
using CoreService;
namespace TestWebService
{
/// <summary>

/// Summary description for employee

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
public class employee : System.Web.Services.WebService
{
[WebMethod]
public List<EmployeeDO> GetEmployee(int EmpID)
{
try
{
EmployeeDL objEmpDL = new EmployeeDL();
return objEmpDL.GetEmployee(EmpID);
}
catch
{
throw;
}
}

[WebMethod]
public List<EmployeeDO> GetEmployees()
{
try
{
EmployeeDL objEmpDL = new EmployeeDL();
return objEmpDL.GetEmployees();
}
catch
{
throw;
}
}

[WebMethod]
public int InsertEmployee(string EmpFirstName, string EmpLastName, string Country)
{
try
{
EmployeeDO objEmpDO = new EmployeeDO(EmpFirstName,EmpLastName,Country);
EmployeeDL objEmpDL = new EmployeeDL();
return objEmpDL.InsertEmployee(objEmpDO);
}
catch
{
throw;
}
}

[WebMethod]
public int UpdateEmployee(int EmpID,string EmpFirstName, string EmpLastName, string Country)
{
try
{
EmployeeDO objEmpDO = new EmployeeDO(EmpID,EmpFirstName,EmpLastName,Country);
EmployeeDL objEmpDL = new EmployeeDL();
return objEmpDL.UpdateEmployee(objEmpDO);
}
catch
{
throw;
}
}

[WebMethod]
public string GetEmployeeXML(int EmpID,string EmpFirstName, string EmpLastName, string Country)
{
try
{
EmployeeDO objEmpDO = new EmployeeDO(EmpID,EmpFirstName,EmpLastName,Country);
EmployeeDL objEmpDL = new EmployeeDL();
return objEmpDL.GetEmployeeXML(objEmpDO);
}
catch
{
throw;
}
}

[WebMethod]
public int DeleteEmployee(int EmpID)
{
try
{
EmployeeDL objEmpDL = new EmployeeDL();
return objEmpDL.DeleteEmployee(EmpID);
}
catch
{
throw;
}
}
}
}
//

The code of WebService.js is like this:

// JScript File

//proxy constants

var emptyResponse = -1; 
function deserializeXML(responseXml)
{ 
var result = responseXml.documentElement.selectSingleNode("./child::*/child::*/child::*");
if(result.firstChild==null)
return emptyResponse;
if(result.firstChild.nodeType==1)
{
var resultArray = new Array();
for(var index = 0; index < result.childNodes.length; index++)
{ 
//convert the xml node into js object and add item to result array

resultItem = result.childNodes[index];
var objDO = new Object();
for(var index1 = 0; index1 < resultItem.childNodes.length; index1++)
{ 
objDO[resultItem.childNodes[index1].nodeName] = resultItem.childNodes[index1].text; 
} 
resultArray.push(objDO);
}
return resultArray;
}
else 
//return the result value without any serialization

//as return value is supposed to be a primitive data type such as int, boolean .etc

return result.firstChild.nodeValue;
}

function ProxyHelper()
{
var httpObj = new ActiveXObject("Microsoft.XMLHTTP");
httpObj.onreadystatechange = onReadyStateChange;
var thisRef = this;
this.onDataLoaded;

this.send = function(strRequest , soapAction, servicePath)
{
httpObj.open("POST", servicePath, true);
httpObj.setRequestHeader("SOAPAction",soapAction );
httpObj.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
httpObj.send(strRequest); 
}

function onReadyStateChange()
{
if(httpObj.readyState == 4)
{ 
if(httpObj.status == 200)
{
if(thisRef.onDataLoaded!=null)
{ 
httpObj.responseXml.setProperty("SelectionLanguage", "XPath");
thisRef.onDataLoaded(httpObj.responseXml);
}
}
else 
{
alert("Status: "+httpObj.statusText+".\nResponseText: "+httpObj.responseText);
}
}
}
}

function EmployeeProxy()
{
//var path = "../TestWebService/Employee.asmx";

var path = "http://localhost/TestWebService/Employee.asmx";
var proxyHelper = new ProxyHelper();
proxyHelper.onDataLoaded = onDeserialize;
var thisRef = this;
this.onDeserialized;
this.onXmlDataLoaded;

function onDeserialize(responseXml)
{
if(thisRef.onXmlDataLoaded!=null)
thisRef.onXmlDataLoaded(responseXml);
if(thisRef.onDeserialized==null)
return;
thisRef.onDeserialized(deserializeXML(responseXml));
}

this.getEmployee = function(EmpID)
{
var soapRequest = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
soapRequest += "<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ";
soapRequest += " xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> ";
soapRequest += " <soap:Body><GetEmployee xmlns=\"http://tempuri.org/\"><EmpID>" + EmpID + "</EmpID></GetEmployee></soap:Body></soap:Envelope>";
proxyHelper.send(soapRequest,"http://tempuri.org/GetEmployee",path);
}

this.getEmployees = function()
{
var soapRequest = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
soapRequest += "<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ";
soapRequest += " xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> ";
soapRequest += " <soap:Body><GetEmployees xmlns=\"http://tempuri.org/\" /></soap:Body></soap:Envelope>";
proxyHelper.send(soapRequest,"http://tempuri.org/GetEmployees",path);
}

this.deleteEmployee = function(EmpID)
{
var soapRequest = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
soapRequest += "<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ";
soapRequest += " xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> ";
soapRequest += " <soap:Body><DeleteEmployee xmlns=\"http://tempuri.org/\"><EmpID>" + EmpID + "</EmpID></DeleteEmployee></soap:Body></soap:Envelope>";
proxyHelper.send(soapRequest,"http://tempuri.org/DeleteEmployee",path);
}

this.insertEmployee = function(EmpFirstName,EmpLastName,Country)
{
var soapRequest = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
soapRequest += "<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ";
soapRequest += " xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> ";
soapRequest += " <soap:Body><InsertEmployee xmlns=\"http://tempuri.org/\">";
soapRequest += "<EmpFirstName>" + EmpFirstName + "</EmpFirstName>";
soapRequest += "<EmpLastName>" + EmpLastName + "</EmpLastName>";
soapRequest += "<Country>" + Country + "</Country>";
soapRequest += "</InsertEmployee></soap:Body></soap:Envelope>";
proxyHelper.send(soapRequest,"http://tempuri.org/InsertEmployee",path);
}

this.updateEmployee = function(EmpID,EmpFirstName,EmpLastName,Country)
{
var soapRequest = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
soapRequest += "<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ";
soapRequest += " xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> ";
soapRequest += " <soap:Body><UpdateEmployee xmlns=\"http://tempuri.org/\">";
soapRequest += "<EmpID>" + EmpID + "</EmpID>";
soapRequest += "<EmpFirstName>" + EmpFirstName + "</EmpFirstName>";
soapRequest += "<EmpLastName>" + EmpLastName + "</EmpLastName>";
soapRequest += "<Country>" + Country + "</Country>";
soapRequest += "</UpdateEmployee></soap:Body></soap:Envelope>";
proxyHelper.send(soapRequest,"http://tempuri.org/UpdateEmployee",path);
} 
}
//

Points of Interest

Here I have learn lot to write a javascript in a way to work as OOPs.

Reference

I got the idea to create this sample from Andrew Golik's article on Ajax DataGrid.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here