How to get data request from link url in javascript?

Question

I want to load data from this url: http://gateway.fpts.com.vn/monitor/realtime/?s=aaa using Javascript.

This url returns data in my browser as shown below:

Here is the code I tried:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   </head>
   <body>
      <div id= "stage"></div>
        <script type = "text/javascript" language = "javascript">
         var url = "http://gateway.fpts.com.vn/monitor/realtime/?s=aaa"
        $.ajax({
          url: url,
          cache: false,
          method: "GET",
        })
          .done(function( html ) {
            $( "#stage" ).append( html );
          });
      </script>
   </body>
</html>

But I am getting this Error:

XMLHttpRequest cannot load http://gateway.fpts.com.vn/monitor/realtime/?s=aaa&_=1465298988417. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Read about jQuery.ajax() here http://api.jquery.com/jquery.ajax/. — void, Jun 07 '16 at 11:19

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

You are making a cross-origin http request as you are requesting data from a domain http://gateway.fpts.com.vn which is different form that of your html file shown in question, say it http://www.requesting-server.com

To allow cross-origin resource sharing, you should set following header on the requested server http://gateway.fpts.com.vn.

To allow requests from any domain, use * as a wildcard (less secure):

Access-Control-Allow-Origin: *

or

To allow requests from a particular domain:

Access-Control-Allow-Origin: http://www.requesting-server.com

You can also check this post which addresses the same issue.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 07 '16 at 11:51

Ajeet Shah

18,551
8
57
87

I tried same: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS error 25 Uncaught ReferenceError: handler is not defined – Ta No Bi Jun 14 '16 at 17:14
Can you tell me how you are setting the `Access-Control-Allow-Origin: *` header at the server `http://gateway.fpts.com.vn`? You can share code / screenshot or relevant information in the question. Do not delete the original question text. Just at the bottom add details with a "Edit:" note. – Ajeet Shah Jun 14 '16 at 17:18
Which means that I have to set up header on the server, the server accepts CORS returns response? – Ta No Bi Jun 14 '16 at 17:33
1

Hi @Orions! I use MVC. I write a function getData: make request with WebRequest, and use StreamReader read data form url. I pass data from controller to view :). It same: http://stackoverflow.com/questions/10565090/getting-the-response-of-a-asynchronous-httpwebrequest – Ta No Bi Jun 16 '16 at 14:17
Orions! Thank you so much! – Ta No Bi Jun 16 '16 at 14:31

score 1 · Answer 2 · answered Jun 07 '16 at 12:22

In addition to @Orions comment (https://stackoverflow.com/a/37678620/633781), you need to provide following header in your request to a server, to make it work:

Origin: <your domain, e.g. http://example.com>

As far as I remember, jQuery does this automatically for you. Nevertheless, you can check the request headers in your browser's Dev tools to make sure it does. You can add your own headers to requests made with jQuery, though (https://api.jquery.com/jquery.ajax/)

You are right in "jQuery does this automatically for you" – Ajeet Shah Jun 07 '16 at 13:30 — Ajeet Shah, Jun 07 '16 at 13:30

score 0 · Answer 3 · answered Jun 07 '16 at 11:27

0

You have to import jquery library from below link to use this code. https://jquery.com/download/

$.get( "http://gateway.fpts.com.vn/monitor/realtime/?s=aaa", function( data ) {
  console.log(data);
});

answered Jun 07 '16 at 11:27

Dhaval Soni

205
2
14

Hi @Dhval thank you for answer! But have a error:"XMLHttpRequest cannot load http://gateway.fpts.com.vn/monitor/realtime/?s=aaa&_=1465298988417. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." – Ta No Bi Jun 07 '16 at 11:32
Please prefer this for No 'Access-Control-Allow-Origin' http://stackoverflow.com/questions/28547288/no-access-control-allow-origin-header-is-present-on-the-requested-resource-err – Dhaval Soni Jun 07 '16 at 12:20

score 0 · Answer 4 · answered Jun 07 '16 at 11:30

0

You can make an ajax request an then get the data, something like this:

$.ajax({
  url: "http://gateway.fpts.com.vn/monitor/realtime/?s=aaa",
}).done(function(data) {
  $("body").html(data);
});

Make sure to include jquery if you use this.

answered Jun 07 '16 at 11:30

Bjørn Nyborg

993
7
17

Hi @Bjørn Nyborg thank you for answer! But have a error:"XMLHttpRequest cannot load http://gateway.fpts.com.vn/monitor/realtime/?s=aaa&_=1465298988417. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." – Ta No Bi Jun 07 '16 at 11:33
That is because its a cross-domain request. Try adding dataType: 'jsonp', – Bjørn Nyborg Jun 30 '16 at 11:25

score 0 · Answer 5 · answered Jun 07 '16 at 11:33

0

Because your data is in JSON form, you can use a shorthand for that using $.getJson(). Download jQuery library and include on top of every script. Then place the following snippet in a separate script below the jQuery library.

(function($){
  $(function(){
      $.getJson( "http://gateway.fpts.com.vn/monitor/realtime/?s=aaa", function(data) {        
          console.log(data);
          // do something with data....        
      });
  });
})(jQuery || window.jQuery);

answered Jun 07 '16 at 11:33

Rohit416

3,416
3
24
41

Hi @Rohit416 thank you for answer! but have error: Uncaught TypeError: $.getJson is not a function – Ta No Bi Jun 07 '16 at 11:37
Have you included `jQuery` on top? – Rohit416 Jun 07 '16 at 11:39
I included on top. – Ta No Bi Jun 08 '16 at 02:01

How to get data request from link url in javascript?

5 Answers5