【译】通过JavaScript发送表单

头像
Levon
    阅读 8 分钟
    1

    在[发送表单数据]()一文中，HTML表单可以声明式地发送一个HTTP请求。但表单也可以用JavaScript来准备一个HTTP请求。本文将探索如何做到这点。

    表单，不只是表单

    随着开放式Web应用的出现，现在提供HTML表单、而不是文字表单供用户填写的做法，已经越发普遍了。而越来越多的开发者也获得了数据传输的控制权。

    获得对数据传输的控制权

    标准的HTML表单提交操作会加载数据发送到的URL，这就意味着浏览器的窗口中会进行整个页面的重新加载。而如果避免了页面的重新加载，就会避免页面的闪烁和网络延迟，进而提供更顺畅的用户体验。

    在许多现代的UI设计中，HTML表单只是用来收集用户的输入。当用户要发送数据时，Web应用会进行控制，并在后台异步地发送数据，只更新UI中需要更改的部分。

    能异步地发送任意数据的技术称为AJAX，表示“异步的JavaScript和XML”。

    和传统表单处理的不同

    AJAX使用了XMLHttpRequest(XHR)DOM对象，它可以建立HTTP请求、发送请求并处理结果。

    注意： 老的AJAX技术可能不是用XMLHttpRequest。比如JSONP和eval()函数结合起来使用。虽然该方法可行，但不推荐使用它，因为其存在严重的安全问题。所以除非为了兼容那些特别老旧、不支持XMLHttpRequest或JSON的浏览器，还是避免使用该技术。

    由于历史原因，XMLHttpRequest本是设计用来获取和发送交换格式为XML的数据的。但现在JSON取代了XML，有着更普遍的使用。

    不过XML和JSON都不符合作为表单数据请求的编码。表单数据（application/x-www-form-urlencoded）是用于构造键值对的URL编码列表的，若是要传输二进制数据，HTTP请求会被重塑为 multipart/form-data。

    若你能掌控前端（运行在浏览器上的代码）和后端（运行在服务器上的代码），你就能发送JSON或XML、并随心所欲地处理它们。

    但如果你使用的是第三方服务，这就没那么容易了，因为某些服务只接受表单数据。当然也有使用表单数据处理起来更方便的情况，比如数据是键值对或二进制数据时，用现成的后端工具就能处理它们、不需要额外的代码。

    那么，具体该如何发送数据呢？

    发送表单数据

    目前有三种方式来发送表单数据，既有老旧的技术、也有新特性FormData对象，接下来就来深入了解下它们。

    在隐藏的iframe中构建DOM

    发送表单数据最古老的方法，是用DOM API建立一个表单，然后发送数据到一个隐藏的<iframe>。为了访问你提交内容的处理结果，应检索下<iframe>的内容。

    警告：避免使用该技术。在使用第三方服务时，该技术有安全风险，因为它会导致你面临脚本注入攻击。若你使用HTTPS，使用<ifrme>发送表单还会影响同源策略，并导致内容被发送到一个无法访问的<ifrme>中。当然如果你要兼容很老旧的浏览器，这项技术可能就是你唯一的选择了。

    下面是一个例子：

    <button onclick="sendData({test:'ok'})">Click Me!</button>
    // 创建一个iFrame来发送我们的数据
var iframe = document.createElement("iframe");
iframe.name = "myTarget";

// 将iFrame添加到文档流中
window.addEventListener("load", function () {
  iframe.style.display = "none";
  document.body.appendChild(iframe);
});

