GeekSpeak This Wednesday, Plus a Little Atlas

  • Article

I was lucky enough for my friend Glen Gordon to invite me to speak at this week's GeekSpeak.  Of course, we will be discussing ASMX and WCF web services.  I have my machine ready to go for a few on-the-fly coding examples.  What a cool idea, Glen and Jacob!

Just as a primer to the show, here is a nice little sample that shows how to use Atlas... err, Microsoft AJAX Library, without using server-side ASP.NET Atlas controls to call an web service using JSON encoding.

Atlas makes calling web services very simple.  It provides an extension to ASMX web services that allows processing of JSON encoded text over HTTP as a SOAP call.  This limits the footprint (much less stuff flying over HTTP) and avoids the serialization / deserialization of SOAP into an object graph. 

One way you use this today is when you use the AutoCompleteExtender control with a web service.  Just set up a web service with a specified function prototype and point the AutoCompleteExtender to a textbox and your HTTP endpoint that understands JSON encoding. 

However, what if you want to call a web service from a plain HTML page, or use the Atlas scripts with a non-Microsoft web server? 

The first step is to point your browser to your ASMX web server's URL and append "/js" to it.  This causes some JavaScript representing an Atlas web service proxy to be returned.  You can copy that code, add in the path to your web service, and use this in a plain HTML page.  The next step is to grab the Atlas.js script file from your Atlas installation directory and point your web page to it. 

For more information on consuming web services with Atlas, see the Atlas docs.

In the meantime, a little code for your enjoyment. 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script src="scripts/Atlas.js" type="text/javascript" language="javascript">
</script>
<script language="javascript" type="text/javascript">
var WebService=new function()
{ //Copy this from the browser
this.appPath = https://localhost:49464/AtlasDemo/
this.path = https://localhost:49464/AtlasDemo/AutoCompleteService.asmx
var cm=Sys.Net.ServiceMethod.createProxyMethod;
cm(this,"Get","prefixText","count"); }
function onClick()
{

//See how to use 2 parameters?
requestSimpleService = WebService.GetCompletionList(
"a",
1,
{
onMethodComplete:OnComplete,
onMethodTimeout:OnTimeout,
onMethodError:OnError,
onMethodAborted:OnAborted,
userContext: "OnbuttonGo_click",
timeoutInterval: 10000
}

);

return false;
}
function OnTimeout(request, userContext)
{
var timeoutString = "The call to '" + userContext + "' failed due to time out!"
alert(timeoutString);
}
function OnError(result, response, userContext)
{
var errorString = "Test '" + userContext + "' failed!"
if (result == null) {
errorString += " Status code='" + response.get_statusCode() + "'"
}
else {
errorString +=
" Message='" + result.get_message() +
"'\r\nstackTrace = " + result.get_stackTrace();
}
alert(errorString);
}
function OnAborted(request, userContext) {
var errorString = "The call to '" + userContext + "' failed, request is aborted!"
alert(errorString);
}

function OnComplete(result)
{
alert(result);
}

</script>
</head>
<body>
<input type="button" onclick="onClick();" title="Click me" />
</body>
</html>