Stripes和Ajax-如何使用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.