Stripes and Ajax- How do i send data to a server and refresh a table with data using AJAX

Question

I was surfing the web how to use AJAX with Stripes and found this. However the documentation explains using Prototype framework as a client side script. Not Javascript. But I want to use javascript instead.

I think this block uses Prototype library.

<script type="text/javascript"
              src="${pageContext.request.contextPath}/ajax/prototype.js"></script>
      <script type="text/javascript" xml:space="preserve">
          /* ... */
          function invoke(form, event, container) {
              if (!form.onsubmit) { form.onsubmit = function() { return false } };
              var params = Form.serialize(form, {submit:event});
              new Ajax.Updater(container, form.action, {method:'post', parameters:params});
          }
      </script>

How can I change it to javascript? Or did I misunderstood something. My main aim is when a user clicks a button I want to send that data to the server and display it on a table without refreshing the whole page. I have an ActionBean who will save the data.

Thank you.

Answer 1

If you are not going to import a library (which I would recommend, because this code can be a little heavy for non-JS programmers) then you'll need to build the XMLHttpRequest object yourself. There is a good guide over at MDN that covers the basics, but it is generally done like so:

// Build the object
var httpRequest;  
if (window.XMLHttpRequest) { // Mozilla, Safari, ...  
    httpRequest = new XMLHttpRequest();  
} else if (window.ActiveXObject) { // IE 8 and older  
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
}
// Add the function for handling changes to state
httpRequest.onreadystatechange = function () {
    // Check the state of the request
    if (httpRequest.readyState === 4) {
        // The server has finished sending data and we are ready to handle it
        if(httpRequest.status < 400) {
            // Request was successful, Put your code for handling the response here
            // String of what the response was will be in httpRequest.responseText
        } else {
            // Request was not successful, probably want to display an error
        }
    } else {
        // Response is still being received and is not quite ready yet.
    }
}
// Now that we can handle it, we want to send the request
httpRequest.open("GET", "http://example.com");
// Don't forget to send it :)
httpRequest.send();

As you can see, it isn't the easiest code. I'd highly recommend reading through the MDN page on the subject, because it will help you understand the code above. It can help you do more things with this, like send data along with your request. Not that serializing and submitting a form here is more than my example above does. If you want to submit a form, you'll want to make sure to read through the article thoroughly.

Why I recommend a JS library like Prototype or jQuery is because they make all of this (and more) a lot simpler.