felgall's cross-domain AJAX call

xelawho · 06-02-2012, 03:36 PM

so, I'm looking at this:
http://javascriptexample.net/ajax07.php

The script attaches to the body like it should, but I can't figure out how to access the data. I understand that there should be some sort of jsonRequest function call, but I'm completely stumped as to what it would look like. here's my lame attempt thus far:

Code:

<body> 
<select id="addoptions"></select>
<script type="text/javascript">
jsonpRequest = function(url, callback) {
  var jnum, jname, scr;
  if (!jsonRequest.cnt) jsonRequest.cnt = 0;
  jnum = 'j'+ jsonRequest.cnt++;
  jname = 'jsonRequest.'+jnum;
  if (-1 === url.indexOf('?')) url += '?jsonp='+jname;
  else url = '&jsonp='+jname;
  scr = document.createElement('script');
  jsonRequest[jnum] = function(resp) {
     try{
        callback(resp);
        }
     finally{
        delete jsonRequest[jnum];
        scr.parentNode.removeChild(scr);
        }
  };
  scr.src = url;
  document.getElementsByTagName('body')[0].appendChild(scr);
}; 
 
jsonpRequest("http://qa-find.uglii.com/Home/GetCountries/9a3d0a019-e523-487f-8250-fd98c31b6a84.json",function(result){
for (var x = 0; x < result.length; x++) {
   document.getElementById("addoptions").options[x]=new Option(result[x].i,result[x].n);
      } 
});
</script>
</body>

DaveyErwin · 06-02-2012, 09:40 PM

even if you corrected the obvious typo's
in that code it still will not work for you
unless you change the file found at
http://qa-find.uglii.com/Home/GetCou...8c31b6a84.json
or place some server side
code at that url.

felgall · 06-02-2012, 10:08 PM

The data is passed as an object directly into whatever function you specify as the callback function.

So if you have

jsonRequest('http://example.com', somefunc)

and

somefunc = function(x) {...}

the returned data is the x object passed to that function

xelawho · 06-02-2012, 11:48 PM

I must be missing something really simple, then, because all I get is :
Uncaught ReferenceError: jsonRequest is not defined

DaveyErwin · 06-03-2012, 12:31 AM

Quote:

Originally Posted by xelawho

I must be missing something really simple, then, because all I get is :
Uncaught ReferenceError: jsonRequest is not defined

Yes, jsonRequest is undefined in that code.

xelawho · 06-03-2012, 01:36 AM

Quote:

Originally Posted by DaveyErwin

Yes, jsonRequest is undefined in that code.

Clearly. So I thought that, like you said, it must just be typo's and that changing all the references from jsonRequest to jsonpRequest might do something, but no dice - no error, but the callback function doesn't even run.

so...

DaveyErwin · 06-03-2012, 04:01 AM

Quote:

Originally Posted by xelawho

Clearly. So I thought that, like you said, it must just be typo's and that changing all the references from jsonRequest to jsonpRequest might do something, but no dice - no error, but the callback function doesn't even run.

so...

here is another typo ...
else url = '&jsonp='+jname;

Quote:

Originally Posted by DaveyErwin

even if you corrected the obvious typo's
in that code it still will not work for you
unless you change the file found at
http://qa-find.uglii.com/Home/GetCou...8c31b6a84.json
or place some server side
code at that url.

xelawho · 06-03-2012, 04:15 AM

I don't really know enough about what I'm doing to spot the errors - is that line supposed to be else url += '&jsonp='+jname;?

but your quoted comment confuses me - isn't the point of jsonp meant to be that you can do this kind of thing without having to have access the target document?

But maybe you're right, and that it is a problem with the file - the other jsonp examples out there seem to work fine on other files but not on this one. The closest I got was with the yahoo yql, which I was hoping to avoid as it seems to be just adding another step in the process, but at least it gets a result...

Code:

<body> 
<select id="addoptions" onchange="alert(this.value)"></select>
<script type="text/javascript">

function makeList(o){
result=o.query.results.json.json
for (var x = 0; x < result.length; x++) {
   document.getElementById("addoptions").options[x]=new Option(result[x].n,result[x].i);
      } 
document.getElementsByTagName('body')[0].removeChild(scr); 	  
}

var myurl=encodeURIComponent("http://qa-find.uglii.com/Home/GetCountries/9a3d0a019-e523-487f-8250-fd98c31b6a84.json")
var filetype="json"
var sel="*"

var scr=document.createElement("script");
scr.type="text/javascript"
scr.src='http://query.yahooapis.com/v1/public/yql?q=select%20'+sel+'%20from%20'+filetype+'%20where%20url%3D%22'+myurl+'%2F%22&format=json&callback=makeList';
document.getElementsByTagName('body')[0].appendChild(scr); 
</script>
</body>

DaveyErwin · 06-03-2012, 04:23 AM

Quote:

Originally Posted by xelawho

I don't really know enough about what I'm doing to spot the errors - is that line supposed to be else url += '&jsonp='+jname;?

but your quoted comment confuses me -

I'm confused by which comments
I have quoted ?

xelawho · 06-03-2012, 04:26 AM

these ones:

Quote:

Originally Posted by DaveyErwin

even if you corrected the obvious typo's
in that code it still will not work for you
unless you change the file found at
http://qa-find.uglii.com/Home/GetCou...8c31b6a84.json
or place some server side
code at that url.

DaveyErwin · 06-03-2012, 04:38 AM

Quote:

Originally Posted by xelawho

these ones:

Quote:

Originally Posted by DaveyErwin

even if you corrected the obvious typo's
in that code it still will not work for you
unless you change the file found at
http://qa-find.uglii.com/Home/GetCou...8c31b6a84.json
or place some server side
code at that url.

yes same problem here ...

http://www.codingforums.com/showthread.php?t=262806

xelawho · 06-03-2012, 05:52 AM

but wait...

if it works when hosted on my server:
jQuery

Code:

<script type="text/javascript">
$(document).ready(function(){
      $.getJSON("9a3d0a019-e523-487f-8250-fd98c31b6a84.json",function(result){
      $.each(result, function(i){
	   $("#addoptions").append('<option name='+result[i].i+'style="padding: 10px 0pt 0pt; float: left;">'+result[i].n+'</option>');
      });
    });
});
</script>

vanilla:

Code:

function downloadUrl(callback) {
url="9a3d0a019-e523-487f-8250-fd98c31b6a84.json"
var jsonFile = window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP');
	jsonFile.onreadystatechange = function() {
   if (jsonFile.readyState == 4) {
     callback(jsonFile, jsonFile.status);
   }
 };
jsonFile.open("GET", url, true); 
jsonFile.send(null);
}


downloadUrl(function(data) {
result=JSON.parse(data.responseText);
  for (var x = 0; x < result.length; x++) {
   document.getElementById("addoptions").options[x]=new Option(result[x].n,result[x].i);
      } 
  });

shouldn't jsonp be able to do the same thing cross-domain?

DaveyErwin · 06-03-2012, 10:25 PM

the code in post #1 is completely
different from the code in post #12

xelawho · 06-03-2012, 10:54 PM

yeah - you should have seen all the variations in between

but this is kind of my point: works same-domain (post #12) doesn't work cross-domain (post#1)

I've pretty much given up, anyway... the code in 1 works on other json files (once the typo's are corrected), so I guess it's just something about that one