Instantly share code, notes, and snippets.

Embed
What would you like to do?
Making AJAX requests with native JavaScript
/**
* Get data from a URL
* @param {String} url The URL to get
* @param {Function} success Callback to run on success
* @param {Function} error Callback to run on error
*/
var getURL = function ( url, success, error ) {
// Feature detection
if ( !window.XMLHttpRequest ) return;
// Create new request
var request = new XMLHttpRequest();
// Setup callbacks
request.onreadystatechange = function () {
// If the request is complete
if ( request.readyState === 4 ) {
// If the request failed
if ( request.status !== 200 ) {
if ( error && typeof error === 'function' ) {
error( request.responseText, request );
}
return;
}
// If the request succeeded
if ( success && typeof success === 'function' ) {
success( request.responseText, request );
}
}
};
// Get the HTML
request.open( 'GET', url );
request.send();
};
// Example 1: Generic Example
getURL(
'/about',
function (data) {
// On success...
var div = document.createElement(div);
},
function (data) {
// On failure...
}
);
// Example 2: Find a specific element in the HTML and inject it into the current page
getURL(
'/about',
function (data) {
// Create a div and inject the HTML into it
var div = document.createElement(div);
div.innerHTML = data;
// Find the element you're looking for in the div
var elem = div.querySelector( '#some-element' );
var location = document.querySelector( '#another-element' );
// Quit if the element or the place where you want to inject it don't exist
if ( !elem || !location ) return;
// Inject the element into the DOM
location.innerHTML = elem.innerHTML;
}
);
@uptimizt

This comment has been minimized.

Owner

uptimizt commented Sep 14, 2018

Get the contents of another HTML document, or from a specific element in another document, without using jQuery. This only works for documents on the same domain. Supported back to IE8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment