Loading a CSV file using jQuery GET returns the header but no data

Question

When reading a CSV file from a server using the jQuery 'GET' function I do not get any data. When I look at the code using FireBug I can see the GET request is sent and the return value is '200 OK'. Also I see that the header is returned correctly so the request is definitely made, and data is returned. This is also what I see in Wireshark. Here I see the complete contents of the CSV file is returned as a standard HTTP response.
But the actual data is not there in my script. Firebug shows an empty response and the 'success' function is never called. What could be wrong ?

EDIT: An essential part of information appeared to be missing from my question. The following code runs on my local machine and is started by Aptana Studio in Firefox using the built-in test server.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>       
        <title>New Web Project</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>

       <script type="text/javascript">
        var csvData;
        $(document).ready(function() {
           $("#btnGET").click(function() {
                csvData = $.ajax({
                    type: "GET",
                    url: "http://www.mywebsite.com/data/sample_file.csv",
                    dataType: "text/csv",
                    success: function () {
                       alert("done!"+ csvData.getAllResponseHeaders())
                     }
                });
           });
        }) 
 </script>
 </head>   

     <body>
        <h1>New Web Project Page</h1>
        <button id="btnGET">GET Data</button>
    </body>
</html>

Cees Meijer · Accepted Answer · 2016-09-06 10:55:22Z

2

The code does not work because I try to make a cross-domain GET. The page and script are hosted on my local machine and the GET tries to retrieve data from a totally different domain. Though technically possible it is blocked by all modern browsers because it is a security vulnerability.
Frederick Behrends pointed me in the right direction. And as he also mentions the only cross domain GET that is allowed is by using "jsonp".

Following text was taken from the jQuery documentation:
"Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol. "

edited Sep 6, 2016 at 10:55

answered Jul 10, 2012 at 19:08

Cees Meijer

8022 gold badges10 silver badges24 bronze badges

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

Comments

Frederick Behrends · Accepted Answer · 2012-07-10 09:02:43Z

1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>       
        <title>New Web Project</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>

       <script type="text/javascript">
        var csvData;
        $(document).ready(function() {
           $("#btnGET").click(function() {
                csvData = $.ajax({
                    type: "GET",
                    url: "http://www.mywebsite.com/data/sample_file.csv",
                    dataType: "text/csv",
                    success: function (result) {
                       alert(result);
                       alert("done!"+ csvData.getAllResponseHeaders())
                     }
                });
           });
        }) 
 </script>
 </head>   

     <body>
        <h1>New Web Project Page</h1>
        <button id="btnGET">GET Data</button>
    </body>
</html>

answered Jul 10, 2012 at 9:02

Frederick Behrends

3,09526 silver badges47 bronze badges

5 Comments

Cees Meijer Over a year ago

Not sure what this tries to resolve ? I've added the 'alert(result);' but (as expected) nothing appears, since the 'success' function never called.

Frederick Behrends Over a year ago

are you sure, the file exists and the url is en.wikipedia.org/wiki/Same_origin_policy valid?

Cees Meijer Over a year ago

The file definitely exists. And as I already mentioned I see the contents of the file in Wireshark as it is is sent from the server to my client. I'm not sure that I fully understand the 'same origin policy', but the client is obviously local on my PC and the data is on a remote web-page. Could that really be a problem ? I see websites getting data from other sites all the time.

Frederick Behrends Over a year ago

this could be a problem, try to set the dataType to 'jsonp'

Cees Meijer Over a year ago

Although it still does not work it seems solve the problem of getting the data. The 'success' function is still not called, but in Firebug I now get a parsing error on the actual text of the CSV file.

Tim · Accepted Answer · 2012-07-10 09:13:56Z

1

As my understanding dataType only accepts "text" as parameter, may be you can have a go? You can refer to following page as well: http://api.jquery.com/jQuery.ajax/

Thanks.

answered Jul 10, 2012 at 9:13

Tim

455 bronze badges

1 Comment

Cees Meijer Over a year ago

Nope. I actually started out with 'text 'only, but that did not work either. Also tried without this specifier, but that does not work either.

djmati11 · Accepted Answer · 2012-07-10 09:04:06Z

0

                $.ajax({
                    type: "GET",
                    url: "http://www.mywebsite.com/data/sample_file.csv",
                    dataType: "text/csv",
                    success: function (data) {
                       csvData = data;
                       //alert("done!"+ csvData.getAllResponseHeaders()) - my fix makes this won't work...
                     }
                });

answered Jul 10, 2012 at 9:04

djmati11

5975 silver badges18 bronze badges

2 Comments

Cees Meijer Over a year ago

This also makes no difference since the 'Success' function is never called.

djmati11 Over a year ago

Try upgrade jQuery, if this won't work - I don't know what is wrong.

Edgar Wanjala · Accepted Answer · 2020-04-16 23:30:51Z

-1

I tried commenting out dataType and it has worked.

answered Apr 16, 2020 at 23:30

Edgar Wanjala

1

1 Comment

Nouman Bhatti Over a year ago

it's better to share some code and example output of it.

Collectives™ on Stack Overflow

Loading a CSV file using jQuery GET returns the header but no data

5 Answers 5

Comments

5 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related