Learn XML HTTP Requests in JavaScript | AJAX Tutorial
HTML-код
- Опубликовано: 27 янв 2018
- XML Http Requests (AJAX) allows you to send and receive data from external files within your Javascript code without refreshing the page or re-running your script.
In this video we look at how to create a request and then download the data, inserting it into the HTML body.
For your reference:
developer.mozilla.org/en-US/d...
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 #javascript #webdev
UPDATE:
Learn how to use AJAX to load data from an external file straight into your HTML tables:
ruclips.net/video/12tjh_6xL2M/видео.html
Wow! I understand that syntax has changed but with your explaining my understanding has vastly improved so so much! Thankyou!
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! :)
Thank you 😁 and you're welcome
You're a lifesaver man, I really appreciate this. Thanks
Quick, clean and direct. Thanks.
watching this video in 2022, you sir is "GREAT".
it helped me a lot
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 :)
No worries mate 😁
@@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 😁
Great video. Concise and very informative
I learned quite a bit from your video - thanks much! It was excellent! :)
No problem 😁
Great tutorial! Thank you very much!
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
+Cương Trần Thank you! That means a lot - glad you enjoy 😁
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.
@
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.
absolutely positively brilliant example
Great video. Thanks a lot. I like your teaching style. Keep up the good work.
No worries mate, cheers!
beautiful explanation of XMLHTTPREQUEST( ); TYSM ❤
Thanx for making the video, I really needed this explanation.
No probs!
Thank you so much for this video. It helped me a lot.
Yeh no worries mate!
Thank you helped me out a lot!
No worries 😁
Thank you so much for this video!!
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.
No worries mate, using "xhr" over "this" depends on if you're using an arrow function or standard function
Your logo is beautifully designed
Thank you so much!!!! Just what I needed😊😊
No problem 👍
great explanation thx
Well done Right on the point, thanks
No dramas :)
Great video, helped a lot :)
All good, mate
Best XHR tutorial! Tried googling but couldn't find any helpful results.
Great content
Hey Dom , do you like to use the DOM ?
Hi there. Yes, I love using the DOM.
Y'all be using me raw. 😂
Readystates:
0 - unset
1 - opened
2 - headers_received
3 - loading
4 - done
Thank you sir!
Awesome video! :D
You're welcome mate 😁
Amazing explanation :D
Thank you mate, glad it helped
@@dcode-software Just saw few of your videos and your explanations are really good,Hope it grows :)
can you make just like this one but if you click a button it will function the XML HTTP Requests
You deserve a subscribe. BTW which theme you are using in atom?
thank you man....
Great!
I've only used JSON until now one of the APIs I use supports both any reason to chose one over the other?
gr8 video sir
Thank you mate, glad it could help you
Good tutorial
Thanks mate! Glad you liked it
ID on the keyboard, switches and keycaps you’re using?
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!!!
Thanks
what type of data can be returned by the xmlhttprequest object?
Perfect :d
THANK YOU THANK YOU SO MUCH SIR 👑👑👑👑👑🇮🇳😀
You're welcome! Heads up - once you have learnt AJAX, I recommend using Fetch 🙂
gracias! :D
No worries mate!
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.
i saw one youtuber he was able to use file from local storage without cors error
so is there any solution for cors error with out node.js ?
hows it going my name is Don - that standard tone in every video is a killer haha
Looooooool
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?
Had the same thought
Thanks a lot. But I'd like to know what the header is, plz.
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?
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
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............
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"
and I found that I just forgot to add the if statement about "Readystate ==4"
when i add it everything go well
AJAX only works in server , not in local directories
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?
How do you send a XHR request to a Laravel controller and returns data to the view.
Failed to load response data. No data found for resource with given identifier.
I ran the same code on my file system and i get a CORS error. How can i resolve this issue?
I have the same issue
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.
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.
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.
I wrote like this but , did work
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!
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?
That’s because you’re using a file, you need nodejs
@@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
@@filmlife1000 You're welcome :D
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?
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.
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?
hiii could you solve cors error please tell me
Can we write the text file ?
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
I have plenty of videos on that, for example:
ruclips.net/video/W6NsAO08vmE/видео.html
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.
What are the 2 links at the top? What is RUclips.local? I've tried googling it but nothing's coming up conclusive
It's setup locally:
www.dummies.com/programming/networking/network-administration-the-hosts-file/
I can't set ajax code in my system..... it doesn't work.... How can I fix ?
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
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
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.
Thank you! For that issue, are you using the "file" protocol (reading from the disk directly rather than using a server)?
Can i use localhost using xammp ?
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
Can i use files other than .txt ?
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
What is the editor, please?
The editor is Atom
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!!
Clever example :-D there's no web server needed ...
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
😂😂
what is f*****in dada
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
Nah mate, I just like the keyboard.
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
You're a lifesaver man, I really appreciate this. Thanks