Since IE doesn't support xhr.responseURL, is there any alternatives for xhr.responseURL for ajax calls other than setting custom response headers from the backend?
Thanks
Related
I am using Firebug 1.10.2 with Firefox 14.0.1. When showing a web page, the Firebug add-on has this "behavior": Firebug’s “Aborted” message upon Ajax request.
What should I make? Is it so dangerous that I must improve my web application because the presence of some error, or it is a Firebug bug or something else?
Please see the documentation of XHR open() for example here:
https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest
Note: Calling this method an already active request (one for which
open()or openRequest()has already been called) is the equivalent of
calling abort().
Just create a new XHR instance whenever you need one. Better yet, use jQuery or other JS library to do AJAX. It should shield you from these intricacies.
I saw this problem when trying to load a JavaScript file using HTTPS, but was serving the site on my local development environment using HTTP. The request to fetch the JavaScript file would fail with the Aborted message in FireBug. Making the requests use the same protocol worked for me.
I'm looking for browser extension (for Firefox or Google Chrome) that allow me to make AJAX calls. I'd like to specify:
Method (POST/PUT/GET/DELETE)
URL
Data to send (JSON/XML)
I know that I can make AJAX call from console, but it's nice to have dedicated tab for that.
I've found 2 nice extensions:
cREST Client - https://chrome.google.com/webstore/detail/baedhhmoaooldchehjhlpppaieoglhml
XHR POSTER - https://chrome.google.com/webstore/detail/akdbimilobjkfhgamdhneckaifceicen
It's well known that Internet Explorer aggressively caches ajax calls whereas all the other browsers grab the data fresh every time. This is usually bad: I've never encountered a case where I want ajax to NOT contact the server. Firefox, Safari and the other browsers know this and don't cache ajax calls.
To prevent IE from caching, you have to do one of the following:
add a cache-busting token to the query string (like ?time=[timestamp])
send a HTTP response header that specifically forbids IE to cache the request
use an ajax POST instead of a GET
I much prefer setting a no-cache header. It's the correct way: it tells all browsers not to cache, which is exactly what you intend. The query string method fills up the browser's cache with stuff that'll never be retrieved, leaving less room for legitimate cache content. And the POST method is a corruption of HTTP: POSTs are for modifying data.
In Grails, what's the best way to automatically send a do-not-cache header for all ajax requests? I don't want to modify any controllers, so I'm thinking there's got to be a cool filter trick or something.
Thanks!
Here's what I finally figured out. Most javascript libraries --including jQuery, YUI, Mootools and Prototype -- send the X-Requested-With: XmlHttpRequest header on every ajax request.
For any request that sends this header, you can send a response header back that tells it to not cache.
Below is a Grails filter that prevents caching of ajax requests that identify themselves with the X-Requested-With: XmlHttpRequest header:
// put this class in grails-app/config/
class AjaxFilters {
def filters = {
all(controller:'*', action:'*') {
before = {
if (request.getHeader('X-Requested-With')?.equals('XMLHttpRequest')) {
response.setHeader('Expires', '-1')
}
}
}
}
}
Some people prefer to use the Cache-Control: no-cache header instead of expires. Here's the difference:
Cache-Control: no-cache - absolutely NO caching
Expires: -1 - the browser "usually" contacts the Web server for updates to that page via a conditional If-Modified-Since request. However, the page remains in the disk cache and is used in appropriate situations without contacting the remote Web server, such as when the BACK and FORWARD buttons are used to access the navigation history or when the browser is in offline mode.
By adding this filter, you make Internet Explorer's caching consistent with what Firefox and Safari already do.
BTW, I've experienced the caching problem on IE8 and IE9. I assume the problem existed for IE7 and IE6 as well.
We use jQuery for all ajax calls so we add this block to our main.gsp (top-level layout):
<g:javascript>
jQuery(document).ready(function() {
$.ajaxSetup({
cache:false
});
});
</g:javascript>
Also answered here
I'm using jQuery's ajax .get method to retrieve data from my server. Works perfect in Chrome, but in IE9 it is not sending the Cookie header and that breaks the app. Any idea why? Here's the jQuery code:
$.get(this.server + 'rest/photo/' + this.profileId + '/count', function(data) {
$('#imageCount').html(data);
});
I have the same problem here, I can't get the jQuery .ajax() function to work. The only workaround I found is this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
You can add this meta tag to the top of the page to get it working. But it doesn't feel like a good solution. I think the problem is that the xmlhttprequest object in IE9 is different, so jQuery cannot find the respective object, therefore ajax is not triggering.
I ran into a similar issue to the OP many years later with IE9 which, sadly, is still hanging on.
Every browser I tried, including IE10+, seemed fine with passing cookies to my backend, but IE9 would just drop them. It didn't seem to matter what attributes were on the cookies. The main page and API were on the same domains and the cookies matched, the schemes were the same. I wasn't doing anything with IFRAMES, so the P3P 'potato' hack didn't help.
So I started doing some research on what it was about IE9 that could be different. This Microsoft post was very enlightening, and outlines all the things the IE8 and IE9 did to help lock down CORS security holes:
Must use HTTP(S), and both endpoints must use the same scheme
Must use GET/POST
No custom headers allowed
Only text/plain content-type allowed
More sensitive to Security Zone settings
Cookies will be stripped from the request
That last item about the cookies got me thinking, what if IE9 thought I was making a cross-site request? It certainly looked like it was getting shot down in fine fashion like that. I had already checked some of the obvious things like the scheme and domain, but maybe I didn't check everything.
The solution? Specifically, I was using reqwest as my ajax library. It has a cross-origin parameter, which I had left set to true for some reason. Setting it (correctly) to false did the trick - all my cookies were picked up by the server. So it was a dumb mistake, but I learned a thing or two.
Hope this helps someone!
Which of JavaScript libraries and frameworks has support for "onprogress" event for XmlHttpRequest (perhaps as a plugin or extension), emulated if necessary? Alternatively which JavaScript framework would be easiest to extend to support xhr.onprogress?
By "emulated if necessary" I mean here that if web browser doesn't support XHR 2.0 "onprogress" event, then "onreadystatechange" would be used. Because some browsers fire onreadystatechange only once for each state, and do not call onreadystatechange on server flush, then some kind of timer / interval would probably be necessary to periodically check XHR object if it is such browser.
jQuery and YUI provide only success and error (or equivalent) callback
MooTools provide 'progress' event, but limited to Browsers that support the event. (At this time: Gecko and WebKit).
You may be able to extend jQuery to achieve what you desire with $.ajax Transports. You will have to do all the hard work yourself though.