Asynchronous callbacks without XMLHttpRequest
Bill Bither and I attended the Real-World AJAX One-Day Seminar in NYC on Monday, and many different methods of interacting with the server asynchronously were covered. With all the different methods to choose from, I felt that I could give an example on how our WebImageViewer control does this.
The WebImageViewer control does not use the XMLHttpRequest object, because one of the main disadvantages of XMLHttpRequest, is that it requires some ActiveX permissions in Internet Explorer. Therefore, if Internet Explorer's security settings are too high, none of the callbacks will get sent to the server. I think that the easiest way to avoid this issue is to use an <iframe> and a querystring. While using ASP.NET, there are many variables that are automatically populated or easily accessible on the server side, querystrings being one of them.
In this example, we'll check if the Web.config exists on the server.
So, let's create a new WebForm (WebForm1 in this case). We need to put a regular HTML button, and a hidden IFrame on it, it should look something like this:
<form id="Form1" method="post" runat="server">
<input onclick="FileExists('Web.config');" type="button" value="Check Web.config">
<iframe id="CallBackFrame" style="VISIBILITY: hidden; WIDTH: 1px; HEIGHT: 1px" src="CallBack.aspx"></iframe>
<script language="javascript" type="text/javascript">
<!--
function FileExists(path){
document.getElementById("CallBackFrame").src = 'CallBack.aspx?path=' + path;
}
function Button_CheckFile_Status(msg){
alert(msg);
}
// -->
</script>
</form>
Make sure that if you're using a Web Forms button (one that automatically posts back), you will need to return false on the onclick event to stop the postback.
Now we create the callback hander page. Call it CallBack.aspx, and put some querysting handling code in the Page_Load event:
private void Page_Load(object sender, System.EventArgs e)
{
string path = Request.QueryString["path"];
if (path != null)
{
// Build callback script
string callback = BuildFileExistsCallBack(path);
// Build response script
string scriptTag = BuildScriptTag(callback);
// Register script with the page
Page.RegisterStartupScript("CallBack_Script", scriptTag);
}
}
Now we create a method that returns the callback script:
// Creates script to interact with parent frame
private string BuildFileExistsCallBack(string path)
{
StringBuilder script = new StringBuilder();
// Check if file exists in application root
if (File.Exists(Page.MapPath(path)))
script.Append("\twindow.parent.Button_CheckFile_Status(true);\n");
else
script.Append("\twindow.parent.Button_CheckFile_Status(false);\n");
return script.ToString();
}
And for the final part of CallBack.aspx, we create a method that returns a given string with JavaScript tags wrapped around it:
// Wraps a given string in JavaSctipt tags
private string BuildScriptTag(string innerScript)
{
// Start a new JavaScript tag
StringBuilder script = new StringBuilder();
script.Append("<script language=\"javascript\" type=\"text/javascript\">\n<!--\n");
// Add script(s)
script.Append(innerScript);
// Finish up JavaScript tag
script.Append("// -->\n</script>\n");
return script.ToString();
}
Now that we've finished everything, we can run the app. When we click on the button, we should see an alert box pop-up indicating whether the Web.config existed on the server, without posting back the whole page.
