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;
?>



Monday 6 February 2012

To add script Tag inside a script


To add <script> Tag inside a <script> Tab via Jquery. we are going to insert <script> inside test111 Div at run time.

$content_top='<div id=test111> gdgdf </div>';

$adbanners='<script> jQuery(document).ready( function($) {
$("body").prepend("'.$content_top.'");

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://gist.github.com/1265374.js?file=GetGists.js";
document.write.to = {filename: script.src};
document.getElementById("test111").appendChild(script);

});

</script>';

echo $adbanners;

//** Now add a div after <body> and add script to show Banners in WordPress
At WordPress Plugin file's main page add following hook function
add_action('wp_head', 'my_plugin_topbanner1');
then write the function definition inside the same file

//*** Adding Top banner just after <body>  tag
function my_plugin_topbanner1(){
global $post,$wpdb;
$page="";
$banner=array();
$plugin_url = plugins_url()."/adbanner/images/";
        //** plugins_url() WP function shows the current plugin path
$result = get_option('addbanner_pos');
$banner1=$result;
$banner=json_decode($banner1);
if(is_home()){
$page='home';
}
elseif(is_page()){
$page='page';
}
elseif(is_search()){
$page='search';
}
else{
//default post page
$page='post';
}
if(!empty($page)){
$adbanners="";
$styles="";
$result=$banner->$page;
$temp_banner="";
for($i=0;$i<count($result->content_top);$i++){
if($result->content_top[$i]->position=='ct1'){
$wd=$result->content_top[$i]->width;
$ht=$result->content_top[$i]->height;
$ord1=mt_rand();
$styles="<style>#ct1_ss{overflow:hidden;margin:auto;top:1px;width:".$wd."px;height:auto;padding:1px 0 3px 10px;position:relative}</style>";
$adbanners=$styles."<div id='ct1_ss'><script>document.write('<script language=\"JavaScript\" src=\"http://ad.doubleclick.net/adj/rmm.rmmcreative/delltest_".$wd."x".$ht."exp;sz=".$wd."x".$ht.";ord=".$ord1."?\" type=\"text/javascript\"></scr' + 'ipt>');</script></div>";

}


}
}
echo $adbanners;
}


//** above function will add html code in Wordpress theme blog as follows
<body>
<div id=ct1_ss><script language=Javascript src=http://ad.addouble...></script>
</div>
</body>
Also that script will Run and Load the External URL and will show Ads Images.