0

I am relatively new to JSON. I have read the tutorial and trying to implement it but no luck. Basically I have an external URL that gives JSON data/feed. The data is in the form of array. Now I am trying to write a JavaScript Program (on my local) that would get the data out of this URL and would put in my html.

Here is the function. It includes the external link also. But I am not getting any result. Just empty. Am I missing something or what I am doing wrong?

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Index Page</title>
 </head>

 <body>
 <div id="id01"></div>

 <script>
  var xmlhttp = new XMLHttpRequest();
  var url = "http://mpatrizio-001-site5.smarterasp.net/categoryList.php?D=B7ACEF70-4901-41C8-930F-D4D681D82DAA";

  xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         var myArr = JSON.parse(xmlhttp.responseText);
         myFunction(myArr);
     }
 }
 xmlhttp.open("GET", url, true);
 xmlhttp.send();

 function myFunction(arr) {
     var out = "";
     var i;
     for(i = 0; i < arr.length; i++) {
         out += arr[i].CategoryID + '<br>';
     }
     document.getElementById("id01").innerHTML = out;
 }
 </script>     
 </body>
 </html>


UPDATE:

After being pointed in the right direction by you guys (thank you very much for that), I have found that the request is being blocked by server due to some CORS error. I am studying it. Please review the following image of the error I got in the console. From it, can you specifically point out the solution? enter image description here

Improve this question
4
  • 1
    the server is not aloowed cros domain. Commented Jul 5, 2015 at 16:16
  • 4
    Pls do check developers console or network tab before posting questions.. Commented Jul 5, 2015 at 16:17
  • 1
    append ` --disable-web-security` (at path C;\...\chrome.exe) in chrome's exe properties preceded by a space. Commented Jul 5, 2015 at 18:11
  • @Muhammadimran brother. You just made my day. That solved my problem and I am getting response from the server on my local using my same code. If you can put this as an answer, I'll accept it as solution. Commented Jul 5, 2015 at 18:36

4 Answers 4

Reset to default
2

Append --disable-web-security (at path C;...\chrome.exe) in chrome's exe properties preceded by a space.

More Elegant Solution:

Other solution will be on server side. Which is to create crossdomain.xml and clientaccesspolicy.xml file on server. It's structure is like:

crossdomain.xml:

<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-http-request-headers-from domain="*" headers="SOAPAction,Content-Type"/>
</cross-domain-policy>

clientaccesspolicy.xml:

<?xml version="1.0" encoding="utf-8"?>
<access-policy>
  <cross-domain-access>
    <policy>
      <allow-from http-request-headers="SOAPAction">
        <domain uri="*"/>
      </allow-from>
      <grant-to>
        <resource path="/" include-subpaths="true"/>
      </grant-to>
    </policy>
  </cross-domain-access>
</access-policy>

Some of the tutorials are:

http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000469.html

http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html

Its specification is:

http://www.adobe.com/devnet-docs/acrobatetk/tools/AppSec/CrossDomain_PolicyFile_Specification.pdf

Other tutorials:

https://msdn.microsoft.com/en-us/library/cc197955(v=vs.95).aspx

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

What you are trying to do, Is a cross domain request. A cross domain request is also called a JSONP request amongst many more others and has two restrictions:

The first is that it restricts you only to "GET" requests, meaning you cannot issue a "POST" request to the cross domain server.

The second is that you are very limited by the server, meaning that if the server won't allow, you cannot get any data.

I would suggest you to read more about cross domain request before trying to go through this.

Improve this answer

1 Comment

I have updated my question. Can you please tell me how can I check the limitations? I have attached the error I got.
2

You are probably trying to execute an XMLHttpRequest to a domain that is different than your page is on, the browser will block this request. To allow the request you have to use CORS.

You can open the developer tools in Chrome (F12) and check for any error messages related to "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '[domainname]' is therefore not allowed access."

Improve this answer

1 Comment

Thank you for guiding me on this. Your suggestion is pretty close to the apparent problem. I am updating my question and will post image about the error I see in the console. It is giving CORS error that you have mentioned. Please guide me on that.
1

Thank to Muhammad Imran, Barr J and Luuk Moret, I am finally able to solve my problem. It was the Cross domain request that's why it was not allowing me to get data. So what I did,

  1. I checked using test-cors.org the server to which I was sending request to see if CORS is configured or not. And the server was configured.
  2. Then I installed this plugin for chrome, "Allow-Control-Allow-Origin: *" This plugin allows to you request any site with ajax from any source. Adds to response 'Allow-Control-Allow-Origin: *' header and Whola!. That solved my problem.

I hope this would help someone else.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.