// 用来发送数据的函数
// 需要一个参数，是一个由键值对组成的对象
function sendData(data) {
  var name,
      form = document.createElement("form"),
      node = document.createElement("input");

  // 定义响应加载时的行为
  iframe.addEventListener("load", function () {
    alert("Yeah! Data sent.");
  });
    
  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
  form.target = iframe.name;

  for(name in data) {
    node.name  = name;
    node.value = data[name].toString();
    form.appendChild(node.cloneNode());
  }

  // 要发送数据，表单得添加到文档流中
  form.style.display = "none";
  document.body.appendChild(form);

  form.submit();

  // 表单一发送就移除它
  document.body.removeChild(form);
}

    结果如下：
    效果

    手动创建一个XMLHttpRequest

    XMLHttpRequest是发送HTTP请求最安全和可靠的方式。要想用XMLHttpRequest发送表单数据，得先用URL编码要发送的数据，并遵循表单数据请求的规范。

    注意： 若想了解更多关于XMLHttpRequest，这几篇文章可能对你有用：An introductory article to AJAX，以及一个关于使用XMLHttpRequest的高级教程。

    来重构下我们先前的例子：

    <button type="button" onclick="sendData({test:'ok'})">Click Me!</button>

    如你所见，HTML部分并未真的有所改变，但JavaScript部分就完全不同了：

    function sendData(data) {
  var XHR = new XMLHttpRequest();
  var urlEncodedData = "";
  var urlEncodedDataPairs = [];
  var name;

  // 将data对象转为一个URL编码的键值对数组
  for(name in data) {
    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  }

  // 将键值对组合成一个字符串，并把所有经过URL编码的空格替换为'+'号；以符合浏览器表单提交的行为
  // the '+' character; matches the behaviour of browser form submissions.
  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

  // 定义成功的数据提交后会发生什么
  XHR.addEventListener('load', function(event) {
    alert('Yeah! Data sent and response loaded.');
  });

  // 定义失败的情况会发生什么
  XHR.addEventListener('error', function(event) {
    alert('Oups! Something goes wrong.');
  });

  // 配置请求
  XHR.open('POST', 'https://example.com/cors.php');

  // 添加表单数据POST请求所需的HTTP请求头
  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // 最后，发送数据
  XHR.send(urlEncodedData);
}

    结果如下：
    效果

    注意： 若你想使用此处的XMLHttpRequest方法发送数据到第三方网站，也会受到同源策略的限制。要实现跨域请求，还需要CORS和HTTP访问控制。

    使用XMLHttpRequest和FormData对象

    手动构建HTTP请求是挺麻烦的，幸运的是，最近的一项XMLHttpRequest标准提供了一个处理表单请求的简便方法--FormData对象。

    FormData对象可被用来建立要传输的表单数据，或者从表单元素中获取数据来管理如何发送。要注意FormData对象是“只写”的，这意味着你可以改变它们、但不能访问它们的内容。

    使用FormData对象的方法会在[使用FormData对象]()一文中详细介绍，下面有两个例子：

    使用独立的FormData对象

    <button type="button" onclick="sendData({test:'ok'})">Click Me!</button>

    现在你该很熟悉这个HTML的样子了。

    function sendData(data) {
  var XHR = new XMLHttpRequest();
  var FD  = new FormData();

  // 将数据添加到FormData对象中
  for(name in data) {
    FD.append(name, data[name]);
  }

  // 定义成功的数据提交后会发生什么
  XHR.addEventListener('load', function(event) {
    alert('Yeah! Data sent and response loaded.');
  });

  // 定义失败的情况会发生什么
  XHR.addEventListener('error', function(event) {
    alert('Oups! Something went wrong.');
  });

  // 配置请求
  XHR.open('POST', 'https://example.com/cors.php');

  // 发送FormData对象，HTTP头会自动设置
  XHR.send(FD);
}

    结果如下：
    效果

    将FormData绑到表单元素上使用

    你也可以将FormData对象绑定到一个表单元素上，这样做会创建一个FormData对象来表示表单中的数据。

    HTML是典型的表单：

    <form id="myForm">
  <label for="myName">Send me your name:</label>
  <input id="myName" name="name" value="John">
  <input type="submit" value="Send Me!">
</form>

    但JavaScript会接管表单的提交操作：

    window.addEventListener("load", function () {
  function sendData() {
    var XHR = new XMLHttpRequest();

    // 绑定FormData对象和表单元素
    var FD = new FormData(form);

    // 定义成功的数据提交后会发生什么
    XHR.addEventListener("load", function(event) {
      alert(event.target.responseText);
    });

    // 定义失败的情况会发生什么
    XHR.addEventListener("error", function(event) {
      alert('Oups! Something goes wrong.');
    });

    // 配置请求
    XHR.open("POST", "https://example.com/cors.php");

    // 发送的数据是用户在表单中提供的
    XHR.send(FD);
  }
 
  // 访问表单元素
  var form = document.getElementById("myForm");

  // 并接管其submit事件
  form.addEventListener("submit", function (event) {
    event.preventDefault();

    sendData();
  });
});

    结果如下：
    效果

    处理二进制数据

    若你在一个含有<input type="file">组件的表单中使用FormData对象，那么数据会被自动处理。但要手动发送二进制数据的话，还有很多额外工作要做。

    现代Web有很多二进制数据源：比如FileReader、Canvas、WebRTC。但不幸的是，某些老旧浏览器不能访问二进制数据或者需要复杂的方法才能实现。这些遗留的问题已不在本文讨论范围之内。若你想了解更多关于FileReader API，请阅读Using files from web applications。

    用FormData来发送二进制是很直接的，使用append()方法就好了。但要手动做到这点，就需要一些技巧了。

    在下面的例子中，我们会用来FileReader API来访问二进制数据，然后手动建立多部分的表单数据请求。

    <form id="myForm">
  <p>
    <label for="i1">text data:</label>
    <input id="i1" name="myText" value="Some text data">
  </p>
  <p>
    <label for="i2">file data:</label>
    <input id="i2" name="myFile" type="file">
  </p>
  <button>Send Me!</button>
