Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <button id = "load">Load new content</button>
    <section id = "content"></section>
</body>
</html>
 
#content{
    width: 25em;
    height: 20em;
    border: .1em lightgray solid;
    display: none;
}
 
/*!
 * Manipulating HTML5 History API
 * @Author: Alexis López (@AlexisThrasher)
 */
var button = document.getElementById("load"),
    content = document.getElementById("content"),
    ajax = function(uri, output){
        var xhr = window.XMLHttpRequest ? 
                  new XMLHttpRequest() : 
                  new ActiveXObject("Microsoft.XMLHTTP") || 
                  new ActiveXObject("Msxml2.XMLHTTP");
        xhr.open("GET", uri, true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4)
                switch (xhr.status){
                    case 200:
                        output.innerHTML = xhr.responseText;
                        break;
                    case 404:
                        output.innerHTML = "404 Not Found";
                        break;
                    default:
                        output.innerHTML = "Error: " + xhr.status;
                        break;
                }
        };
        xhr.send(null);
    },
    uri = "http://jsbin.com/meliq",
    route = uri.substring(uri.lastIndexOf("/") + 1);
button.addEventListener("click", function(){
    content.style.display = "block";
    new ajax(uri, content);
    history.pushState({}, "New content", route);
}, false);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Alexis88pro
0viewers