Common Front‑End Data Exchange Methods and Their Use Cases with Code Examples

The author, a front‑end engineer at Ctrip, explains that frequent communication with back‑end services in the "Ctrip Sport" project requires a solid understanding of different data exchange mechanisms beyond the usual GET/POST requests.

It starts with a concise overview of HTTP methods (GET, POST, PUT, DELETE, HEAD, OPTIONS, TRACE, CONNECT) and common enctype values for HTML forms such as application/x-www-form-urlencoded , multipart/form-data , application/json , text/xml , and text/plain .

Three practical form‑submission examples are provided:

1. Form submission with application/x-www-form-urlencoded – a classic HTML form posting to form_action.php using AJAX or the Fetch API.

<form action="form_action.php" method="post" enctype="application/x-www-form-urlencoded">
  <input name="username" type="text"/>
  <input name="password" type="text"/>
  <button id="b1">AJAX提交</button>
  <button id="f1">fetch提交</button>
</form>

2. Form submission with multipart/form-data – suitable for file uploads, demonstrated with jQuery AJAX and Fetch handling of FormData .

var formData = new FormData(document.querySelector('#data2'));
$.ajax({
  method: "POST",
  processData: false,
  contentType: false,
  url: "form_action.php",
  data: formData
});

3. Form submission with application/json – sending a JSON payload via AJAX or Fetch.

$.ajax({
  method: "POST",
  contentType: "application/json;charset=UTF-8",
  data: JSON.stringify({username: "John", password: "Boston"})
});

Server‑side handling in form_action.php prints $_POST , raw input, and uploaded files for debugging.

The article then introduces Server‑Sent Events (SSE) as a one‑way push mechanism from server to client, showing a minimal JavaScript client using new EventSource(...) and a PHP server that streams JSON data with appropriate headers.

var source = new EventSource('http://localhost:7000/server');
source.onmessage = function(e) {
  console.log(JSON.parse(e.data));
};

Next, WebSocket is covered as a full‑duplex communication channel. A Node.js server using the ws library broadcasts a welcome message and echoes client messages, while the client HTML establishes a WebSocket connection, sends messages on button clicks, and displays incoming data.

var ws = new WebSocket('ws://127.0.0.1:2000/');
ws.onopen = function() { ws.send('ws已经联接'); };
ws.onmessage = function(evt) { console.log(evt.data); };

For cross‑origin or same‑origin page communication, the window.postMessage API is demonstrated with a parent page containing two iframes. Buttons trigger messages to the left or right iframe, and each iframe can forward messages back to the parent.

window.post1.postMessage(date, '*');
window.addEventListener('message', function(e) {
  if (e.data) { console.log(e.data); }
});

Finally, Web Workers are introduced to offload heavy computations from the main thread. The main page creates workers from compute.js , receives incremental results via onmessage , and can terminate workers on user interaction.

var worker = new Worker('./compute.js');
worker.onmessage = function(event) { console.log(event.data); };
worker.postMessage('hi, 我是' + warpid);

Overall, the article provides a comprehensive guide to choosing the appropriate data exchange technique for different front‑end scenarios, backed by runnable code snippets and server‑side examples.