Load JSON dynamically using AJAX | XMLHttpRequest Tutorial | For API Use

Through the use of AJAX (XMLHttpRequest) you are able to load JSON dynamically after your website/application has loaded - this allows you to quite powerfully load extra content without having to refresh the page.

As the use of APIs in the modern world of web development is growing and real-time data analysis is becoming more relevant - I thought I would make this video to show you guys how to work with one of the most common mediums of API responses: JSON (JavaScript Object Notation).

In this video I take you through a simple example of how to make a request to a JSON data file and then convert this into a native, fully usable JavaScript object - and we do this using an XMLHttpRequest instance. No jQuery or external library is required1

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[dcode-software]

UPDATE:

Learn how to use AJAX to load data from an external file straight into your HTML tables:

[WlfbaneShikaiscl]

Your name is Dom... and you're teaching Javascript... Gives new meaning to navigating the DOM.

[chromashift]

Most accessible, reproducible & concise explanation; Thank you.

[eyalshnitzerful]

Thank you Dom. Your videos are well explained. I learn a lot!!!

[Burak-sjvr]

Very very helpful video. Thank you soo much dcode !

[sureshui]

Super Dom. Nice. I was afraid of this topic before and i cleared with this videos. thanks lot @domenic

[Wickaruz]

How can I use the value in resObj outside the function unload()? Or is their an option to use the response from web call after xhr.send()?

[cloudpuncher]

Thanks Dom, your a machine, do you have a patreon. You’ve been heaps of help with your videos, I would definitely support you.

[muhammadzubair]

Ihow we can fetch the data from json api and display the data in html form in html page & after submission of data display like json data display in console.

[ahmedabdulrazzaq]

What if I want to return the object I try that but it did not work?

[KelvinWKiger]

*status: 200*

{
That was just amazing!
}

[rohithchandrakandambeth]

Hi Dom, I got an error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file: path. (Reason: CORS request not HTTP)." Could you help me fix it?

[Dexterx]

Why do Australians have to pronounce everything so weirdly? Data: Darta, Project...prooject, and finally apache: Aparchie

[salexkorsan]

is there any way to get Outside result of the Function


if(this.readyState==4 && this.status==200){
var Xs=this.responseText;
}}

i want this.responseText here, Out Side of the Function.
trying to solve from two month, Please Help