How to convert a simple jQuery code to Javascript?

[PWaddict]

How to properly convert the below simple jQuery code to vanilla Javascript?

$.post('../my-url/', { test: response.test })
  .done(function(data) {
  $('#output').html(data);
});

 

[kongondo]

I don't know . But this is what Google says . I trust Google 100% (), so this must be correct. OK, so, it's StackOverflow. I trust SO ....

<script type="text/javascript">
function loadXMLDoc() {
    var params = "lorem=ipsum&name=binny";// your data to the server
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("output").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("POST", '../my-url/', true);
    xmlhttp.send(params);
}
</script>

source

[PWaddict]

Here is how I did it

var xhr = new XMLHttpRequest();
xhr.open('POST', '../my-url/', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('output').innerHTML = this.responseText;
    }
};

xhr.send('test=' + response.test + '');

 

[Zeka]

@PWaddict Here is very useful site http://youmightnotneedjquery.com/ that you want to visit when you try to convert jQuery to vanilla.

 

[flydev]

https://github.com/nefe/You-Dont-Need-jQuery

[lokomotivan]

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

[Christophe]

http://zeptojs.com/ | http://vanilla-js.com/

[thetuningspoon]

Sorry to say, whenever I see the vanilla JS alternatives to jQuery, it reminds me why I still use jQuery 

[dragan]

5 hours ago, thetuningspoon said:

Sorry to say, whenever I see the vanilla JS alternatives to jQuery, it reminds me why I still use jQuery 

I fully understand.

I'm considering to include D3-selection to the stack, because it has the same un-verbose, compact selector engine.

https://github.com/d3/d3-selection

 

 

[LostKobrakai]

8 hours ago, thetuningspoon said:

Sorry to say, whenever I see the vanilla JS alternatives to jQuery, it reminds me why I still use jQuery 

Imo the overall backlash on jQuery is less about jQuery vs. vanilla, but jQuery vs. less messy abstractions. For ajax there's no need for jQuery anymore with other libraries taking their turn being just as good without being bundled with all the other jQuery stuff. And for DOM manipulations I feel twofold: For simple stuff jQuery is hardly shorter/easier to write than vanilla js + 2 or 3 small helper libraries (e.g. for event delegation) and for everything more advanced jQuery code most of the time is just a mess of one-off manipulations and implementation details mixed with a bunch of event callbacks. These are the places where I feel react / vue / ember or for a really vanilla feel svelte are far better equipped. 

[thetuningspoon]

2 hours ago, LostKobrakai said:

Imo the overall backlash on jQuery is less about jQuery vs. vanilla, but jQuery vs. less messy abstractions. For ajax there's no need for jQuery anymore with other libraries taking their turn being just as good without being bundled with all the other jQuery stuff. And for DOM manipulations I feel twofold: For simple stuff jQuery is hardly shorter/easier to write than vanilla js + 2 or 3 small helper libraries (e.g. for event delegation) and for everything more advanced jQuery code most of the time is just a mess of one-off manipulations and implementation details mixed with a bunch of event callbacks. These are the places where I feel react / vue / ember or for a really vanilla feel svelte are far better equipped. 

I get that, but if everyone is using their own helper libraries and different frameworks, you lose the great jQuery ecosystem and all the plugins and libraries built on top of it. You could end up having to include a bunch of code from different libraries that are doing the same thing in order to use the existing solutions you want. That feels like a step backward to me.

I don't see why jQuery can't just be retooled so that it's using newer, faster technology under the hood, with the same compact, standardized api on the front end. Maybe have a legacy jQuery and a new, slimmer jQuery for those that don't need old browser support.

Regarding jQuery and more advanced JS applications, I don't think jQuery should be thought of as competing against vue or react. It's at a lower level in the stack. It doesn't impose structure on your application, but that doesn't mean it prevents you from creating your own structure. 

Disclaimer: These are just my feelings as a developer who is still trying to build my applications largely server-side, where my ajax calls usually return blocks of html encoded within JSON instead of pure data structures. This keeps all rendering and business logic server side in order to keep the application code simple and DRY. Not sure if I really know enough about what I'm talking about when it comes to the new client-side development paradigm. I feel like both are reasonable approaches to development (depending on the application's requirements). It's when you don't choose one or the other that things really get messy and WET.

[StanLindsey]

There are so many ways to skin a cat in Javascript, especially considering how far Javascript has came in recent years. You really don't need jQuery at all. It is also good to learn the Javascript core as to expand your skill set as well as remove a dependency on your project.

Some of the posts here are way out of date and verbose. Native Fetch is much better than XMLHttpRequest, and there are some polyfills online if you need IE11 support.

fetch('../my-url/', {
    method: 'post',
    body: JSON.stringify({ test: response.test })
}).then(response => {
  return response.json();
}).then(json => {
  document.querySelector('#output').innerHTML = json.test;
});

Read more here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 

And there are a bunch of good basic examples here: https://github.com/mdn/fetch-examples/tree/master/fetch-json