Learn XML HTTP Requests in JavaScript | AJAX Tutorial

[@dcode-software]

UPDATE: Learn how to use AJAX to load data from an external file straight into your HTML tables: kzbin.info/www/bejne/Z2PXm5uVa91_aK8

[@99HAXXOR]

watching this video in 2022, you sir is "GREAT". it helped me a lot

[@mouthbreather280]

Very Great Video! Codecademy doesn't even go into any detail or depth as for the purpose for the actual commands used. Really helped understanding the process more. Thanks for the great content and tutorial man! :)

[@dcode-software]

Thank you 😁 and you're welcome

[@varletconstundefined]

amazing simple to the point. great introduction. i had zero knowledge before the video after it i googled for some other videos , and it was simple after your. Thanks man :)

[@dcode-software]

No worries mate 😁

[@varletconstundefined]

@@dcode-software one more question please do you know a good resource to study React i'm currently working on Fetching API and consuming it. then i wanna learn one framework. any good resource will help 😁

[@conanchambers466]

Wow! I understand that syntax has changed but with your explaining my understanding has vastly improved so so much! Thankyou!

[@imcw]

nice code editor + blue switch + good content + beautiful cover image. Love your videos, dcode! p.s: it would be great if you record in 60fps

[@dcode-software]

+Cương Trần Thank you! That means a lot - glad you enjoy 😁

[@redsquirrel3893]

If you do do a high frame rate for Cương Trần and any others please keep the current 1080 option I actuality prefer it as the resolution matters way more for tutorials so you can see the code clearly and both make it take longer to load (my crappy Internet). 1080 with the current frame rate is perfect for me. Also thanks keep up the good work.

[@mouthbreather280]

@ Cương Trần There's no point. It's a text tutorial not a skateboarding tutorial that you'd rather see smoother motion. It will make such minuscule negligible difference for this kind of video. All it will accomplish is stressing dcode's computer more and making the file size larger. resolution matters over > fps in this case because we'd rather see the code sharp instead of blurry.

[@gokharol]

Readystates: 0 - unset 1 - opened 2 - headers_received 3 - loading 4 - done

[@galbeeyutdmok651]

Hey Dom , do you like to use the DOM ?

[@dcode-software]

Hi there. Yes, I love using the DOM.

[@DominicNweze]

Y'all be using me raw. 😂

[@greatpandas99]

You're a lifesaver man, I really appreciate this. Thanks

[@vuedev6324]

beautiful explanation of XMLHTTPREQUEST( ); TYSM ❤

[@Good-Enuff-Garage]

absolutely positively brilliant example

[@Devronization]

Great video. Thanks a lot. I like your teaching style. Keep up the good work.

[@dcode-software]

No worries mate, cheers!

[@Meleeman011]

For those having CORS issues, put the file on a local server such as a node.js server or nginx/apache server. I think node is easiest, you could run a dev server with node server.js and have server.js serve your file to localhost:3333 or whatever port, reference that in your xhr.request and as long and you have your development server running you can locally test without a CORS issue.

[@gamersoul1098]

i saw one youtuber he was able to use file from local storage without cors error

[@gamersoul1098]

so is there any solution for cors error with out node.js ?

[@hyperspace2223]

Best XHR tutorial! Tried googling but couldn't find any helpful results.

[@erfelipe]

Quick, clean and direct. Thanks.

[@robot67799]

You deserve a subscribe. BTW which theme you are using in atom?

[@samsam-zu7zc]

Your logo is beautifully designed

[@moddingdudes7055]

Thank you for this video very much. It fits very well when you read a little bit of the W3Schools page and I was still a little confused but you cleared all of that up and I thank you for that. I also believe in your xhr.readystatechange function you can use this.readystate and this.status instead of xhr.readystate or xhr.status. Thank you for your help though.

[@dcode-software]

No worries mate, using "xhr" over "this" depends on if you're using an arrow function or standard function

[@GlenMillard]

I learned quite a bit from your video - thanks much! It was excellent! :)

[@dcode-software]

No problem 😁

[@zenziiiiiiiiii]

Thanx for making the video, I really needed this explanation.

[@dcode-software]

No probs!

[@davidgrig4608]

great explanation thx

[@BlokeBritish]

hows it going my name is Don - that standard tone in every video is a killer haha

[@dcode-software]

Looooooool

[@wemode2998]

Great video. Concise and very informative

[@osasferguson]

Great content

[@kleb2010]

Great video, helped a lot :)

[@dcode-software]

All good, mate

[@mackensonreginaldmichel399]

Very good explanation. But I'd like to know when and why use it? Do we not need server-like languages anymore if we can use this? Thanks a bunch!!!

[@jessicarosenberg4032]

Thank you so much!!!! Just what I needed😊😊

