Showing posts with label cross domain. Show all posts
Showing posts with label cross domain. Show all posts

Tuesday, June 23, 2009

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:
<!-- Check if username exists already or not -->
<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


Technorati Tags: ,,