Skip to content

Instantly share code, notes, and snippets.

@rshk

rshk/HTTP response

Last active August 29, 2015 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rshk/82ff17d16d363b6b71cf to your computer and use it in GitHub Desktop.
Save rshk/82ff17d16d363b6b71cf to your computer and use it in GitHub Desktop.
Download ZIP
jQuery XHR "weird" behavior
Raw
README.md

Abstract

I'm using jQuery (and then plain JS) to get some Json from a URL, and expect it to be cached all the time.

  • The HTTP request is setting Cache-control: public, max-age=30
  • The X-Request-Id is meant to change on each request, thus allowing us to see whether the response was taken from browser cache.

Behavior on jsfiddle is different:

With jquery: http://jsfiddle.net/6w8xt0hd/2/

2e5af47b-60f4-479f-be0a-78a15613bcc1
2e5af47b-60f4-479f-be0a-78a15613bcc1
2e5af47b-60f4-479f-be0a-78a15613bcc1
2e5af47b-60f4-479f-be0a-78a15613bcc1
2e5af47b-60f4-479f-be0a-78a15613bcc1
2e5af47b-60f4-479f-be0a-78a15613bcc1
2e5af47b-60f4-479f-be0a-78a15613bcc1
2e5af47b-60f4-479f-be0a-78a15613bcc1

Plain js: http://jsfiddle.net/ajxd7eyy/2/

b1bab8b7-0474-4927-9209-4ef6f6c365c5
b1bab8b7-0474-4927-9209-4ef6f6c365c5
b1bab8b7-0474-4927-9209-4ef6f6c365c5
b1bab8b7-0474-4927-9209-4ef6f6c365c5
b1bab8b7-0474-4927-9209-4ef6f6c365c5
b1bab8b7-0474-4927-9209-4ef6f6c365c5
b1bab8b7-0474-4927-9209-4ef6f6c365c5
b1bab8b7-0474-4927-9209-4ef6f6c365c5
Raw
HTTP response
HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Cache-Control: public, max-age=30
Connection: keep-alive
Content-Length: 320
Content-Type: application/json
Date: Mon, 27 Oct 2014 10:52:06 GMT
Server: gunicorn/18.0
{
"args": {},
"headers": {
"Accept": "*/*",
"Accept-Encoding": "gzip, deflate",
"Connection": "close",
"Host": "httpbin.org",
"User-Agent": "HTTPie/0.8.0",
"X-Request-Id": "24284ab9-5b04-475a-83aa-0d116989a728"
},
"origin": "x.x.x.x",
"url": "http://httpbin.org/cache/30"
}
Raw
plain-js.html
<!DOCTYPE html>
<html><head></head><body>
<pre id="data"></pre>
<script src="plain-js.js"></script>
</body></html>
Raw
plain-js.js
function http_get(url, handler) {
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState === 4) {
handler(JSON.parse(xmlHttp.responseText));
}
};
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
return xmlHttp;
}
var _log = document.getElementById('data'),
log = function(msg) { _log.innerHTML += msg + "\n"; };
http_get('http://httpbin.org/cache/30', function(data){
log(data.headers['X-Request-Id']);
});
http_get('http://httpbin.org/cache/30', function(data){
log(data.headers['X-Request-Id']);
});
setTimeout(function(){
http_get('http://httpbin.org/cache/30', function(data){
log(data.headers['X-Request-Id']);
});
}, 0);
setTimeout(function(){
http_get('http://httpbin.org/cache/30', function(data){
log(data.headers['X-Request-Id']);
});
}, 0);
window.addEventListener('load', function(){
http_get('http://httpbin.org/cache/30', function(data){
log(data.headers['X-Request-Id']);
});
http_get('http://httpbin.org/cache/30', function(data){
log(data.headers['X-Request-Id']);
});
setTimeout(function(){
http_get('http://httpbin.org/cache/30', function(data){
log(data.headers['X-Request-Id']);
});
}, 0);
setTimeout(function(){
http_get('http://httpbin.org/cache/30', function(data){
log(data.headers['X-Request-Id']);
});
}, 0);
});
Raw
plain-js.txt
c8b59afe-10a4-4511-a0d9-be5d00054bf4
86db2512-8095-4403-96b4-1466b6fcce5c
86db2512-8095-4403-96b4-1466b6fcce5c
86db2512-8095-4403-96b4-1466b6fcce5c
86db2512-8095-4403-96b4-1466b6fcce5c
86db2512-8095-4403-96b4-1466b6fcce5c
86db2512-8095-4403-96b4-1466b6fcce5c
86db2512-8095-4403-96b4-1466b6fcce5c
(on second page req, they're all 86db2512-8095-4403-96b4-1466b6fcce5c)
Raw
with-jquery.html
<!DOCTYPE html>
<html><head></head><body>
<pre id="data"></pre>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="with-jquery.js"></script>
</body></html>
Raw
with-jquery.js
$.get('http://httpbin.org/cache/30').done(function(data){
$('#data').append(data.headers['X-Request-Id'] + '\n');
});
$.get('http://httpbin.org/cache/30').done(function(data){
$('#data').append(data.headers['X-Request-Id'] + '\n');
});
setTimeout(function(){
$.get('http://httpbin.org/cache/30').done(function(data){
$('#data').append(data.headers['X-Request-Id'] + '\n');
});
}, 0);
setTimeout(function(){
$.get('http://httpbin.org/cache/30').done(function(data){
$('#data').append(data.headers['X-Request-Id'] + '\n');
});
}, 0);
$(function(){
$.get('http://httpbin.org/cache/30').done(function(data){
$('#data').append(data.headers['X-Request-Id'] + '\n');
});
$.get('http://httpbin.org/cache/30').done(function(data){
$('#data').append(data.headers['X-Request-Id'] + '\n');
});
setTimeout(function(){
$.get('http://httpbin.org/cache/30').done(function(data){
$('#data').append(data.headers['X-Request-Id'] + '\n');
});
}, 0);
setTimeout(function(){
$.get('http://httpbin.org/cache/30').done(function(data){
$('#data').append(data.headers['X-Request-Id'] + '\n');
});
}, 0);
});
Raw
with-jquery.txt
3b07be4b-ff18-4758-a425-06eac317be6f
4412da1a-edb6-4f27-8466-416cee16ecc4
48b86127-0b46-4baa-a050-b9887771afaf
aaa203a9-ab25-43f4-b52d-7e4acf76295f
4105b774-da2a-4100-8533-cedbfa8e8002
dec7d845-9b82-4053-a6d2-d8bedcb94b44
dec7d845-9b82-4053-a6d2-d8bedcb94b44
dec7d845-9b82-4053-a6d2-d8bedcb94b44
(on second page req, they're all dec7d845-9b82-4053-a6d2-d8bedcb94b44)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment