Created
September 14, 2018 19:17
-
-
Save uptimizt/2f56eca7b4b1ab8eddb3acd626aa2b8a to your computer and use it in GitHub Desktop.
Making AJAX requests with native JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.