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.

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;
});