fetch data from a url in javascript

Question

I am trying to fetch a data file from a URL given by the user, but I don't know how to do. Actually, I can get data from my server successfully. Here is my code:

$("button#btn-demo").click(function() {
  $.get('/file', {
    'filename' : 'vase.rti',
  },
  function(json) {
    var data = window.atob(json);

    // load HSH raw file
    floatPixels = loadHSH(data);

    render();
  });
});

It can fetch the binary data from my server, parse the file and render it into an image. But now I want it work without any server, which means users can give a URL and javascript can get the file and render it. I know it's about the cross-site request. Can you tell me about it and how to realize it? Thanks in advance!

score 0 · Answer 1 · answered Sep 19 '13 at 20:56

0

assuming your URL is the address of a valid XML document this example will go grab it. if the URL is on a different domain than the one that's holding your scripts you will need to use a server side scripting language to got out and grab the resource (XML doc at URL value) and return it your domain. in PHP it would be ...

<?php echo file_get_contents( $_GET['u'] );

where $_GET['u'] is a URL value from your USER. let's call our PHP script proxy.php. now our JavaScript will call our proxy.php and concatenate the URL value to the end which will allow us to pass the URL value to the PHP script.

addy = $("#idOfInputFieldhere").val();
$.ajax({
  url: 'proxy.php?u='+addy, /* we pass the user input url value here */
  dataType:'xml',
  async:false,
  success:function(data){
    console.log(data); /* returns the data in the XML to the browser console */
  }
});

you'll need to use the js debugger console in chrome to view data. at this point you'd want to pull out data in a loop and use find() http://api.jquery.com/?s=find%28%29

answered Sep 19 '13 at 20:56

b_dubb

444
13
29

do you mean I should add some code to the server side? I want there is no server. Is it possible? – wayne Sep 19 '13 at 22:30
there is no server? are you building a browser extension? – b_dubb Sep 20 '13 at 13:46
yes, I'm building a widget and now I find the method, using `JSONP` to get the cross-site data. – wayne Sep 20 '13 at 16:58
in a chrome browser extension you can add wildcard sites to the manifest.json file which will allow you to access files on different domains from your extensions js scripts – b_dubb Sep 20 '13 at 17:20
using JSONP opens the user the cross site js attacks. this is dangerous and should only be used with trusted sources – b_dubb Sep 20 '13 at 19:07

score 0 · Answer 2 · edited Sep 19 '13 at 21:09

I'm not very familiar with jQuery, but as I know, due to the same origin policy, the browser won't let any JavaScript code to make an AJAX request to a domain other than its own. So in order to retrieve some data (specially JSON formatted), you can add a <script> element to your page dynamically and set its src property to the address of the data provider. Something like this:

<script src='otherdomain.com/give_me_data.json'/>

This only works if you need to access some static data (like the url above) or you have access to the server side code. Because in this scenario, the server side code should return an string like:

callbackFunction({data1: 'value1', data2: 'value2', ...});

As the browser fetches the item specified in src property, tries to run it (because it know it's a script). So if the server sends a function call as a response, the function would be called immediately after all data has been fetched.

You can implement the server side in such a way that it accepts the name of the callback function as a parameter, loads requested data and generates an appropriate output that consists of a function call with loaded data as a json parameter.

fetch data from a url in javascript

2 Answers2