JanusBac
Computer control
A Web application is computer software that performs its tasks with the help of the Internet. The most internet applications are based on the client-server model in which clients enter and receive information while servers stores and processes these data. Simply put, the web application works like this.
- The client applications (e.g. a web browsers) send requests to servers over the internet. These requests can be sent along with the various data.
- The servers equipped with the appropriate applications perform the requested tasks, and then respond to the clients - they send responses in the form of appropriate data. These data can be displayed by client applications in text or graphical form.
Servers can offer and clients can expect very different internet services. This is why we have various internet protocols and connection modes for interaction between web applications to exchange data. We here will practically only basis on one of these protocols, called Hypertext Transfer Protocol (HTTP).
With that assumption usually the web applications use the following model. Server-side scripts (e.g. PHP and ASP) are used to receive, storage and process data. Client-side software (e.g. JavaScript and HTML) are devoted to present information to users and enter data by them. The clients can be simple applications or very sophisticated Graphical User Interfaces (GUI). The above short description of web application development may suggest that server software and client applications must be created in various programming languages. This can be confusing. I suggested a traditional solution but it is not the only one way. There are programming environments that allow you to develop server and client side software in the same languages. I used this traditional solution here (PHP for the Back-End, HTML and JavaScript for the Front-End of a web apps).
I have already mentioned that in most of the applications presented here I employ the HTTP protocol. The HTTP is the acronym derived from Hypertext Transfer Protocol. The HTTP is based on the TCP/IP communication protocol commonly used in the internet. The HTTP is very useful for data transfer in the World Wide Web (WWW).
Basically, HTTP-based communication works according to a simple pattern: clients (client applications) ask, servers respond. It is very simple but unfortunately slow.
The HTTP protocol also has the disadvantage that it does not allow connections to be initiated to clients to send "push" messages (from server to client).
I remind you that HTTP is just one of many internet communication protocols. For example, the so-called websocket protocol will also be discussed in another section.
Let's focus only on the HTTP for now. So we have a "HTTP server" and "HTTP client" - for example a web browser. This is all we need to start communicating using the HTTP protocol.
Let's summarize again:
- An "HTTP client" (web client) is an application that establishes a connection to a server to send to it various HTTP request messages.
- An "HTTP server" (web server) is software that accepts connections in order to serve HTTP requests and sends HTTP response messages.
Therefore, clients and servers communicate by exchanging messages (requests and responses). Any such information exchange can only be initiated by the client. Each such "request-response" sequence requires a separate connection to be established.
This causes a lot of network traffic and slows down the communication process
The message body can contain various data as for example simple data from servers or clients but also binary files in various formats. Generally, any type of data can be sent by HTTP if only the client and server applications know the transfered data format. I encourage you to read the "Data Format" chapter.
The client applications can use both synchronous and asynchronous HTTP communications with servers. It all depends on developers.
The synchronous communication means that sending a request blocks client code execution until the server responds. This mode can causes "freezing" a client screen for long time.
Therefore, the asynchronous mode is commonly used. In this model, a request is sent and the client application continue to work (executes code). When the server response is received the proper callback function is run, which responds appropriately to the obtained data.
It is high time for the first practical exercises.
Exercise 1
Use your browser to request a demo service I have prepared for you. Type in the address box of your browser the following text:
This is an example of a web application. The user has a client application (web browser) that communicates with the application installed on the server (in this case, the PHP script).
Of course, you don't have to use your browser to employ this service. You can write your application in the language you like and insert the proper code to call this HTTP request.
I inserted the clock.php script call in the HTML code of this page. You can see the result if you click on this link: ↯. Analyzing the code of this page may seem unpleasant to you. So I prepared a very simple application especially. You can run it in your browser and then view its HTML code.
You already know that this request returns time from the server clock. The server side PHP script is very simple:
You didn't work on anything in the previous example. You only used your browser and server script. Our goal is that you should just be developing client applications. I mentioned before that you can do this in any programming language, just what you can do. Now I will present you a very simple example of such an application written in HTML. For this purpose I will use the <form> element, which is used in HTML to create the so-called forms.
The form is a container for various ready-made HTML elements in which the user can enter data and have it sent to the server. Sending data is possible with both the GET and POST methods (HTTP protocol methods). You have to choose in your code the method appropriate for the script on the server - the programmer in the script code has specified what method of data transfer it accepts. Here is the HTML code for such a form - look how simple it is.
You could view this code in the browser after starting my application ↯, so I will not display the code of the applications in discussion very often. For this exercise, I recommend that you create the sumator.html file yourself and save the above code into it. Then you can run executing this code.
Please note that you could also use this script in a different way. You can type in the address field of the browser:
If you want to sum up numbers other than 2 and 3, enter instead of these numbers the values you want to add together.
This command calls the sumator.php service on the server and sends the data to the server using the GET method (note the fragment of the command:? X = 2 & y = 3).
Perhaps many of you were disappointed in the previous application. After sending the service request to the server, your page was reloaded. The result was displayed in the form I defined in the PHP script code.
AJAX technology was invented to remove this limitation (AJAX = Asynchronous JavaScript And XML). Web browsers with implemented JavaScript have a built-in XMLHttpRequest object. This object allows data to be requested from the server. Data for the server may be attached to the request. You can select the GET or POST method of the HTTP protocol for data transfer.
You should learn to use this object in your JavaScript code. For this purpose, I have prepared the sumatorAJAX.php script. I have also prepared a client application ↯ which I recommend you to run and analyze its code.
Also check what answer you will get when you enter in the address field of the browser:
You will find that the sumatorAJAX.php script works differently from the sumator.php one.
I have the following homework for you:
Write in HTML and JavaScript an application which will be an ordinary clock and of course use the presented service (clock.php). You can also do it in another programming language.
Good luck :)