preface

As front-end development, you have to deal with interface requests. For the common content-type, also can say a few, feel still understand. Until one day, WHEN I was looking at Google’s batch interface merge, I was a little unprepared to find Content-Type: Multipart/Mixed and Content-Type: Application/HTTP. Take a quick look at the content-Type to make up for your shortcomings, from the front end.

Content-Type

Content-type: The entity header is used to indicate the MIME Type of the resource. If ContentType is not specified, the default is Text/HTML. There are two scenarios: in a request (such as POST or PUT), the client tells the server what data type is actually being sent.

In the response, the Content-Type header tells the client the Content Type of the actual returned Content. Browsers do MIME lookups in some cases that do not necessarily follow the value of the header; To prevent this behavior, set the title X-Content-type-options to nosniff.

In short, this is the MIME type that identifies the resource or the required resource.

The syntax is as follows:

Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something
Copy the code

The parameter can be media-type, charset, or boundary. We focus on the value of media-type and its application scenarios.

media-type

More commonly used as MIME Types (Multipurpose Internet Mail Extensions). The goal is to identify the nature and format of documents in a standardized way. Browsers typically use MIME types, not file extensions, to determine how to process documents; It is therefore important that the server is set up correctly to attach the correct MIME type to the header of the response object.

structure

MIME consists of two strings of type and subtype separated by ‘/’. Spaces are not allowed. Case insensitive, but traditionally all lowercase. Additional arguments are allowed, as shown below:

type/subtype; parameter=valueCopy the code

Among them:

  • Type corresponds to the general category, for example, text/video.
  • Subtype corresponds to the exact subclass, such as text subdivided into plain(plain text), HTML (HTML source code), Calendar (.ics) files, etc.
  • Parameter can be charset or Bundaary.

Types

There are two types of classes: independent types and Multipart types.

Independent type

Independent type refers to a type that represents only a single file or media, indicating the classification of the file. Common types and examples are as follows:

  • Text Data contains some human-readable content or source code. For example, text/plain, text/ CSV, and text/ HTML.
  • Application for a binary data, such as application/octet stream, application/PDF, application/pkcs8, application/zip.
  • Audio Audio or music data, such as audio/mpeg, audio/vorbis
  • Video Video data or files, such as Video/MP4
  • Image Image or graphic data, including bitmaps and vector still images and animated versions of still image formats. For example, image/ GIF, image/ PNG, image/ JPEG, image/ BMP, image/webp, image/ X-icon

Multipart type

The Multipart type indicates the category of a document divided into parts, often with different MIME types. It can also be used to represent multiple independent files belonging to the same thing that make up a complex document. This is common in email scenarios. There are two types of Multipart: message and Multipart.

  • Message A message containing other information. It is often used in scenarios such as specifying that an email contains forwarding information or allows large chunks of information to be sent as chunks in cases of multiple messages. The options are message/ RFC822 and Message/Partial
  • Multipart Data composed of multiple components of different MIME types, such as multipart/form-data(data generated using the FormData API)

Having looked at the basic definitions, let’s take a look at the common types and usage scenarios.

Common types and application scenarios

Static resources, pictures, media

Static resources, images and media classes, namely text, image, video, etc., are relatively clear and not detailed description.

The application class

  • application/json

    With the popularity of JSON as a lightweight data interaction format, especially the convenience of script interaction, more and more people use JSON format in front and back interfaces. In the case of HTTP, characters are ultimately transmitted. No more description here.

  • application/x-www-form-urlencodedAs the default type in a form submission, it indicates that the data is encoded as key-value pairs in a standard encoding format. The data is encoded as key-value pairs separated by ‘&’, with ‘=’ separating key and value. Non-alphabetic or numeric characters are percent-encoding: this is why binary data is not supported for this type (multipart/form-data should be used instead).

    Let’s take Sina as an example, we can see its request message (select formData, view source can be seen clearly) :

  • Multipart /form-data for comparison purposes. Generally used for form submission involving files, for POST requests, in the following format:

    Content-Type: multipart/form-data; boundary=aBoundaryString
Copy the code

    Boundary specifies the partition of each part of the request body (this field will exist in the multipart category to distinguish the partition of data in the request body), and the request body contains the contents of each part of the corresponding form. Each section has its own request body and related content. For example, the following document structure:

  <form action="http://localhost:8000/" method="post" enctype="multipart/form-data">
  <input type="text" name="myTextField">
  <input type="checkbox" name="myCheckBox">Check</input>
  <input type="file" name="myFile">
  <button>Send the file</button>
</form>
Copy the code

The request information is as follows:

