The Browser
The browser plays three roles in the web framework:
Provide communication to and from the webserver
Interpret the data from the server and render it into the view that the user actually sees
Handle user interaction through the keyboard, mouse, touchscreen, or other input device and take the appropriate action
Browser-to-Webserver Communication
Browser-to-webserver communication consists of a series of requests, using the HTTP and HTTPS protocols. Hypertext Transfer Protocol (HTTP) is used to define communication between the browser and the webserver. HTTP defines what types of requests can be made as well as the format of those requests and the HTTP response.
HTTPS adds an additional security layer, SSL/TLS, to ensure secure connections by requiring the webserver to provide a certificate to the browser. The user can then determine whether to accept the certificate before allowing the connection.
There are three main types of requests that a browser will make to a webserver:
GET: The GET request is typically used to retrieve data from the server, such as .html files, images, or JSON data.
POST: POST requests are used when sending data to the server, such as adding an item to a shopping cart or submitting a web form.
AJAX: Asynchronous JavaScript and XML (AJAX) is actually just a GET or POST request that is done directly by JavaScript running in the browser. Despite the name, an AJAX request can receive XML, JSON, or raw data in the response.
Rendering the Browser View
The screen that the user actually views and interacts with is often made up of several different pieces of data retrieved from the webserver. The browser reads data from the initial URL and then renders the HTML document to build a Document Object Model (DOM). The DOM is a tree structure object with the HTML document as the root. The structure of the tree basically matches the structure of the HTML document. For example, document will have html as a child, and html will have head and body as children, and body may have div, p, or other elements as children, like this:
document
+ html
+ head
+ body
+ div
+ p
The browser interprets each DOM element and renders it to the user’s screen to build the webpage view.
The browser often gets various types of data from multiple webserver requests to build a webpage. The following are the most common types of data the browser uses to render the final user view as well as define the webpage behavior:
HTML files: These provide the fundamental structure of the DOM.
CSS files: These define how each of the elements on the page is to be styled, in terms of font, color, borders, and spacing.
Client-side scripts: These are typically JavaScript files. They can provide added functionality to a webpage, manipulate the DOM to change the look of the webpage, and provide any necessary logic required to display the page and provide functionality.
Media files: Image, video, and sound files are rendered as part of the webpage.
Data: Data such as XML, JSON, or raw text can be provided by the webserver as a response to an AJAX request. Rather than send a request back to the server to rebuild the webpage, new data can be retrieved via AJAX and inserted into the webpage via JavaScript.
HTTP headers: HTTP defines a set of headers that the browser can use and client-side scripts to define the behavior of the webpage. For example, cookies are contained in the HTTP headers. The HTTP headers also define the type of data in the request as well as the type of data expected to be returned to the browser.
User Interaction
The user interacts with the browser via mice, keyboards, and touchscreens. A browser has an elaborate event system that captures user input events and then takes the appropriate actions. Actions vary from displaying a popup menu to loading a new document from the server to executing client-side JavaScript.