AJAX with XMLHttpRequest

Поделиться
HTML-код
  • Опубликовано: 29 июн 2024
  • This video covers the old standard for making AJAX requests - XMLHttpRequest. Before fetch was supported in the browsers, this was the standard way of making AJAX calls. If you have to support older browsers like IE 8 or 9 then this will be the method that you have to use to make your AJAX calls.
    Sample Code GIST: gist.github.com/prof3ssorSt3v...
    JSONPlaceHolder: jsonplaceholder.typicode.com/
    List of HTTP Response Status Codes: developer.mozilla.org/en-US/d...

Комментарии • 37

  • @mackenmd
    @mackenmd 4 года назад +3

    Steve, yet another great superbly explained video. Thank you!

  • @Coxander
    @Coxander 4 года назад

    Once again, your lecture is great! Thank you

  • @AbdulRauf-xd7yx
    @AbdulRauf-xd7yx 4 года назад

    Steve, You are awesome.

  • @younessflouach7640
    @younessflouach7640 Год назад

    Appreciate your work Professor

  • @rorygrignard9742
    @rorygrignard9742 2 года назад

    Saved my bacon yet again - thanks Steve!

  • @MrSalFav
    @MrSalFav 2 года назад

    Thank you !

  • @neatpolygons8500
    @neatpolygons8500 3 года назад

    Thanks loads. I couldn't use JQuery inside web workers and this looks pretty promising

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +1

      I have a playlist called JQuery Rehab - ruclips.net/video/J_Q8EYXKzQs/видео.html
      Which explains how to do things that used to be done with jQuery using vanilla JS. It includes a video specifically about using fetch instead of the jQuery ajax methods.

    • @neatpolygons8500
      @neatpolygons8500 3 года назад

      @@SteveGriffith-Prof3ssorSt3v3 this is awesome! And accurate. When I started doing webdev I was in a hurry and coming from other fields. Now that I started learning how things work I really do need a jQuery rehab.

  • @justinlu5730
    @justinlu5730 3 года назад

    good video

  • @aminomar7890
    @aminomar7890 3 года назад +1

    How to handle the POST request body in Node.js without using a framework?

  • @RAVINDERSINGH-ht6pl
    @RAVINDERSINGH-ht6pl 4 года назад

    Hi Steve, can you tell more about history of XMLHttpRequest object and origin of Ajax i.e how this XHR Object was recommended and how bowser vendor implemented these concepts.

  • @canallucasrocha
    @canallucasrocha 4 года назад

    Tenho uma aplicação que montei onde a base só está em Javascript, é uma inclusão de uma página html em outra, como im include com XMLHttpRequest(), mais ao incluir uma pagina que tenha alguma aplicação JS contina nela quamdo é feita a a inclusão o JS para, existe alguma alternativa de como resposta também a aplicação JS para que continue funcionando após a inclusão?!?!?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад +1

      It's best if you can keep the HTML and the JS separate. Use fetch / XMLHttpRequest to load the HTML. Then, if needed, use JS to create a tag and load the JS for the new content. I have this video on loading XML with fetch() - ruclips.net/video/MDAWie2Sicc/видео.html - it works for loading HTML too.
      Try to load the HTML without the JS. Handle them separately.

    • @canallucasrocha
      @canallucasrocha 4 года назад

      ​@@SteveGriffith-Prof3ssorSt3v3
      I do not work with fetch, actually made include as xmlhttprequest () more time to run the js page, did not happen, but I am grateful for the attention and quick response.

    • @canallucasrocha
      @canallucasrocha 4 года назад

      @@SteveGriffith-Prof3ssorSt3v3 consegui fazer o que me indicou, e deu super certo, mais o por que não funciona o Javascript hospedado em paginas html, e os que ficam fora funcionam normal?!?!
      existe uma alternativa para fazer funcionar no arquivo html???

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      What JS can and cannot do changes depending on what code you are trying to run and on which environment you are running it on. Different browsers can support different features from different versions of JS.

  • @Pengoled
    @Pengoled 3 года назад

    Hi Steve, why did we get back { "id": 11 } as the responseText when using post? I understand it's the new id of the new object, but why we got the id back, and not for example, the firstName and lastName? thank you!

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +1

      POST is simulating the creation of a new object. When you create the object you should only need the new information. In this case, the id.

    • @Pengoled
      @Pengoled 3 года назад

      @@SteveGriffith-Prof3ssorSt3v3 ok, so does the server create a new id automatically each time we run our code and create a new object? Sorry for my confusion...

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +1

      @@Pengoled that website is a simulation. What the server does depends on the code that you write on the server

    • @Pengoled
      @Pengoled 3 года назад

      @@SteveGriffith-Prof3ssorSt3v3 I think my confusion is where did the { id: 11 } came from? obviously it came as a response from the server after POST, but where can we see the code on the server that triggered the 'id' specifically? thank u so much!

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +1

      @@Pengoled You can't. That is their server. You can't see the server side code from the browser.
      If you are looking to learn server-side code, I have playlists on server-side NodeJS, PHP, Express, and MySQL

  • @RAVINDERSINGH-ht6pl
    @RAVINDERSINGH-ht6pl 3 года назад

    Hi Steve,
    How and when this onreadystate event is fired and why do we write send() at the end.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад

      The readystate event is fired by the XMLHttpRequest object as it goes through the different phases. 0 - not sent... 1, 2, 3,... 4 - ready
      The send( ) method is what starts the actual AJAX call.

    • @RAVINDERSINGH-ht6pl
      @RAVINDERSINGH-ht6pl 3 года назад

      @@SteveGriffith-Prof3ssorSt3v3 I was meant why we write send() function at the last statement though things starts from it. As I think when the send() function is called then only we receive the contents back from server.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад

      @@RAVINDERSINGH-ht6pl send is sending the request from the browser to the server. Open is just preparing the request. Nothing goes to the server until send. Then you start to wait for a response.

    • @RAVINDERSINGH-ht6pl
      @RAVINDERSINGH-ht6pl 3 года назад

      @@SteveGriffith-Prof3ssorSt3v3 I think for me confusion is the order in which codes are appearing, as before sending the request(calling send() function) we have event listeners for xmlhttprequest.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад

      @@RAVINDERSINGH-ht6pl we add the listeners first in case the response is cached and comes back before we can add listeners after send

  • @brigetokai3756
    @brigetokai3756 4 года назад

    hI STEVE please can u do videos on electronJS with mysql database please

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      Please add your request to the comments on my Tutorial Request Video. That is where I keep track of all the requests.

  • @meghalbisht6768
    @meghalbisht6768 2 года назад

    Inline script tag cannot be deferred.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 года назад

      Nope. It is an element attribute so no way to do it.
      But inline scripts should be avoided anyway.