How to request a cross domain ajax with in the js file

in Articles, JavaScript, PHP Code / 5 Comments

Hi friends,
In this post i going to explain about the how to cross domain ajax request with in the js (JavaScript) file.
Cross Domain Ajax requests from Javascript file| Anil Labs

If we request for a same domain file then we can directly call the file.

Javascriot Code

<script language="javascript" type="text/javascript">
var xmlHttp = false;
function requestAjax()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
 alert ("Browser does not support HTTP Request")
 return
}
url ="sample.php?id="+idRes;
xmlHttp.onreadystatechange=stateChangedRequest
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
return false;
}

function stateChangedRequest()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
 document.getElementById("results").innerHTML=xmlHttp.responseText;
 }
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

</script>

By the above code we can get the results from sample.php file which is at the same domain. But in the case of we are calling some xyz.com file and request from abc.com host , this code will not be work.

Some modifications is required in the above code to access the xyz.com file from abc.com ajax request.

instead of call the direct filename,we can request for a file with using proxy.

In the Ajax function just place the below code:

var root = window.location.hostname;

and

change the below code:

url ="sample.php?id="+idRes;

to

var path = 'sample_xyz.php?id="+idRes; // This file is at the remote domain
var url = root + '
/proxy.php?ws_path='
                  + encodeURIComponent(path);

The proxy file code:

<?php
define ('HOSTNAME', 'http://www.xyz.com/');

// Get the REST call path from the AJAX application
// Is it a POST or a GET?
$path = $_GET['ws_path'];
$url = HOSTNAME.$path;

// initialize a new curl resource
$ch = curl_init();
// set the url to fetch
curl_setopt($ch, CURLOPT_URL, $url);
// don't give me the headers just the content
curl_setopt($ch, CURLOPT_HEADER, 0);
// return the value instead of printing the response to browser
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// use a user agent to mimic a browser
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0');
echo $xml = curl_exec($ch);
// remember to always close the session and free all resources
curl_close($ch);
?>

In this way we can integrate the cross domain ajax request from the javascript file.

With more than 9 years experience in PHP and Founder of Anil Labs, a blog for PHP and related posts. contributed posts regarding CodeIgniter, CakePHP and Learn PHP online ...Contact : [email protected]

Discussion 5 Comments

  1. Swathi

    Hi ,
    I have s:file upload tag in my jsp.and one sx:autocompleter tag.
    if i change the element in sx:autocompleter the ajax to work.
    But the s:file tag is preventing not to work ajax properly.
    Can you give me some idea.Pls…..
    Im trying this for past one week…..
    Thanks in advance.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>