[@dcode-software]

No problem 👍

[@yasirwisal8081]

Well done Right on the point, thanks

[@dcode-software]

No dramas :)

[@owenharrison8012]

Great tutorial! Thank you very much!

[@DanielHernandez-zx4kj]

Thank you so much for this video!!

[@Emassei]

Thank you helped me out a lot!

[@dcode-software]

No worries 😁

[@jeel7373]

THANK YOU THANK YOU SO MUCH SIR 👑👑👑👑👑🇮🇳😀

[@dcode-software]

You're welcome! Heads up - once you have learnt AJAX, I recommend using Fetch 🙂

[@royalbhati7837]

Amazing explanation :D

[@dcode-software]

Thank you mate, glad it helped

[@royalbhati7837]

@@dcode-software Just saw few of your videos and your explanations are really good,Hope it grows :)

[@mistakenmillenial6834]

Thank you so much for this video. It helped me a lot.

[@dcode-software]

Yeh no worries mate!

[@roffe8430]

Awesome video! :D

[@dcode-software]

You're welcome mate 😁

[@shiyoh-8289]

Thank you for sharing the video! I use same code as you said but I got error code related to CORS, it said "Access to XMLHttpRequest ...from origin 'null' has been blocked by CORS policy"

[@shiyoh-8289]

and I found that I just forgot to add the if statement about "Readystate ==4" when i add it everything go well

[@PratikSahu18]

AJAX only works in server , not in local directories

[@_productivity__nill_1131]

Good tutorial

[@dcode-software]

Thanks mate! Glad you liked it

[@mackymichel8052]

Thanks a lot. But I'd like to know what the header is, plz.

[@omar7amdi]

Thanks

[@shubhamarora547]

gr8 video sir

[@dcode-software]

Thank you mate, glad it could help you

[@t3chnicolor]

ID on the keyboard, switches and keycaps you’re using?

[@fahadhafeez8086]

Great!

[@ilikespaghetti2170]

can you make just like this one but if you click a button it will function the XML HTTP Requests

[@mortenrobinson]

0:48 why? I thought you just said Ajax were for making requests to other websites, webservices and webpages? So you're going to use ajax to request a local text file from yourself? And it even has to be in the same directory? Where do the external websites, webservices and webpages enter the picture?

[@4u4000]

I ran the same code on my file system and i get a CORS error. How can i resolve this issue?

[@minach69]

I have the same issue

[@malteeaser101]

I got that when trying to access a different site or sending a request to the local file system. I think it is a security thing, maybe. It works fine when requesting files from the server that the original HTML file came from.

[@dcode-software]

Generally speaking you can't fix this "issue" - it's a security feature enforced by the web browser. The reason it's happening is because you're trying to access a resource from a different origin (or site). If you'd like to get around this problem you need to have access to the web server which is providing the resource and set the Access-Control-Allow-Origin header accordingly.

[@Meleeman011]

put the file on a local server such as a node.js server or nginx/apache server. I think node is easiest, you could run a dev server with node server.js and have server.js serve your file to localhost:3333 or whatever port, reference that in your xhr.request and as long and you have your development server running you can locally test without a CORS issue.

[@AlphyGacheru]

Thank you sir!

[@nonetrix3066]

I've only used JSON until now one of the APIs I use supports both any reason to chose one over the other?

[@abdulhaqfayeq5962]

I wrote like this but , did work

[@rethpark]

thank you man....

[@10a3asd]

I don't understand how the script you wrote knows where to send the GET request to. What if you were sending the GET request to a web service?

[@missinglink2416]

what type of data can be returned by the xmlhttprequest object?

[@sergioa1113]

gracias! :D

[@dcode-software]

No worries mate!

[@Good-Enuff-Garage]

Failed to load response data. No data found for resource with given identifier.

[@domaincontroller]

I've installed LAMP. Put the index.html and dom.txt in /var/www/html and removed all my chrome extensions which were creating websocket issues. Everything worked fine then.

[@davidtsiklauri8089]

Perfect :d

[@filmlife1000]

i keep getting this error: index.html:30 Access to XMLHttpRequest at 'file:/..../dom.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Any idea what I'm doing wrong?

[@hyperspace2223]

That’s because you’re using a file, you need nodejs

[@filmlife1000]

@@hyperspace2223 Thanks for the reply - can't believe I used this over a year ago! I've changed to Scala now - haven't touched JS in ages :0

[@hyperspace2223]

@@filmlife1000 You're welcome :D

[@pedrosoares7273]

Very well explained, the most basic of basics. However, my chrome for some reason does not let me acess the files. " Access to XMLHttpRequest at 'file:///C:/XXX/XXXX/XXXXX/XXXX/dom.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." How to fix this?

[@Meleeman011]

