JavaScript has a built-in object called XMLHttpRequest that can be used to make AJAX requests (i.e. Client-side HTTP requests made in the background which do not require a page refresh)
XMLHttpRequest is not normally used due to large amount to code needed to make requests; libraries jQuery (using $.ajax(), $.get(), etc) and others are often used in place of XMLHttpRequest
XMLHttpRequest looks like:function logResponse(data) {
console.log('response complete ====>', data)
}
function get(url, callback) {
console.log('step 2: declare request.')
const request = new XMLHttpRequest()
console.log('Step 3: open request.')
request.open('GET', url, true);
console.log(
'Step 4: set the request state change handler to call the callback when status = 200',
)
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
callback(request);
}
}
console.log('Step 5: send request.')
request.send()
}
console.log('Step 1: invoke AJAX function.')
get(
'http://api.giphy.com/v1/gifs/search?q=smooth&api_key=2qqBvRkz56JiTUcMbOJbak5VRRLEbV84',
logResponse,
)
console.log('Step 6: End of JS file.')