AJAX: GET, POST, PUT and DELETE requests in Vanilla JavaScript Tutorial

Поділитися
Вставка
  • Опубліковано 15 гру 2024

КОМЕНТАРІ • 19

  • @OpenJavaScript
    @OpenJavaScript  2 роки тому

    Thanks for watching!
    👉 Source code: openjavascript.info/2022/08/04/get-post-put-delete-using-ajax-in-javascript/

  • @StevieB86
    @StevieB86 Рік тому +1

    Outstanding delivery. Thanks a lot for putting this together.

  • @XRAYPubgMobile
    @XRAYPubgMobile 11 місяців тому

    Bro this is so helpful. Explained in detail and i like how you explained how you can check each step.

  • @onelinkonelink1677
    @onelinkonelink1677 Рік тому +2

    Thank you very much ... straight to the point!
    a good idea is to make a video that will summarize all different implementations of AJAX(in JS , JQuery , Fetch API) in theory. i am beginner and this topics is very confusing for people like me. it took me several days of watching different videos for all methods to connect the dots in my mind lol.

    • @OpenJavaScript
      @OpenJavaScript  Рік тому +1

      Yes, can all be very confusing that there are so many different ways to do AJAX in JS.
      Will keep this in mind for a future video, or even a short series. Thanks for this idea and glad you found the vid useful :)

  • @salmaatef3678
    @salmaatef3678 4 місяці тому

    thank you so much, your explanation is great and simple 🥰

  • @lemillion1918
    @lemillion1918 2 роки тому +1

    thank's for the tutorial . That was help full for me

  • @lilith1247
    @lilith1247 2 роки тому

    hi man . i just wondering how to apply an apikey if the website asks while providing. for example there's a website about exchangeratesapi and gives you apikey and limited useage . it works with fetch , but i coudn't find anywhere about if i want to use especially with this method

    • @lilith1247
      @lilith1247 2 роки тому

      var myHeaders = new Headers();
      myHeaders.append("apikey", "APIKEYHERE-APIKEYHERE-APIKEYHERE");
      var requestOptions = {
      method: 'GET',
      redirect: 'follow',
      headers: myHeaders
      };
      fetch("-----://--websitelink----/convert?to= (FOR Example USD) to&from= (FOR Example EUR) from&amount=(xxxxx)amount", requestOptions)
      .then(response => response.text())
      .then(result => console.log(result))
      .catch(error => console.log('error', error));

    • @OpenJavaScript
      @OpenJavaScript  2 роки тому +1

      There's actually no difference in how you make the request with Fetch or AJAX: the key is part of the URL request string that you send to the API.
      So you should use the suggested URL string from the API documentation and use it with AJAX like:
      req.open('GET', 'example.com/api?key=your-test-key')
      The difference between these methods is how you handle it. Hopefully after watching the GET part of this tutorial you'll be able to handle that :)

  • @rod6fer
    @rod6fer 2 роки тому +1

    Can you do the same using PHP & MySQL?

    • @OpenJavaScript
      @OpenJavaScript  2 роки тому

      Yes, you can do this in PHP. But for that you'll need to check out a different channel as I'm focusing on JavaScript (and a little HTML and CSS)

    • @rtdev8512
      @rtdev8512 2 роки тому

      of course you can, since the ajax is just used for contacting server, sending requets and receiving response, without redirecting

    • @rod6fer
      @rod6fer 2 роки тому

      @@rtdev8512 So, what is the purpose of using AJAX? Does it make it "easier"? Do you write less code? What is the advantage or benefit of using AJAX if you can do it with PHP/MySQL?

    • @vasiovasio
      @vasiovasio Рік тому

      ​@@rod6fer The Only thing is it that the Browser does not refresh the whole page and make the GET or the POST request under the hood. Thats it!
      The idea is to Simulate Desktop apps with Near Instant reload, but in the reality the lack of the instant feedback, the user perceptions, the problems with the DOM and the xecution ruined all of this.
      Ajax is usefull for some small functionalities like a Like button where you like it Without to refresh the whole page, or Save to Favorites, or for Instant Search functionality, but for separates functionalities, not for the whole site.
      I have been writing PHP since 2000 and can tell you - all these Endless JS frameworks and Libraries and Modules and the Whole Insanity about it is a Mess!
      Continue with PHP and MySQL, find a clients, make a projects for them and make money, this is the Goal!

  • @alexcross3165
    @alexcross3165 Рік тому +1

    Fetch API is the way

    • @OpenJavaScript
      @OpenJavaScript  Рік тому

      I'm also a big fan of the Fetch API. But unfortunately, for now, tracking upload progress isn't possible and tracking download progress is possible but long-winded (see ua-cam.com/video/FAswtajB67E/v-deo.html).
      I'm hoping these features are introduced/made easier in the future. Then I think I'll use fetch all the time!