Stripes 和 Ajax - 如何使用 AJAX 将数据发送到服务器并用数据刷新表

Question

我在网上浏览如何将 AJAX 与 Stripes 结合使用，并找到了这个。然而，文档解释了使用原型框架作为客户端脚本。不是 JavaScript。但我想用javascript代替。

我认为这个块使用了原型库。

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

我怎样才能将其更改为javascript？或者我误解了什么。 我的主要目标是，当用户单击按钮时，我想将该数据发送到服务器并将其显示在表格上，而不刷新整个页面。我有一个 ActionBean 来保存数据。

谢谢。

Answer 1

如果您不打算导入库（我建议这样做，因为此代码对于非 JS 程序员来说可能有点繁重），那么您需要自己构建 XMLHttpRequest 对象。 MDN 上有一个很好的指南，涵盖了基础知识，但通常是这样做的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();

如您所见，这不是最简单的代码。我强烈建议您仔细阅读有关该主题的 MDN 页面，因为它会对您有所帮助理解上面的代码。它可以帮助您执行更多操作，例如随请求一起发送数据。并不是说这里的序列化和提交表单比我上面的示例更多。如果您想提交表格，您需要确保彻底阅读该文章。

我为什么推荐像 Prototype 或 jQuery 这样的 JS 库，因为它们使所有这些（以及更多）变得更加简单。