当我们有AJAX时,为什么需要<form />？

Question

我刚刚开始学习JavaScript,在我的项目中,我发现无论何处使用表单,都可以使用AJAX.

一个简单的例子是:

<form id="demo_form" action="demo" method="post">
    <input type="text" name="username">
    <input type="submit" value="Submit">
</form>

而ajax可以像这样使用:

$('#demo_form input[type="submit"]').click(function(){    
    $.ajax({
        type: "POST",
        url: "/demo",
        dataType: "text",
        data: {
            username: $('#demo_form input[name="username"]').val()
        }
    });
});

ajax的一个优点是它可以是异步的,我发现它真的很甜,因为你在等待服务器的响应时仍然可以做其他事情,并且可能保留当前页面并且不会丢失你的输入.(当我提交表单,我必须将所有输入传输到服务器并再次返回到界面,然后丢失它们.

由于表格现在仍然使用和流行,我想它有一些我不知道的优点.

Answer 1

首先,该<form>元素早于Ajax调用多年.Ajax调用(如果你调用它们会更好XMLHttpRequest)是Internet Explorer中的一个附加功能,可以从JavaScript加载/发布数据.

也许最重要的是,如果你停止支持任何<form>元素,或者 XMLHttpRequest你基本上打破了所有现有的网站.

除了需要使用JavaScript来发出XMLHttpRequest调用(JavaScript并不总是可用)之外,还存在功能和语义差异:

• HTML表单在语义上对输入元素进行分组(否则,您如何知道哪些输入元素属于一起？)
• 它们支持一些功能,如文件上传,直到最近才被JavaScript支持(你无法读取文件上传字段中的文件内容)
• 表单知道如何序列化输入字段(JavaScript库,如jQuery重新实现这个逻辑,通过浏览器免费提供)
• 表单不受CORS限制的影响(即它们可以发布到任何服务器;而XMLHttpRequest需要特殊的服务器端配置)
• 表单具有内置的用户界面功能,例如按Enter/return键提交.
• 表单可以使用不同的字符集和编码(通过accept-charset属性)发布数据,这在JavaScript中非常困难(在JavaScript中,所有字符串都是Unicode)

XMLHttpRequest当然可以做表单不能的事情,例如设置HTTP标头,可以使用更多的HTTP动词(不仅仅是post和get),正如你所提到的那样,它们可以是异步的,并且它们还有一个可以对其作出反应的极大扩展的事件范围.

这两种技术都取而代之,取决于您希望实现的目标.