Client to Server Data Transfer

Two main ways to transfer data #

• Data transfer via query parameters
  • GET
  • Mainly for sorting filters (search terms)
• Data transfer via message body
  • POST, PUT, PATCH
  • User registration, product orders, resource creation, resource modification

Four Scenarios #

• Static data retrieval
  • Images, static text documents
• Dynamic data retrieval
  • Mainly for search, sorting filters (search terms) in bulletin board lists
• Data transfer via HTML Form
  • User registration, product orders, data submission
• Data transfer via HTML API
  • User registration, product orders, data modification
  • Server-to-server, app clients, web clients (AJAX)

Static Data Retrieval #

Without Query Parameters

GET /static/star.jpg HTTP/1.1
Host: localhost:8080

Summary #

• Images, static text documents
• Use GET for retrieval
• Static data can generally be retrieved simply by its resource path without query parameters

Using Query Parameters

GET /search?q=hello&hl=ko HTTP/1.1
Host: www.google.com

Dynamically generates results by sorting and filtering based on query parameters

Summary #

• Mainly for search, sorting filters (search terms) in bulletin board lists
• Primarily used for filters that narrow down search conditions and sorting conditions that order search results
• Use GET for retrieval
• GET transfers data using query parameters

HTML Form Data Transfer #

POST Transfer - Save #

<form action="/save" method="post">
 <input type="text" name="username" />
 <input type="text" name="age" />
 <button type="submit">전송</button>
</form>

-> HTTP message generated by the web browser

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded

username=kim&age=20

GET Transfer - Save #

<form action="/save" method=get">
 <input type="text" name="username" />
 <input type="text" name="age" />
 <button type="submit">전송</button>
</form>

-> HTTP request message generated by the web browser

GET /save?username=kim&age=20 HTTP/1.1
Host: localhost:8080

Caution! GET is for retrieval only! Should not be used where resource modification occurs

Can be used when retrieving members

HTML Form Data Transfer #

multipart/form-data Used for file uploads. The default is x-www-form.

<form action="/save" method="post" enctype="multipart/form-data">
 <input type="text" name="username" />
 <input type="text" name="age" />
 <input type="file" name="file1" />
 <button type="submit">전송</button>
</form>

-> HTTP request message generated by the web browser

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: multipart/form-data; boundary=----XXX
Content-Length: 10457

----XXX
Content-Disposition: form-data; name="username"

kim
----XXX
Content-Disposition: form-data; name="age"

20
----XXX
Content-Disposition: form-data; name="file1"; filename="intro.png"
Content-Type: image/png

1012021093fdfafa029131230afsd
----XXX

Summary #

• POST transfer when HTML Form is submitted
  • E.g., user registration, product orders, data modification
• Uses Content-Type: application/x-www-form-urlencoded
  • Transfers form content via the message body (key=value, query parameter format)
  • URL encodes the transmitted data
    • E.g., abc김 >> abc%EA%b9%80
• HTML Forms can also use GET transfer
  • Used for binary data transfer like file uploads
  • Can transfer multiple files of different types along with form content (hence the name multipart)
• Note: HTML Form submission only supports GET and POST

HTML API Data Transfer #

POST /members HTTP/1.1
Content-Type: application/json

(
	"username": "young",
    	"age": 20
)

Summary #

• Server-to-server
  • Backend system communication
• App clients
  • Android, iPhone
• Web clients
  • Used for communication via JavaScript instead of HTML Form submission (AJAX)
  • E.g., API communication with web clients like React, Vue.js
• POST, PUT, PATCH: Data transfer via message body
• GET: Retrieval, transfers data via query parameters
• Primarily uses Content-Type: application/json (de facto standard)
  • TEXT, XML, JSON, etc.