HTTP
You might say
When I click a button, what actually happens between the browser and the server?
Send a request and receive a response over the webHTTP is the request-response protocol browsers and APIs use. A request includes a method, URL, headers, and sometimes a body; the response includes a status, headers, and content. Methods and status codes should match what actually happened.
Know first
You can say this to an AI Agent
Saving the nickname returns 400. Inspect the actual method, URL, body, and response, identify why the server rejected it, then make the smallest fix. Do not reduce it to a generic network error or change methods arbitrarily. Resend and confirm the successful result.
When to use it
- Fetch a page or resource🔒vibeui.dev/componentsGETPressing Enter in the address bar is a GET.
- Call an APIyou@example.com••••••••Sign inPOST
- Submit data to a serverNetworkFetch/XHRGET/api/list200POST/api/save200
- Describe success, redirects, client errors, and server errorsGETPOSTPUTDELETE
When NOT to use it
- Use a successful status code for a failed operation/login?pwd=123456The password entered browser history and server logs.
- Change data with a request intended only for readingGET/api/listA GET request body has no universal meaning; do not depend on how a server handles it.
- Retry every failed request without limitsPOST/api/order ×3Repeated requests can create multiple orders; the server also needs idempotency keys or unique constraints as a safeguard.
- Log sensitive headers or bodies carelesslyChanging the API format based on assumptions without checking the actual request.
Anatomy
POST /api/login HTTP/1.1
Host: api.vibeui.dev
Content-Type: application/json{ "email": "you@example.com", "pwd": "••••••" }
Host: api.vibeui.dev
Content-Type: application/json{ "email": "you@example.com", "pwd": "••••••" }
The request method describes the action: GET, POST, PUT, PATCH, or DELETE.
The URL identifies the destination; the path and query narrow down the resource.
Headers carry metadata such as the content type, credentials, and request origin.
The optional body carries data, commonly with POST, PUT, or PATCH. Content-Type and the API contract define its format.
Variants
GET
GET /api/list?page=1
Obtain resources and pass query parameters in the URL according to the interface convention
POST
POST /api/login
Submit the data and put the content in the request body
PUT & PATCH
PUT /api/items/42
Update existing data, overwrite or partially change
DELETE
DELETE /api/items/7
Please be careful when deleting data.
Typical use cases
Page request
🔒
vibeui.dev/components
⏎
API call
Login Vibe
Click moment → POST /api/login
Form submission
Network
Fetch/XHR
list?page=1GET20064 ms
savePOST200120 ms
items/42PUT20098 ms
items/7DELETE20475 ms
File download
$ curl -X POST https://api.vibeui.dev/login \
-H "Content-Type: application/json" \
-d '{"email":"you@example.com","pwd":"123456"}'
{ "token": "eyJhbGciOi…" }
# -X sets the method, -H adds a header, and -d sends the request body.
HTTP vs HTTPS: what is the difference?
Use HTTPS for public sites and production APIs. It keeps HTTP's request-response rules while TLS protects the connection.
| Decision point | HTTP | HTTPS |
|---|---|---|
| What it is | The standard request-and-response rules between client and server. | Standard HTTP traffic carried over an encrypted TLS connection. |
| Data in transit | Plain text; network observers along the path can read or modify data. | Encrypted in transit; protected from eavesdropping and silent tampering. |
| When to use | Local development and offline testing (e.g., http://localhost). | Public deployments, user authentication, payments, and production APIs. |
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check