Skip to main content Skip to secondary navigation Accessibility Feedback

Getting HTML asynchronously from another page (with native JavaScript)

On a recent project, I needed to load the form on a contact page in a modal window on a different page.

That’s typically something you’d turn to jQuery for, but I want to show you can achieve the same effect with native JavaScript.

Psst... I'm writing a book on ditching jQuery for vanilla JS. Pre-order it today and save 50%.

Asynchronous HTML #

This approach uses XMLHttpRequest web API.

While this API is supported back to IE 7, HTML requests are only supported in IE10 and higher. The method below includes a feature test and won’t run in unsupported browsers.

/**
 * Get HTML asynchronously
 * @param  {String}   url      The URL to get HTML from
 * @param  {Function} callback A callback funtion. Pass in "response" variable to use returned HTML.
 */
var getHTML = function ( url, callback ) {

    // Feature detection
    if ( !window.XMLHttpRequest ) return;

    // Create new request
    var xhr = new XMLHttpRequest();

    // Setup callback
    xhr.onload = function() {
        if ( callback && typeof( callback ) === 'function' ) {
            callback( this.responseXML );
        }
    }

    // Get the HTML
    xhr.open( 'GET', url );
    xhr.responseType = 'document';
    xhr.send();

};

To replace the entire contents of a page with content from another, you would do this:

getHTML( '/about', function (response) { 
    document.documentElement.innerHTML = response.documentElement.innerHTML;
});

You can also get specific elements on the page by treating the response variable the same way you would the document element on any other page.

getHTML( '/about', function (response) { 
    var someElem = document.querySelector( '#some-elem' );
    var someOtherElem = response.querySelector( '#some-other-elem' );
    someElem.innerHTML = someOtherElem.innerHTML;
});
If you liked this article, you might also like Ditching jQuery, my new beginner's guide to vanilla JavaScript. Pre-order it today and save 50%.
  • More articles on...
  • Code

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Weekly Digests