• Friday , 20 September 2019

Learn XML HTTP Requests in JavaScript | AJAX Tutorial

Code Canyon



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:
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

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!

Original source

3d Ocean

Related Posts

23 Comments

  1. dcode
    September 9, 2019 at 04:33

    UPDATE:

    Learn how to use AJAX to load data from an external file straight into your HTML tables:
    https://www.youtube.com/watch?v=12tjh_6xL2M

  2. George Fikri
    September 9, 2019 at 04:33

    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 🙂

  3. filmlife1000
    September 9, 2019 at 04:33

    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?

  4. Ignacio Medina
    September 9, 2019 at 04:33

    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

  5. Bryant Gold
    September 9, 2019 at 04:33

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

  6. m.nageh
    September 9, 2019 at 04:33

    can someone kill me pls ?!!
    why this shit doesn't work with me !!!!!!!!!!
    https://stackoverflow.com/questions/56744800/why-alert-didnt-work-in-a-http-onload-from-an-xmlhttprequest

  7. moddingdudes
    September 9, 2019 at 04:33

    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.

  8. Ryan James
    September 9, 2019 at 04:33

    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

  9. _true_ _APEX_
    September 9, 2019 at 04:33

    Good tutorial

  10. Co4esive T7
    September 9, 2019 at 04:33

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

  11. shiyoh goetsu
    September 9, 2019 at 04:33

    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"

  12. Galbeeyutd Mok
    September 9, 2019 at 04:33

    Hey Dom , do you like to use the DOM ?

  13. David Tsiklauri
    September 9, 2019 at 04:33

    Perfect :d

  14. Deb Sourav
    September 9, 2019 at 04:33

    What is the editor, please?

  15. Devron Tombacco
    September 9, 2019 at 04:33

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

  16. Sebastian Almqvist
    September 9, 2019 at 04:33

    Awesome video! 😀

  17. Yash Kashyap
    September 9, 2019 at 04:33

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

  18. adriansun2999
    September 9, 2019 at 04:33

    Good but you are no longer allowed to make xhr requests sync (false parameter). See console error infor in chrome for more information. We have to use Worker.class to do this. Im not sure how to solve it. Would be great to get another video about it.

  19. plopnow
    September 9, 2019 at 04:33

    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! 🙂

  20. Ernie Massei
    September 9, 2019 at 04:33

    Thank you helped me out a lot!

  21. Royal Bhati
    September 9, 2019 at 04:33

    Amazing explanation 😀

  22. slapmyfunkybass
    September 9, 2019 at 04:33

    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?

Leave A Comment

You must be logged in to post a comment.