</form>

    如你所见，HTML用了标准的<form>，这没什么神奇的。“神奇”的部分在JavaScript里：

    // 由于我们要访问DOM结点，所以得在页面加载完后才初始化脚本
window.addEventListener('load', function () {

  // 这些变量用来存储表单数据
  var text = document.getElementById("i1");
  var file = {
        dom    : document.getElementById("i2"),
        binary : null
      };
 
  // 使用FileReader API来访问文件内容
  var reader = new FileReader();

  // 由于FileReader是异步的，所以得在其完成文件读取后才存储结果
  reader.addEventListener("load", function () {
    file.binary = reader.result;
  });

  // 在页面加载时，若已经选择了文件就直接读取它
  if(file.dom.files[0]) {
    reader.readAsBinaryString(file.dom.files[0]);
  }

  // 否则在用户选择文件时再读取它
  file.dom.addEventListener("change", function () {
    if(reader.readyState === FileReader.LOADING) {
      reader.abort();
    }
    
    reader.readAsBinaryString(file.dom.files[0]);
  });

  // sendData是本例的主要函数
  function sendData() {
    // 若已经选择了文件，就等浏览器读取完
    // 否则就延迟本函数的执行
    if(!file.binary && file.dom.files.length > 0) {
      setTimeout(sendData, 10);
      return;
    }

    // 要构建多部分的表单数据请求，需要一个XMLHttpRequest实例
    var XHR = new XMLHttpRequest();

    // 需要一个分隔符来定义请求体的每部分
    var boundary = "blob";

    // 将请求体存为一个字符串
    var data = "";

    // 若用户选择了文件
    if (file.dom.files[0]) {
      // 开启请求体的新部分
      data += "--" + boundary + "\r\n";

      // 该部分描述为表单数据
      data += 'content-disposition: form-data; '
      // 定义表单数据的名字
            + 'name="'         + file.dom.name          + '"; '
      // 提供真实的文件名
            + 'filename="'     + file.dom.files[0].name + '"\r\n';
      // 提供文件的MIME类型
      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';

      // 元数据和真实数据部分间有一个空行
      data += '\r\n';
      
      // 往请求体里添加二进制数据
      data += file.binary + '\r\n';
    }

    // 文本数据的组织更加简单
    // 开启请求体的新部分
    data += "--" + boundary + "\r\n";

    // 描述为表单数据并命名
    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
    // 元数据和真实数据部分间有一个空行
    data += '\r\n';

    // 往请求体里添加文本数据
    data += text.value + "\r\n";

    // 完成了所有部分，就“闭合”请求体
    data += "--" + boundary + "--";

    // 定义成功的数据提交后会发生什么
    XHR.addEventListener('load', function(event) {
      alert('Yeah! Data sent and response loaded.');
    });

    // 定义失败的情况会发生什么
    XHR.addEventListener('error', function(event) {
      alert('Oups! Something went wrong.');
    });

    // 配置请求
    XHR.open('POST', 'https://example.com/cors.php');

    // 添加必要的HTTP请求头来处理多部分表单数据的POST请求
    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);

    // 最后，发送数据
    XHR.send(data);
  }

  // 访问表单
  var form = document.getElementById("myForm");

  // 接管submit事件
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    sendData();
  });
});

    结果如下：
    效果

    结论

    浏览器的不同，导致通过JavaScript发送表单数据可以简单或很困难。FromData对象是通常的解决方案，而且我们应该毫不犹豫地在老旧浏览器上使用其polyfill：

    html前端javascript
    Levon
    526 声望89 粉丝

    大自然爱好者

    « 上一篇
    【译】怎样创建定制表单组件
    下一篇 »
    【译】使用FormData对象

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    iOS 下实现 webview 标题修改

    Levon赞 2阅读 9.7k评论 1

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新