POST / HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0Accept: text/html,application/xhtml+xml,application/xml; q=0.9, */ *; Q = 0.8 Accept - Language: en - US, en. Q =0.5 accept-encoding: gzip, deflate Connection: keep-alive upgrade-insecure -Requests: 1 / / -- -- -- -- -- - -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 8721656041911415653955004498 as a separator the content-type: multipart/form - data; boundary=---------------------------8721656041911415653955004498 Content-Length: 465 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 8721656041911415653955004498 / / block a text information Content - Disposition: the form - data; Name = "myTextField" / / corresponding value Test -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 8721656041911415653955004498 / / the checkbox Content-Disposition: form-data; Name = "myCheckBox on" -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 8721656041911415653955004498 / / file Content - Disposition: the form - data; name="myFile"; filename="test.txt" Content-Type: text/plain Simple file. -----------------------------8721656041911415653955004498--Copy the code

  • Application /javascript Application /x-javascript Text /javascript For JS files, the common MIME type is text/javascript, but you should see the first two. There are some differences between the three. The MIME type for traditional JS programs is text/javascript. There are also “application/x-javascript” (the x prefix indicates that this is an experimental type), because text/javascript is the most common type, So RFC4329 defines “text/javascript”. However, js files are not really text types, so the application/javascript type is introduced, but the current support is not very good, so application/ X-javascript is often used instead.

  • Application /zip Application /gzip Zip corresponds to the zip compressed file. Gzip is short for several file compression programs and usually refers to the implementation of the GNU Project. Here gzip stands for GNU Zip.

  • Application/HTTP is a type of HTTP request, but the specific use of the specification can be found. HTTP requests of this type are contained in the binary body. Content-transfer-encoding must be specified in the mail protocol Transfer. Encountered when batch processing requests, as follows:

--batch_0123456789
Content-Type: application/http
Content-ID: 
// The required field indicates the encoding format of the content to be transmitted, i.e., binary stream
Content-Transfer-Encoding: binary

POST https://www.googleapis.com/analytics/v3/management/accounts/XXXXXX/webproperties/UA-XXXXXX-1/customDimensions
Content-Type: application/json
Content-Length: 68

{
 "name": "Campaign Group"."scope": "SESSION"."active": true
} 
Copy the code

Multipart type

As mentioned above, multipart typically corresponds to a single header corresponding to multiple message bodies. Common syntax is as follows:

Content-Type: multipart/mixed; boundary=gc0p4Jq0M2Yt08jU534c0p
Copy the code

The boundary field is required to distinguish the data boundary in the message body. Generally, the format of two ‘-‘ is used as the beginning of the end, for example:

--gc0p4Jq0M2Yt08jU534c0p
Copy the code

We mainly focus on the following:

  • Multipart /form-data see application section above. The following sections may not be that common, but it’s worth checking them out so you don’t feel overwhelmed.

  • Multipart /mixed This type is used when a message body consists of multiple independent parts and is intended to be displayed consecutively. In addition, it should be mixed if the subdata type has any type that is not recognized by the browser, such as text. In summary, the message has binary content, not directly identifiable content

Such as:

POST /batch/farm/v1 HTTP/1.1
Authorization: Bearer your_auth_token
Host: www.googleapis.com
Content-Type: multipart/mixed; boundary=batch_foobarbaz
Content-Length: total_content_length

--batch_foobarbaz
// The subcontent of the HTTP request is simply encoded by boundary
Content-Type: application/http
Content-ID: <item1:[email protected]>

GET /farm/v1/animals/pony

--batch_foobarbaz
Content-Type: application/http
Content-ID: <item2:[email protected]>

PUT /farm/v1/animals/sheep
Content-Type: application/json
Content-Length: part_content_length
If-Match: "etag/sheep"

{
  "animalName": "sheep",
  "animalAge": "5"
  "peltColor": "green",
}

--batch_foobarbaz
Content-Type: application/http
Content-ID: <item3:[email protected]>

GET /farm/v1/animals
If-None-Match: "etag/animals"

--batch_foobarbaz--
Copy the code

The content of the message body is the HTTP request, which is used in the Google Batch Interface protocol.

  • Multipart /alternative This type has the same syntax as mixed but different semantics. This indicates that different parts of the message body should be different versions of the same information. That is, the same content and different transmission types to adapt to different recipients. Here’s another example:
From:  Nathaniel Borenstein <[email protected]> 
To: Ned Freed <[email protected]> 
Subject: Formatted text mail 
MIME-Version: 1.0Content-Type: multipart/alternative; boundary=boundary42 --boundary42 Content-Type: text/plain; charset=us-ascii ... plain text versionof message goes here.... 

--boundary42 
Content-Type: text/richtext 

.... richtext version of same message goes here ... 
--boundary42 
Content-Type: text/x-whatever 

.... fanciest formatted version of same  message  goes  here 
... 
--boundary42-- 
Copy the code

If the user’s system recognizes the text/ X-whatever type, it will only see that part. What different users see depends on what type of content their system supports.

conclusion

reference

Developers.google.com/drive/api/v… Developer.mozilla.org/en-US/docs/… www.ruanyifeng.com/blog/2008/0… www.w3.org/Protocols/r…

Here is the introduction of the common content-type, thanks for the above reference article, in addition to the limited level may have errors welcome to point out. For the front-end students, the network request is also the part we need to pay attention to, while improving the depth of the sign-up should also pay attention to the breadth, I hope to benefit the students in need.