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

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.

Anil Kumar Panigrahi

With more than 10 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]

You may also like...

5 Responses

  1. Hi anil,

    Good post, simple way to request using ajax. I will try it out soon.

    Thanks

  2. Swathi says:

    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.

  3. @Swathi i don’t have idea on jsp. I am using it in PHP. Thanks.

  4. Nowadays CORS is a standard. See how to use it with jQuery and/or raw javascript:
    https://zinoui.com/blog/cross-domain-ajax-request

  1. November 14, 2010

    […] Czytaj więcej: How to request a cross domain ajax with in the js file « ANIL … […]

Leave a Reply

Your email address will not be published. Required fields are marked *