Amphtml: Support application/json for XHR

[zhangsu]

What's the issue?

Is it feasible to add the ability to send XHR with an application/json content type? Currently with amp-form, we can only send XHR with multipart/form-data content type. We are asking this because a lot of non-GET RESTful APIs these days take requests with a JSON body.

For example, the Google Drive API that creates a comment requires a request like the following:

POST https://www.googleapis.com/drive/v3/files/:fileId/comments

_(query parameters omitted)_

Request body:

{
  "content": "foobar"
}

Another example: the Github API that creates a comment for a Gist requires the following format:

POST https://api.github.com/gists/:gist_id/comments

Request body:

{
  "body": "Just commenting for the sake of commenting"
}

What browsers are affected?

All browsers

[choumx]

/cc @aghassemi @rudygalfi

[aghassemi]

similar request for configurable enctype here: https://github.com/ampproject/amphtml/issues/7607

/cc @ericlindley-g @cvializ

[aghassemi]

closing as dup of #7607

[zhangsu]

@aghassemi Just to throw some of my brain dump here: I think this feature request is a little bit different from #7607.

The enctype attribute for forms can only be one of the 3 values: application/x-www-form-urlencoded, multipart/form-data and text/plain. Currently amp-form only allows multipart/form-data, and #7607 asks to have the option to use application/x-www-form-urlencoded, which can be supported by just altering the content type without changing the representation of the parameters.

application/json on the other hand is another beast. JSON is a structured data format, which can't really be represented using linear <input> fields, so if we re-purpose amp-form for making XHRs with JSON request body, then we need another way to represent the XHR input parameters. I had the following in my imagination:

<form method="POST" action-xhr="..." >
  <input type="text" name="name">
  <input type="text" name="age">
  <input type="text" name="address">
  <input type="text" name="country">

  <script type="application/json">
    {
      "person": {
        "name": "$name",
        "age": "$age"
      },
      "location": {
        "address": "$address",
        "country": "$country"
      }
    }
  </script>
</form>

Basically using <input> to flatten out all the variable parameters and map them to the structured JSON template to send as the request body...

[aghassemi]

@zhangsu Thanks for the details. So to summarize, we need a "JSON template" to fill in with input values before sending it. Makes sense. reopening the issue.