kaksha.dev

---

HTTP and AJAX

HTTP(Hypertext Transfer Protocol) and AJAX(Asynchronous JavaScript and XML) together refers to web developent technique of using AJAX to make HTTP requests from a web page without reloading the entire page.

HTTP Protocol

HTTP is an application-layer protocol used for communication between a client (such as a web browser, mobile app etc.) and a server over a network.

Key features and characteristics of HTTP Protocol

• Application level protocol (uses TCP/IP way for communication)
  • TCP -> breaks a message in to packets at sender side and reassembles at receiver level
  • IP -> Add address to each packet
• Stateless protocol
  • every request is treated as independent so frees bandwidth
  • but for packets of same request, it occupies bandwidth till complete packet is delivered
  • point to point (Each HTTP connection exists between exactly two endpoints—a client and a server. Even in architectures with multiple intermediaries, each HTTP hop remains a separate point-to-point connection. HTTP does not support broadcast or multicast communication)
• Can be used for other purposes as well using extensions of its request methods, error codes, and headers.

HTTP request

An HTTP request message typically contains:

• Request Type
• URI
• Request Headers
• Body

HTTP response

An HTTP response generally contains:

• Response code
• Response Headers
• Message Body

HTTP Status Codes

• 1xx: Informational - Request received, continuing process
• 2xx: Success - The action was successfully received, understood, and accepted
• 3xx: Redirection - Further action must be taken in order to complete the request
• 4xx: Client Error - The request contains bad syntax or cannot be fulfilled
• 5xx: Server Error - The server failed to fulfill an apparently valid request

HTTP Request Methods

• GET - Request/Fetch data
• POST - Create a new resource
• PUT - Replace an existing resource
• PATCH - Make partial updates to a resource
• DELETE - Remove a resource
• OPTIONS - Discover supported methods
  

HTTP Headers

HTTP headers provide the information about the request. They are key-value pairs and has meta data about the request e.g., Content-Type, Authorization, Request Method, Content-Length, User-Agent etc.

AJAX

AJAX is a technique that allows JavaScript running in the browser to asynchronously communicate with server and update the full or parts of a webpage wihout a complete reload.

Before AJAX, this is how browser used to communicate with server and update the webpages. When an user performs any client side action (form submit / button click), the server responds with entire new HTML page.

With AJAX, when a user performs an action on a web page, JavaScript sends an HTTP request to the server. The server returns data (typically in JSON format), which JavaScript then uses to update only the relevant part of the web page.

Despite its name, AJAX is now mostly used with JSON rather than XML. This is because, when AJAX was introduced, XML was the most common data exchange format. Today, however, JSON is the preferred format for data exchange.

XML Format

<user>
    <id>1</id>
    <name>John Doe</name>
    <age>25</age>
</user>

JSON Format

{
    "id": 1,
    "name": "John",
    "age": 25
}

There are two primary ways to make AJAX requests over HTTP:

• XMLHttpRequest(XHR) - Callback based API
• Fetch API - Promise based API