put the file on a local server such as a node.js server or nginx/apache server. I think node is easiest, you could run a dev server with node server.js and have server.js serve your file to localhost:3333 or whatever port, reference that in your xhr.request and as long and you have your development server running you can locally test without a CORS issue.

[@nilavdas_3234]

Can we write the text file ?

[@harsheenajunejo2981]

Hi, How to store the XHR response as an array or JSON object by using javascript only. Can you please guide me on how to obtain that

[@dcode-software]

I have plenty of videos on that, for example: kzbin.info/www/bejne/jWexpHSFZZ2po6c

[@scallywagin]

Hey guys, im getting this error "Uncaught TypeError: Cannot set property 'textContent' of null at XMLHttpRequest.xhr.onreadystatechange", any idea? I literally copied Dom's exercise............

[@donaldklopper]

Clever example :-D there's no web server needed ...

[@intellsoft]

How do you send a XHR request to a Laravel controller and returns data to the view.

[@faizanmemon4956]

Thanks for a great video ! But please help me get rid of this : Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

[@dcode-software]

Thank you! For that issue, are you using the "file" protocol (reading from the disk directly rather than using a server)?

[@faizanmemon4956]

Can i use localhost using xammp ?

[@dcode-software]

Yeah! That will be fine - I believe for purposes of security you are unable to access local files using JavaScript, because then any website would be able to read the local files on your computer

[@faizanmemon4956]

Can i use files other than .txt ?

[@dcode-software]

Definitely, as far as I'm aware you can use whatever file you want, in fact you don't even need a file, as long as you have a HTTP response and some body content, you're OK

[@gokharol]

Could I pass on an external URL for instance xhr.open('get', 'www.google.com',true) ? I'm looking forward to get elements by ID in real internet pages, do you think I need "CORS" first hand?

[@gamersoul1098]

hiii could you solve cors error please tell me

[@pjmclenon]

hello my API keeps retruning HTML and so i cant run my search box to call the API do you know how to solve this issue? in your code i get null and so i have to comment out responseType line and then i just get HTML code in the console this is a sample API call @t thxz for any help i been trying to solve this myself and online for 3 weeks Lisa does anyone know the fix for this? i followed the code for fetch from david ceccia but i still get only HTML and so i will also get cant parse error < because thats the 1st caracter of an HTML page

[@md.imrulhasan8757]

I can't set ajax code in my system..... it doesn't work.... How can I fix ?

[@FordExplorer-rm6ew]

What are the 2 links at the top? What is KZbin.local? I've tried googling it but nothing's coming up conclusive

[@dcode-software]

It's setup locally: www.dummies.com/programming/networking/network-administration-the-hosts-file/

[@fahadhafeez8086]

Access to XMLHttpRequest at 'file:///D:/xampp/htdocs/dom.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, https. My console error!

[@souravdeb6126]

What is the editor, please?

[@dcode-software]

The editor is Atom

[@souravdeb6126]

I put the question and went out for a walk hoping that when I come back, someone might have put the answer so thank you!!

[@minach69]

Hi, nice video. I did exactly what you did and I get the below error. What do you think is the issue? mexico.js:29 Access to XMLHttpRequest at 'file:///C:/Users/imedi3/Documents/Web%20Reports/Mexico%20Triggers/prueba.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. (anonymous) @ mexico.js:29

[@dcode-software]

Cross-origin. You need to make sure the file you're trying to read is on the same origin (or server) as the origin that the JavaScript is running on

[@ZainNaeemOfficialdotcom]

Great explanation, thanks Dcode You save my time

[@glitchdigger]

This didn't even remotely work for me. Very odd.

dude, you need a soft touch keyboard! or move the mic away from the keyboard... LOL thx for the video

[@dcode-software]

😂😂

[@prasannaparthiban7050]

what is f*****in dada

[@mrchedda]

I'm trying to finish watching but your pretentious SUPER-DUPER tactile feedback , "I'm a real programmer", keyboard is annoying as $h!t3. You people think you're superior because your keyboard requires a million JOULES to type one letter. Terrible

[@dcode-software]

Nah mate, I just like the keyboard.

[@salexkorsan8790]

is there any way to get Outside result of the Function xmlhttp.onreadystatechange=function(){ } // i want result here Out side of the Function. trying to solve from two Month please help

[@slapmyfunkybass]

Firstly thanks for the video. To me though, it seems more logical to put the xhr open and send lines before the function. I have to admit I’ve never seen it done this way. But wouldn’t it make more sense to make the request, send it, then run the function to check all is okay and display? Of course it doesn’t matter as the function can sit anywhere, but in terms of logical programming wouldn’t that way round make more sense?

[@titikshaiyer4445]

Had the same thought

[@greatpandas99]

You're a lifesaver man, I really appreciate this. Thanks