Wednesday 8 February 2012

Cross domain ajax call in javascript

Suppose we had to domain one is client side(http:\\localhost\ My-website) another is server (http:\\example.com\myajax.php). so when ever we call an Ajax request from localhost to another domain an error  “Access Denied” occurs. The reason behind this error is there are few limitations with the browsers security model like we cannot make cross domain XmlHttpRequest and also if we use frames they should be from same domain. So as i am trying to make use of a cross domain url with XmlHttpHandler it is failing.
to overcome this we use a trick.
at localhost\My-website create a file called myhtml.php and insert following code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function somefunction(mydata){
document.write(mydata);
}
</script>
<script src="http://example.com/myajax.php?mydata=sssd"></script>
</head>
<body>
<form id="form1" runat="server">
 <div>
</div>
</form>
</body>
</html> 
Here when the page loads it will call the src and loads output from myajax.php into this page
At server example.com the php page should be as follows

myajax.php
<?php
//$string= "somefunction(\"{name: \'johm\', age:\'".$_GET['mydata']."'}\")";

$string= "somefunction(\"{result:\'".$_GET['mydata']."'}\")";
echo $string;
?>
in this page $string have been assigned value as samefunction with parameters.so as soon as myhtml.php loads the myajaxpage some function will be called with parameter.

now do some real Ajax like thing.
above example is the simple one, now a scenario we want to get name and mail id from example.com server to localhost at regular interval. but we can't use ajax here, so in myhtml.php page we call an iframe myiframe.php which resides in same localhost, inside iframe we are going to write the src for example.com.

localhost\myhtml.php 
<body>
<script>
  setInterval("Callmyiframe()",8000); // runs every interval of time
</script>

function  Callmyiframe(){
var uname;
uname="";
document.getElementById('fbauth_src').contentDocument.location.reload(true);
 // ** reload the iframe " fbauth_src " at each function call , this is important as each reload of iframe  will call the src and thus each time function will execute, same as Ajax call

 var iframe = document.getElementById('fbauth_src');  
//** Iframe id  'fbauth_src'
  
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
uname =innerDoc.getElementById('myusername').value; 
 //hidden field in iframe
if(uname!=""){
document.write(uname);
}
}

<iframe id="fbauth_src" src="http://localhost/myiframe.php';?>"></iframe>
</body>

localhost\myiframe.php 

//** code inside the iframe
<input type="hidden" id="myusername"  name="myusername" value="">
<input type="hidden" id="myuseremail" name="myuseremail" value="">
<script>
function myauthfunction(mydata){
var aa;
var temp;
aa=eval(mydata); //** decode the json data
//document.write(aa);
if(aa!=""){
temp=aa.split("+");
document.getElementById('myusername').value=temp[0]; 

   //** will show deep kumar

 document.getElementById('myuseremail').value=temp[1];
}
}
</script>
<script id="fbauth_src" src=" http://example.com/myajax.php?auth=y&myname=deep"></script>
//** each time the iframe gets loaded , src gets called and myauthfunction() gets executed.

http\\example.com\myajax.php
<?php
$myauth=$_REQUEST['auth']; \\ ** will show y
$myname=$_REQUEST['myname']; \\ ** will show deep
\\** write some SQL queries here also
$str=$myname."kumar + deepkumar@yahoo.com";

$string= "myauthfunction(\"{data:\'".$str."'}\")"; \\** Json format
echo $string;
?>



No comments:

Post a Comment