现代web应用程序/网站如何进行回发?javascript/ajax,<form>还是X?

我倾向于使用 ,其中从正常的 <form>

下面是一个简单的示例(为了简洁起见,jQuery):

<form type="POST" action="myPage.htm">
  <input type="text" name="UserName" />
  <button type="submit">Submit me!</button>
</form>

(大多数人会)我能做到:

$(function() {
  $("form").submit(function() {
    $.ajax({ 
      url: this.action,
      type: this.type,
      data: $(this).serialize(),
      success: function(data) {
        //do something with the result
      }
    });
  });
});

这允许优雅的降级,这可能非常重要(我想这取决于你的态度/客户群)。我试着不要在没有JavaScript的情况下欺骗用户,或者如果JavaScript错误发生在我身上,你可以从上面看到,这可以很容易/一般地做到,也不会很痛苦。

如果您对内容感兴趣,可以在服务器上检查 X-Requested-With 来自大多数库的头文件,如果存在,只返回 <表格>

它会因具体操作的不同而有所不同,但大多数web应用程序会将AJAX与“老式”表单相结合,前者用于短内容(尤其是实时/交互式更新在不需要页面刷新的情况下很有帮助),后者用于长内容,而整页加载不是问题。

还要注意的是,从驱动服务器应用程序的代码的角度来看,来自标准表单的请求和来自AJAX提交的请求之间不一定有太大的区别。您可以轻松地构造一个脚本来正确响应这两种类型的请求(尽管在某些情况下,您可以通过向AJAX版本发送一个较短的“仅数据”响应来节省带宽,因为客户端代码可以负责将数据解析为有意义的内容)。

传统的表单模型将表单回发用于每个需要转到服务器的操作,并且可以使用javascript执行客户端任务,这些任务可以在不影响安全性的情况下简化用户的生活(例如,回发前验证)。这样做的好处是,这样一个web应用程序如果编写正确,完全不需要任何javascript就可以工作,而且更容易在各种设备(例如音频浏览器)上工作。

以服务器为中心的ajax模型使用ajax调用提供部分页面刷新;页面的构建与传统模型类似,但是客户端脚本没有触发完整的页面回发,而是使用ajax调用发送单击和其他事件,并检索信息来替换文档的一部分(通常是JSON或XHTML格式)。因为你不是每次都发布整个页面,所以回复通常更快。如果您希望在可能的情况下使用ajax,但是如果javascript不可用,仍然希望能够退回到传统的回发,那么这个模型非常有用。

大多数体面的web应用程序都试图

增强可以通过使用 hijaxing . 这意味着在ajax的帮助下,同一个页面可以执行表单发布到服务器,但不能执行整个页面。这使得启用了javascript的用户能够获得更好的用户体验。

旧式标签还是使用某种javascript/ajax实现?

为了让javascript在一些东西上工作,你仍然需要一些老式的标签。Web应用程序可分为3个主要部分:

• 布局:CSS
• 行为:javascript/ajax