Tech talk!: Cross domain calls

The XMLHTTPRequest object is used to make an http request directly to a web server and load the server response data back into the scripting language. But this techniques works only when you are making a request to the same web server with in the same domain. Here is how to make a call from www.site1.com/user.html to www.site2.com/usercheck.aspx :

1. Create a web page on www.site1.com which would make a call to another server www.site2.com. Documentation available inline.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Check username availability</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Enter Username:

<input type="text" name="user" onchange="createScriptTag(this); return false;"/>
<span id="outputmessage"></span>
<input id='submit_button' name='submit_button' type='submit' value='submit' />
</div>
</form>

<script language="javascript" type="text/javascript">

//Create a script tag which loads javascript from a remote source
function createScriptTag(e){
var headElement;
var scriptTag;
var inputValue = e.value;
var url = 'http://www.site2.com/usercheck.aspx?username=' + inputValue + '&rnd=' + new Date().getTime();
headElement = document.getElementsByTagName("head").item(0);
scriptTag = document.createElement("script");
scriptTag.setAttribute("id", "user_script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", url);
headElement.appendChild(scriptTag);

// Creates issue with IE so remove the script tag later at an appropriate place
//headElement.removeChild(scriptTag);

}

//function to be executed on callback from the above request. The callback returns a response similar to "isAvailable({'status':1})"
function isAvailable(response){
if (response.status == 1){
document.getElementById("outputmessage").innerHTML = "Username is still available";
}
else {
document.getElementById("outputmessage").innerHTML = "Username already exists";
}
}

</script>
</body>
</html>

2. The www.site2.com/usercheck.aspx page accepts querystring parameters,

implements a business logic and returns the function to be executed on client side as response.

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class keygenerator : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "text/plain";
if (Request.QueryString.Count > 0)
{
string username = Request.QueryString[0];

//array of names to check against
ArrayList arlExistingUsernames = new ArrayList();
arlExistingUsernames.Add("harpreet");
arlExistingUsernames.Add("singh");

if (!arlExistingUsernames.Contains(username))
{
Response.Write("isAvailable({'status':1})");
}

else
{
Response.Write("isAvailable({'status':0})");
}
}
else
{
Response.Write("isAvailable({'status':0})");
}
Response.End();
}
}

For more cross domain calling options check out:

http://snook.ca/archives/javascript/cross_domain_aj/

http://ox.no/posts/ajast-cross-domain-rest-calls-using-json-injection

http://developer.yahoo.com/javascript/howto-proxy.html