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

👉 Source code: openjavascript...
⚡ Looking for high-performance, afforable web hosting? We use HostWithLove: bit.ly/3V2RM9Q ❤️
How to make GET, POST, PUT and DELETE types of HTTP request using AJAX in vanilla JavaScript.
#ajax #httprequest #javascript #javascript_tutorial #webdevelopment
🔔 Subscribe for more tutorials just like this: / @openjavascript

[@OpenJavaScript]

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

[@salmaatef3678]

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

[@StevieB86]

Outstanding delivery. Thanks a lot for putting this together.

[@OpenJavaScript]

Thank you! Glad you liked it.

[@onelinkonelink1677]

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]

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 :)

[@XRAYPubgMobile]

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

[@lemillion1918]

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

[@OpenJavaScript]

That's great :)

[@alexcross3165]

Fetch API is the way

[@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 ruclips.net/video/FAswtajB67E/видео.html).
I'm hoping these features are introduced/made easier in the future. Then I think I'll use fetch all the time!

[@lilith1247]

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]

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]

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]

Can you do the same using PHP & MySQL?

[@OpenJavaScript]

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]

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

[@rod6fer]

@@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]

​@@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!