As in the previous article, HTML forms can send an HTTP request declaratively. But forms can also prepare an HTTP request to send via JavaScript. This article explores ways to do that.

A form is not always a form

With open Web apps, it's increasingly common to use HTML forms other than literal forms for humans to fill out — more and more developers are taking control over transmitting data.

Gaining control of the global interface

Standard HTML form submission loads the URL where the data was sent, which means the browser window navigates with a full page load. Avoiding a full page load can provide a smoother experience by hiding flickering and network lag.

Many modern UIs only use HTML forms to collect input from the user. When the user tries to send the data, the application takes control and transmits the data asynchronously in the background, updating only the parts of the UI that require changes.

Sending arbitrary data asynchronously is known as AJAX, which stands for "Asynchronous JavaScript And XML."

How is it different?

Note: Older AJAX techniques might not rely on XMLHttpRequest. For example, JSONP combined with the eval() function. It works, but it's not recommended because of serious security issues. The only reason to use this is for legacy browsers that lack support for XMLHttpRequest or JSON, but those are very old browsers indeed! Avoid such techniques.

Historically, XMLHttpRequest was designed to fetch and send XML as an exchange format. However, JSON superseded XML and is overwhelmingly more common today.

But neither XML nor JSON fit into form data request encoding. Form data (application/x-www-form-urlencoded) is made of URL-encoded lists of key/value pairs. For transmitting binary data, the HTTP request is reshaped into multipart/form-data.

If you control the front-end (the code that's executed in the browser) and the back-end (the code which is executed on the server), you can send JSON/XML and process them however you want.

But if you want to use a third party service, it's not that easy. Some services only accept form data. There are also cases where it's simpler to use form data. If the data is key/value pairs, or raw binary data, existing back-end tools can handle it with no extra code required.

So how to send such data?

Sending form data

There are 3 ways to send form data, from legacy techniques to the newer FormData object. Let's look at them in detail.

Building an XMLHttpRequest manually

XMLHttpRequest is the safest and most reliable way to make HTTP requests. To send form data with XMLHttpRequest, prepare the data by URL-encoding it, and obey the specifics of form data requests.

Using XMLHttpRequest and the FormData object

Building an HTTP request by hand can be overwhelming. Fortunately, a recent XMLHttpRequest specification provides a convenient and simpler way to handle form data requests with the FormData object.

The FormData object can be used to build form data for transmission, or to get the data within a form element to manage how it's sent. Note that FormData objects are "write only", which means you can change them, but not retrieve their contents.

Building a DOM in a hidden iframe

The oldest way to asynchronously send form data is building a form with the DOM API, then sending its data into a hidden <iframe>. To access the result of your submission, retrieve the content of the <iframe>.

Warning:Avoid using this technique. It's a security risk with third-party services because it leaves you open to script injection attacks. If you use HTTPS, it can affect the same origin policy, which can render the content of an <iframe> unreachable. However, this method may be your only option if you need to support very old browsers.

Dealing with binary data

If you use a FormData object with a form that includes <input type="file"> widgets, the data will be processed automatically. But to send binary data by hand, there's extra work to do.

There are many sources for binary data on the modern Web: FileReader, Canvas, and WebRTC, for example. Unfortunately, some legacy browsers can't access binary data or require complicated workarounds. Those legacy cases are out of this article's scope. If you want to know more about the FileReader API, read Using files from web applications.

Sending binary data with support for FormData is straightfoward. Use the append() method and you're done. If you have to do it by hand, it's trickier.

In the following example, we use the FileReader API to access binary data and then build the multi-part form data request by hand: