Wednesday, August 26, 2009

calling webservice from javascript with parameters

below is a simple javascript to tell you how to call web service with parameter
It will give you state and City for a zipcode you given
please assume there is 3 text boxes txtZip, txtState and txtCity
<script type="text/javascript">
var WebReq = null;
function findZip() {

//create dom
if (window.XMLHttpRequest)
WebReq = new XMLHttpRequest();
else if (window.ActiveXObject) {
if (new ActiveXObject("Microsoft.XMLHTTP"))
WebReq = new ActiveXObject("Microsoft.XMLHTTP");
else
WebReq = new ActiveXObject("Msxml2.XMLHTTP");
}

//url of webservice. see last, which is the name of our method to call
var url = "http://localhost:2508/MyProject/MyWebService/Service1.asmx/getCityState";
WebReq.open("post", url, true);
WebReq.setRequestHeader("Host",http://myproject/);
WebReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
WebReq.setRequestHeader("Content-Length","100");

//now mention method name (here is Result, check below i declared the method Result() ), ie after sending request , it will call this method to execute web response
WebReq.onreadystatechange = Result;
//taking zipcode from txtZipCode
var vZipCode = document.getElementById('');
//Adding Parameter ZipCode
WebReq.send("ZipCode=" + vZipCode.value);
}
function Result()
{
if (WebReq.readyState == 4 && WebReq.status == 200)
{
var dsRoot=WebReq.responseXML;
var City = dsRoot.getElementsByTagName('City')[0].firstChild.nodeValue;
var State = dsRoot.getElementsByTagName('State')[0].firstChild.nodeValue;
//Setting New value to city and State
var vCity = document.getElementById('');
var vState = document.getElementById('');
vCity.value = City;
vState.value= State;
}
}

No comments: