AJAX/JSON get url issue

Dushan69 · May 26, 2012, 7:31pm

Hello,

I have a problem in loading a (probably) json file from this link:

http://creativescream.com/html5ws/api/news

I try following the guide from W3Schools but I can’t execute it in Chrome nor Safari. My code looks like this:

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://creativescream.com/html5ws/api/news",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Now i am very new with this AJAX/JSON buisness and i don’t know if i am missing some steps beside the fact that i find it hard to understand how those two work together. But what i need is to load the link : http://creativescream.com/html5ws/api/news into a HTML page and place the News,Tittle, Author from the link ,anywhere on the page (some div or something).

My only success so far is to load the json from the link in the Internet Explorer 9 and whenever that worked, in Google Chrome and Safari under the web inspectors/console it shows me error “Origin null is not allowed by Access-Control-Allow-Origin.” for Chrom and “Origin file:// is not allowed by Access-Control-Allow-Origin.” for Safari.

I would appreciate a lot if someone could explain me how AJAX works and if i should get that JSON file over it or over JSON, but any help that could help me make this problem work is welcome.

P.S: Sorry if this is not the subject for the forum since it is PHP related, but i didn’t know other place to find help.

Thanks
Dushan

Dushan69 · May 31, 2012, 9:09pm

Right I’ve solved it with this page http://jsonp.jit.su/

I thought it would be nice to give in the solution if someone ever come in need to make the same.

What I needed to realize for quite some time is that, i had to use the jsonp.jit.su as a server, while i kept using my local PC file and changing the 2nd url inside the AJAX of JSONP. So that my URL code had to look like this:

http://jsonp.jit.su/?url=“any_url_with_json_file_”. So my url whole looked like http://jsonp.jit.su/?url=http://creativescream.com/html5ws/api/news

But since using the code like from the from jsonp.jit.su, where it says “$.get(”")" i had a bit of a problem making it work in Fire Fox. It kept telling me “contents is undefined” while the same code worked in the Chrome and Safari. And this is how my code looks:

[code][/code]

When i changed $.get into a $.getJSON it fixed the error for undefined contents. I only think thats the reason because jQuery have better specified library for $.getJSON then just $.get or something like that, not really sure if i say the truth there for i only learned few info about jQuery while researching and making this work. But u can realize that contents[] is being read as an array, which actually is an array in the JSON file from my link. It wouldn’t want to read it as one if i had the $.get.

Anyhow, i hope this will help to someone if they get to a trouble of getting a json file cross-domain from any url. Works in Chrome, Safari and Fire Fox.