Client-side and server-side scripting

There are two main ways to customise Web pages and make them more interactive. The two are often used together because they do very different things.

Scripts

A script is a set of instructions. For Web pages they are instructions either to the Web browser (client-side scripting) or to the server (server-side scripting). These are explained more below.

Scripts provide change to a Web page. Think of some Web pages you have visited. Any page which changes each time you visit it (or during a visit) probably uses scripting.

All log on systems, some menus, almost all photograph slideshows and many other pages use scripts. Google uses scripts to fill in your search term for you, to place advertisements, to find the thing you are searching for and so on. Amazon uses scripting to list products and record what you have bought.

Client-side

The client is the system on which the Web browser is running. JavaScript is the main client-side scripting language for the Web. Client-side scripts are interpreted by the browser. The process with client-side scripting is:

  1. the user requests a Web page from the server
  2. the server finds the page and sends it to the user
  3. the page is displayed on the browser with any scripts running during or after display

So client-side scripting is used to make Web pages change after they arrive at the browser. It is useful for making pages a bit more interesting and user-friendly. It can also provide useful gadgets such as calculators, clocks etc. but on the whole is used for appearance and interaction.

Client-side scripts rely on the user's computer. If that computer is slow they may run slowly. They may not run at all if the browser does not understand the scripting language. As they have to run on the user's system the code which makes up the script is there in the HTML for the user to look at (and copy or change).

Server-side

The server is where the Web page and other content lives. The server sends pages to the user/client on request. The process is:

  1. the user requests a Web page from the server
  2. the script in the page is interpreted by the server creating or changing the page content to suit the user and the occasion and/or passing data around
  3. the page in its final form is sent to the user and then cannot be changed using server-side scripting

The use of HTML forms or clever links allow data to be sent to the server and processed. The results may come back as a second Web page.

Server-side scripting tends to be used for allowing users to have individual accounts and providing data from databases. It allows a level of privacy, personalisation and provision of information that is very powerful. E-commerce, MMORPGs and social networking sites all rely heavily on server-side scripting.

PHP and ASP.net are the two main technologies for server-side scripting.

The script is interpreted by the server meaning that it will always work the same way. Server-side scripts are never seen by the user (so they can't copy your code). They run on the server and generate results which are sent to the user. Running all these scripts puts a lot of load onto a server but none on the user's system.

The combination

A site such as Google, Amazon, Facebook or Hobowars will use both types of scripting:

AJAX

AJAX doesn't really exist except as a label for client-side and server-side being used together on Linux servers.

It allows JavaScript to send and receive data from Apache Web servers by interacting with server-side script pages.

Don't worry about it until you already know the separate parts (JavaScript, the DOM and PHP). Then it will be amazingly easy.

A classic example of this is the auto-complete feature on Google. If you start to type anything into the search box the page suggests possible choices of searches to save you typing the whole thing. The process is actually:

  1. typing a letter triggers a JavaScript function
  2. the JavaScript function asks the browser for a new page from the Google server (the request for the page requested from the server will include the letter typed)
  3. the server-side script on the requested page sees the letter which has been typed and creates a page of text which includes some possible matches
  4. the new page is sent back to the browser which passes it to the JavaScript function
  5. the JavaScript function extracts the data from the page and displays it below the search box

That whole process repeats every time you type or delete a letter. Data is flowing to and fro and being displayed. If you click on any of the displayed matches then JavaScript will send a more traditional page request to the server through the browser. When this page is sent to the browser it is displayed as a new Web page with the results of the Google search.

AJAX allows Web pages to act like normal applications on your own PC. The pages can change appearance, fetch and send new data and interact with other users and pages.

submit to reddit Delicious Tweet