Subscribe Feed (RSS)Asynchronous Transfers (AJAX) made easy
February 1st, 2007 by Philip Hustead | Filed under Ajax, All.I have been doing a lot of research on AJAX and have recently purchased a WROX book called Professional AJAX (amazon). I haven’t gotten far in the book but it starts off with a little history on AJAX starting with Google suggest. As I read on they were talking about many different methods for pulling data asynchronously and one thing that came up was how Google Maps and Gmail uses frames. Well this got me to thinking and I wanted to see if I could find a good way to do this using an iframe. So this is what I came up with.
First off I created a simple .net webservice and enabled webservices to accept HTTP-GET requests. Then dynamiclly using javascript I created a <IFRAME> along with an event listener for its onload event to call the SomeWebserviceCall_Complete() function when the iframe is loaded. Then I set the iframe’s src property to the webservice address with the proper attributes for the service call and this sends the HTTP-GET request through the iframe. Because I setup the event listener on the "onload" event, once the iframe is loaded from the webservice call the SomeWebserviceCall_Complete() function is fired.
Here is the code simplified for IE:
{
var myframe = document.createElement("iframe");
myframe.id = ‘frameCompany’;
myframe.style.width = ‘0px’;
myframe.style.height = ‘0px’;
// Creates the asynchronous handler event
myframe.attachEvent(’onload’, SomeWebServiceCall_Complete);
// Calls the webservice
myframe.src = ‘http://www.example.com/webservice?id=’ + idParam;
}
function SomeWebServiceCall_Complete()
{
// Parse out content from iframe
// and use the data for whatever
}
This is really easy to setup for a simple AJAX request to a web service.
UPDATE ——————-
Here I put it into action
<script>
var myframe = document.createElement("iframe");
myframe.id = ‘frameCompany’;
myframe.style.width = ‘100px’;
myframe.style.height = ‘100px’;
document.getElementById(’mydiv’).appendChild(myframe);
function SomeWebServiceCall(idParam)
{
// Creates the asynchronous handler event
myframe.attachEvent(’onload’, SomeWebServiceCall_Complete);
// Calls the webservice
myframe.src = ‘http://localhost/
appname/webservice.asmx/methodname’ + idParam;
}
function SomeWebServiceCall_Complete()
{
//alert("did it");
document.getElementById(’mydiv’).innerHTML += "here it is:<br />" + myframe.contentWindow.document.documentElement.innerHTML;
}
</script>
This implementation just places the contents of the iframe (webservice response) into a div element on your page with an id of ‘mydiv’
