CODEWITHSUNDEEP
javascriptjqueryajax
Powkachu
Powkachu

Reputation: 2268

Get a file through AJAX with JQuery

I looked for an answer to my problem everywhere but I didn't found what I want to know.

Here is what I want to do: I have an url of an image, pdf or html page from the same domain and from other domains too. Is it possible to "download" them with AJAX? But I don't want to have them physically on my server or anywhere else, I just want to use them directly on my website without having to upload them again (to save time).

I'm also having some troubles doing "XMLHttpRequest.getAllResponseHeaders()" when the content comes from an other domain. I tried with multiples url. I received nothing: "". Is it normal?

Thank you for your help ! :)

Upvotes: 1

Views: 125

Answers (4)

collapsar
collapsar

Reputation: 17238

The following boilerplate code ( basically taken from the jquery api page ) loads your gravatar image ( delivered in png format ) from the stackoverflow website into a callback parameter. As others have noted, the same origin policy applies to ajax requests ( The sample code therefore can onlybe successfully run from the stackoverflow site context, eg. by opening a js console on this page ).

$.ajax({
  method: "GET"
  , url: "https://www.gravatar.com/avatar/d85e0ad5243245aabe2d34a3c9a296a9?s=32&d=identicon&r=PG&f=1"
  , cache: false
  , beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
})
  .done(function( data ) {
    if ( console && console.log ) {
      console.log( "Length of data:", data.length );
      console.log( "Sample of data:", data.slice( 0, 100 ) );
    }
  });

Upvotes: 0

Brrrr
Brrrr

Reputation: 4598

You certainly can fetch images and html pages with AJAX and display them on your webpages.

The issues you are having with the xmlHttpRequest.GetAllResponseHeaders is most likely caused by the same origin policy. The browser prohibits you from interacting with the loaded data from another domain.

The server you are fetching the data from has to explicitly indicate that it allows your domain to fetch and display his resources by setting the Access-Control-Allow-Origin response header to that of your domain.

A way arround this is by using a proxy and setting the header yourself.

Upvotes: 1

jonny
jonny

Reputation: 3098

Unfortunately it is impossible to make AJAX requests for resources on domains external to the website's host domain, edit: unless they implement a workaround, like CORS or JSONP. I recommend doing some reading on Cross Origin Resource Sharing for more details.

As for resources on the same domain, you'd be storing those on your server anyway - you'd have to, in fact, because by its very nature it would be a part of your site. If you describe what you're trying to implement specifically (perhaps post a jsfiddle with your code), we could find a solution to your specific use case. Hope this helps.

Upvotes: 1

DatLicht
DatLicht

Reputation: 148

[...] image, pdf or html page [...]

The types of these requests are very different. What you mean with 'download' is a little ambigious. If you're requesting a file via AJAX, this loads the value into a variable. It doesn't save the file to your computer.

[...] I received nothing: "" Is it normal? [...]

Yes, if the remote server isn't the same as you're currently on (also the same port) and also doesn't support CORS (cross-domain requests), the result will be blank.

If it's not possible to alter the remote server's cross-domain policies [and you have the permission to use their services], you could write a PHP script on your server that acts as a proxy. But don't forget to secure it to prevent mis-use. Also keep in mind that such a script can raise your traffic dramatically, so this should only be "Plan B".

Upvotes: 1

Related Questions