Hi friends,
In this post i going to explain about the how to cross domain ajax request with in the js (JavaScript) file.
If we request for a same domain file then we can directly call the file.
Javascriot Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <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:
1 | var root = window.location.hostname; |
and
change the below code:
1 | url ="sample.php?id="+idRes; |
to
1 2 3 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?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.
5 Comments
Amit Kumar Paliwal · November 25, 2010 at 4:16 am
Hi anil,
Good post, simple way to request using ajax. I will try it out soon.
Thanks
Swathi · June 27, 2011 at 10:38 am
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.
Anil Kumar Panigrahi · June 28, 2011 at 2:23 am
@Swathi I don’t have any idea about jsp. I am using it in PHP. Thanks.
Dimitar Ivanov · August 24, 2016 at 5:39 pm
Nowadays CORS is a standard. See how to use it with jQuery and/or raw javascript:
https://zinoui.com/blog/cross-domain-ajax-request
How to request a cross domain ajax with in the js file « ANIL … – js - dowiedz się więcej! · November 14, 2010 at 4:44 pm
[…] Czytaj więcej: How to request a cross domain ajax with in the js file « ANIL … […]