Une explication approximative du fonctionnement des applications Web Java

introduction

J'ai rejoint une société informatique il y a quelques mois en tant que personne inexpérimentée. J'ai passé environ deux mois à développer une application Web utilisant Java dans la formation. Je vais résumer brièvement ce que j'ai appris. Je pense qu'il y a beaucoup d'erreurs, il serait donc utile que vous en signaliez de plus en plus. ** * La méthode et la procédure de développement ne sont pas écrites. Il décrit grossièrement les termes et le tableau d'ensemble nécessaires à la connaissance. ** **

Cible

• Ceux qui ont créé des pages Web statiques avec HTML / CSS mais ne savent pas quel type de connaissances est nécessaire pour créer des applications Web dynamiques
• Ceux qui comprennent comment écrire du code Java mais qui ne peuvent pas voir le tableau complet lors de la création d'une application Web dynamique

Client Web et serveur Web

Tout d'abord, la page Web que vous consultez sur votre navigateur est réalisée par des ordinateurs (logiciels) appelés ** client ** et ** serveur **.

Client Web

Un ordinateur (logiciel) qui demande un service à un serveur et qui est fourni avec ce service par le serveur est appelé un client. Un client Web qui peut être utilisé en accédant à une page Web stockée sur un serveur Web est appelé un client Web. Vous pouvez imaginer un client Web comme un navigateur tel que Chrome ou IE.

serveur Web

Un ordinateur (logiciel) qui fournit un service ou une fonction à un client en réponse à une demande du client est appelé un serveur. Les serveurs comprennent les serveurs Web, les serveurs de messagerie, les serveurs de base de données, les serveurs d'applications, etc. Un serveur qui répond à l'accès à partir d'un client Web est appelé un serveur Web. Apache, IIS, nginx, etc. sont des logiciels de serveur Web bien connus.

Flux d'affichage d'une page Web

Maintenant, comment afficher la page Web, Par exemple, lorsqu'un utilisateur souhaite rechercher quelque chose sur Google, le champ URL du navigateur Vous pouvez y accéder en tapant «https: // www.google.com». Lorsque vous y accédez réellement, la page Google s'affiche instantanément, mais lorsque vous la regardez entre le client et le serveur, Les interactions suivantes se produisent lorsqu'un utilisateur tente d'accéder à une page Google:

** 1. Le client Web envoie un message de demande au serveur Web ** ** 2. Sur la base de ce message, le serveur Web prépare la page Web demandée par le client Web ** ** 3. Le serveur Web envoie un message Resonse au client Web et la page Web s'affiche ** Les messages envoyés et reçus ici sont échangés à l'aide d'un protocole appelé ** HTTP **.

protocole

Un protocole est simplement une règle lorsque les ordinateurs interagissent les uns avec les autres. Par exemple, lorsque vous parlez entre japonais, cela revient à parler dans la langue (règle) du japonais. Lorsqu'un client Web et un serveur Web communiquent, ils envoient et reçoivent à l'aide d'un protocole (règle) appelé HTTP. Ce faisant, vous pouvez parcourir la page Web côté client. Cependant, un simple serveur Web ne peut afficher qu'une page Web statique et, pour afficher une page Web dynamique, un logiciel pour exécuter le processus est nécessaire. De plus, il existe deux types de messages de requête envoyés par le client au serveur Web, ** GET ** et ** POST **, et il est nécessaire de les utiliser correctement pour réaliser une page Web dynamique. .. Tout d'abord, comparons une page Web statique avec une page Web dynamique avant d'expliquer le logiciel, GET et POST.

Contenu statique et dynamique

Page Web statique

Lors de l'affichage d'une page Web statique, comme indiqué dans l'image ci-dessous, la page Web demandée par le client Web au serveur Web Puisqu'il est renvoyé au client Web en tant que réponse tel quel, le même contenu de page sera renvoyé quel que soit le nombre de fois que vous le demandez. En d'autres termes, une image qui renvoie le fichier HTML stocké à l'avance sur le serveur Web tel quel.

Page Web dynamique

Lors de l'affichage d'une page Web dynamique, le client Web demande au serveur Web et Je fais quelque chose, puis je renvoie la page Web au client Web. En d'autres termes, une image qui génère du texte HTML en exécutant un traitement (programme) côté serveur Web. Dans le cas de l'image ci-dessous, le contenu affiché de la page Web que vous venez d'accéder est `` Hello World! '', Vous pouvez changer le contenu d'affichage de la page Web en «Qiita» en saisissant «Qiita» dans le formulaire de saisie et en appuyant sur le bouton.

De cette manière, une sorte de traitement (programme) est nécessaire pour réaliser une page Web dynamique. Le logiciel qui exécute le programme est requis pour exécuter le processus. Ce type de traitement sera implémenté dans le langage C et les langages de programmation tels que PHP et Java.

Flux d'affichage des pages Web dynamiques

Plus tôt, j'ai expliqué le déroulement de l'affichage d'une page Web, mais je me suis concentré sur l'affichage d'une page Web dynamique (exécution d'un programme). Je voudrais expliquer le déroulement de l'affichage d'une page Web.

Exécutez l'application sur le serveur Web

Premièrement, à titre d'exemple, si vous implémentez une page Web en PHP, le serveur Web n'a pas de module pour exécuter les fichiers PHP. Étendez le serveur Web en intégrant le module d'exécution PHP dans le serveur Web. Si votre serveur Web utilise Apache, incluez un module d'exécution PHP appelé mod_php5 pour exécuter des scripts PHP. Cela générera un fichier HTML dans le serveur Web et le renverra au client. Autrement dit, le flux est le suivant. ** 1. Le client Web envoie un message de demande au serveur Web ** ** 2. Sur la base de ce message, exécutez l'application avec le module intégré au serveur Web ** ** 3. L'application exécutée génère du texte HTML ** ** 4. Le serveur Web envoie un message Resonse au client Web et la page Web s'affiche **

Exécutez l'application sur le serveur d'applications

Ensuite, si vous souhaitez implémenter une page Web en Java à titre d'exemple, préparez un serveur d'applications. Le serveur d'applications est le logiciel pour exécuter des applications Certains des serveurs d'applications Java les plus connus sont ** Tomcat **, Jetty et Glass Fish. Le serveur d'application préparé ici est différent du serveur Web, il ne peut donc pas être facilement échangé. Pour autoriser la communication entre le client Web et le serveur Web à l'aide du protocole HTTP Il nécessite également un protocole pour permettre la communication entre le serveur Web et le serveur d'applications. Si le serveur Web est ** Apache ** et le serveur d'applications est ** Tomcat ** Apache fournit un module de coopération appelé ** mod_jk **, qui est inclus en tant qu'extension d'Apache. Le module de coopération ** mod_jk ** utilise un protocole appelé ** ajp13 ** pour réaliser la communication entre le serveur Web et le serveur d'application. À propos, Tomcat dispose également d'un serveur Web simple, vous pouvez donc afficher des pages Web dynamiques sans coopération. En autorisant la communication entre le serveur Web et le serveur d'application, les requêtes du client Web parviennent au serveur d'application, Le texte HTML est généré en exécutant un traitement basé sur le message. En d'autres termes, le flux est le suivant. ** 1. Le client Web envoie un message de demande au serveur Web à l'aide du protocole HTTP ** ** 2. Le serveur Web envoie un message de demande au serveur d'applications (Tomcat) à l'aide du protocole ajp13 ** ** 3. Le serveur d'applications exécute l'application en fonction du message ** ** 4. L'application exécutée génère du texte HTML ** ** 5. Le serveur d'application envoie un message Resonse au serveur Web à l'aide du protocole ajp13 ** ** 6. Le serveur Web envoie un message Resonse au client Web à l'aide du protocole HTTP et la page Web s'affiche ** De cette manière, l'affichage dynamique de pages Web peut être réalisé en utilisant des modules et des serveurs d'applications. Ensuite, j'expliquerai quel type d'application est exécuté pour générer un fichier HTML en utilisant Java.

Servlet

Un servlet est un programme écrit en Java qui génère du contenu Web tel que HTML, et est exécuté par un serveur d'applications tel que Tomcat. J'ai en fait créé un servlet simple appelé ServletController.java comme indiqué ci-dessous.

ServletController.java

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ServletController")
public class ServletController extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public ServletController() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//Réglage du code de caractère
		response.setContentType("text/html; charset=UTF-8");

        //HTML à envoyer au client
		PrintWriter out = response.getWriter();
		out.println("<html>");

		//entête
		out.println("<head>");
		out.println("<title>");
		out.println("Test");
		out.println("</title>");
		out.println("</head>");

		//corps
		out.println("<body>");

		out.println("<h1>");
		out.println("Page Web dynamique");
		out.println("</h1>");

		out.println("<p>");
		out.println("Il s'agit du contenu Web généré par le servlet exécuté par Tomcat.");
		out.println("</p>");

		out.println("</body>");
		out.println("</html>");
        out.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

En exécutant ce servlet, la page Web suivante peut être affichée sur le navigateur. À propos, cette page Web ne peut pas être modifiée, vous pouvez donc avoir l'impression qu'il s'agit d'une page Web statique. Après la demande du client Web, le fichier HTML stocké sur le serveur Web n'est pas affiché tel quel. Il s'agit d'une page Web dynamique car le serveur d'applications exécute le fichier java pour générer le texte HTML et l'afficher dans le navigateur.

OBTENIR et POSTER

Ensuite, nous expliquerons comment le contenu d'affichage est modifié, comme dans la page Web dynamique (contenu statique et image du navigateur dans le contenu dynamique) dans l'exemple ci-dessus. Dans la page Web dynamique de l'exemple ci-dessus, j'ai changé les caractères de HelloWorld! En Qiita. Comme indiqué dans le flux d'affichage d'une page Web, le client Web peut uniquement envoyer un message de demande comme moyen d'envoyer des informations au serveur Web. En d'autres termes, pour modifier le contenu d'affichage de la page Web, il est nécessaire d'envoyer le message Request avec des paramètres (valeurs arbitraires). Par conséquent, il existe deux types de méthodes de transmission de message de demande, GET et POST, comparons donc la manière dont elles ont des paramètres.

Nous avons préparé une page Web simple qui vous permet d'envoyer un message de demande par GET ou POST, comme indiqué ci-dessous. À propos, l'URL lors de l'accès à cette page Web est 192.168.56.101 / Test / TestController.

GET Tout d'abord, essayez d'envoyer le message Request avec GET et le paramètre comme Qiita. Bien sûr, la partie qui était affichée comme Hello World! A été remplacée par Qiita, Dans le même temps, l'URL est passée de 192.168.56.101 / Test / TestController à 192.168.56.101/Test/TestController? InputText = Qiita. En d'autres termes, si vous utilisez GET comme méthode d'envoi du message de demande, les paramètres envoyés seront incorporés dans l'URL et atteindront le serveur Web. Au fait, dans ce cas, ʻinputText est la clé et Qiitaest la valeur de cette clé. POST Ensuite, essayez d'envoyer le message de demande avec POST et le paramètre commeQiita. <img width="594" alt="スクリーンショット_GETPOST7.png " src="https://qiita-image-store.s3.amazonaws.com/0/296506/c2c1ffb9-d3e9-4a76-048d-f666e3d2b58c.png "> Bien sûr, la partie qui était affichée comme Hello World!A été remplacée parQiita, mais Contrairement à GET, l'URL reste 192.168.56.101 / Test / TestController`. En d'autres termes, lorsque POST est utilisé comme méthode d'envoi du message de demande, les paramètres envoyés ne sont pas inclus dans l'URL, mais sont inclus dans le message de demande et atteignent le serveur Web.

Utilisation correcte de GET et POST

Prenons un exemple réel. Si vous allez sur Googlehttps: // www.google.com et entrez Qiita dans le mot de recherche, Le champ URL du navigateur est accessible en tant que https: //www.google.com/search? Hl = ja & q = Qiita. En d'autres termes, la recherche Google envoie un message de demande avec GET. En envoyant avec GET, vous pouvez facilement y accéder à nouveau en le mettant en favori lorsque vous souhaitez revoir cette page plus tard. Il est préférable d'utiliser GET lorsqu'il n'y a pas beaucoup de problème même si d'autres personnes voient les conditions de recherche et qu'il est pratique de sauvegarder chaque paramètre. Inversement, POST doit être utilisé pour envoyer et accéder à du contenu qui ne doit pas être vu par des humains, ou pour réécrire la base de données. Voici un bref résumé des différences.

Relation entre servlet et GET / POST

En ce qui concerne le type de traitement effectué côté application en envoyant le message Request par GET ou POST, Comme vous pouvez le voir en regardant le code source du servlet plus tôt Il y avait des méthodes ** doGet ** et ** doPost ** dans la classe ServletController. Si le message Request est envoyé par GET, la méthode doGet est implémentée et Lorsqu'un message Request est envoyé par POST, la méthode doPost est implémentée pour générer du texte HTML.

Comment envoyer GET et POST

Vérifions quel est le texte HTML réellement généré pour afficher la page Web. Le texte HTML lors de l'accès à 192.168.56.101 / Test / TestController est le suivant.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
	<h1>Page Web dynamique</h1>
	<p>Envoyer des paramètres avec GET</p>
	<form action="TestController" method="get">
		<input type="text" name="inputText" >
		<button type="submit">Changement de personnage(GET)</button>
	</form>
	<p>Envoyer les paramètres par POST</p>
	<form action="TestController" method="post">
		<input type="text" name="inputText" >
		<button type="submit">Changement de personnage(POST)</button>
	</form>
	<p>HelloWorld!</p>

</body>
</html>

Concernant «action» et «méthode» spécifiés dans la balise form action spécifie le fichier de classe (.java) à exécuter. La méthode spécifie comment envoyer le message de demande (get ou post). En d'autres termes, si vous appuyez sur le bouton d'envoi dans une balise de formulaire côté client, un message de demande sera envoyé au serveur Web. La méthode doGet ou doPost de la classe spécifiée dans l'action est exécutée. À ce moment-là, s'il y a un paramètre à envoyer, le paramètre est également envoyé. Dans ce cas, le nom de la balise d'entrée sera la clé ʻinputText, et la chaîne de caractères saisie sera envoyée comme valeur Qiita. Et le servlet pour 192.168.56.101 / Test / TestController` ressemble à ceci:

TestController.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/TestController")
public class TestController extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public TestController() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//Réglage du code de caractère
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");

        //Définition des paramètres utilisés dans JSP
		if(request.getParameter("inputText") != null) {
			request.setAttribute("inputText", request.getParameter("inputText"));
		}

		//Navigation dans la page
		ServletContext context = this.getServletContext();
		RequestDispatcher dispatcher = context.getRequestDispatcher("/TestView");
		dispatcher.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//Réglage du code de caractère
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");

        //Définition des paramètres utilisés dans JSP
		if(request.getParameter("inputText") != null) {
			request.setAttribute("inputText", request.getParameter("inputText"));
		}

		//Navigation dans la page
		ServletContext context = this.getServletContext();
		RequestDispatcher dispatcher = context.getRequestDispatcher("/TestView");
		dispatcher.forward(request, response);
	}

}

Vous n'avez pas du tout besoin de comprendre le contenu de ce fichier source en détail, mais veuillez noter. Il n'y a pas de processus pour sortir les balises html etc. comme décrit dans ServletController.java. Ce processus n'a pas besoin d'être décrit car ** Servlet ** et ** JSP ** partagent les rôles et coopèrent.

JSP Un JSP est simplement un code Java intégré au format HTML. Un développement efficace peut être obtenu en partageant le traitement entre le servlet et le JSP qui l'affiche. Ci-dessous se trouve le JSPTestView.jsp appelé à partir du servlet TestController.java mentionné précédemment.

TestView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
	<h1>Page Web dynamique</h1>
	<p>Envoyer des paramètres avec GET</p>
	<form action="TestController" method="get">
		<input type="text" name="inputText" >
		<button type="submit">Changement de personnage(GET)</button>
	</form>
	<p> </p>
	<p>Envoyer les paramètres par POST</p>
	<form action="TestController" method="post">
		<input type="text" name="inputText" >
		<button type="submit">Changement de personnage(POST)</button>
	</form>
	<p>
	<%
	if(request.getAttribute("inputText") == null){
		out.println("HelloWorld!");
	}else{
		out.println(request.getAttribute("inputText"));
	}
	%>
	</p>
</body>
</html>

Étant donné que JSP est au format HTML, lors de l'incorporation de code Java, Nous l'intégrerons dans la balise «<% ...%>». Pour afficher des caractères sur une page Web, entrez la chaîne de caractères que vous souhaitez afficher dans l'argument de ʻout.println (); `. De plus, vous pouvez générer une chaîne de caractères avec «<% = variable%>». Si vous souhaitez lire un fichier externe de CSS ou JavaScript, remplissez la partie en-tête ainsi que HTML.

De cette manière, il est plus facile de se développer en séparant les rôles du servlet en charge du traitement et du JSP en charge de l'affichage. Cependant, si vous souhaitez gérer une application Web tout en stockant et en gérant certains types de données, vous ne pouvez pas développer efficacement en les séparant simplement en un servlet et une JSP. Vous avez besoin d'un serveur capable de stocker et de gérer de grandes quantités de données. Le serveur qui peut stocker et gérer cette grande quantité de données est le ** serveur de base de données **. MySQL, Oracle DataBase, PostgreSQL, etc. sont des logiciels de serveur de base de données bien connus. En utilisant un tel serveur de base de données, il est possible de gérer un grand nombre de bases de données via une application web. Et lorsque vous développez une application Web en utilisant une grande quantité de base de données, vous pouvez effectuer efficacement un développement à grande échelle en utilisant la méthode de développement appelée ** modèle MVC **.

Modèle MVC

Le modèle MVC développe le logiciel d'application en le divisant en trois rôles: ** Modèle **, ** Vue ** et ** Contrôleur **. Je vais expliquer brièvement chacun d'eux. Model Le modèle est responsable du traitement de l'application. Par exemple, gérez les données, accédez aux bases de données et gérez les méthodes. Le processus est exécuté selon les instructions du contrôleur. Un fichier java typique est le modèle. View La vue est responsable de l'affichage de l'application. Le résultat de la sortie est transmis par le contrôleur. La vue est un fichier JSP écrit au format HTML. Controller Le contrôleur reçoit les informations entrées de View (écran), appelle Model (traitement et données) et est en charge de la sortie du résultat vers View. En d'autres termes, le processus pour une vue spécifique et le flux d'un processus spécifique sont écrits dans un contrôleur. La classe de servlet est le contrôleur.

Flux de modèle MVC

Le flux de traitement de l'application, divisée en ces trois rôles, est le suivant. ** 1. Le client envoie un message de demande au serveur ** ** 2. Le contrôleur de l'application est exécuté en fonction du message Request et appelle le processus Model ** ** 3. Le modèle appelé depuis le contrôleur accède à la base de données ou exécute le traitement ** ** 4. Le modèle transmet le résultat du traitement au contrôleur ** ** 5. Le contrôleur génère des sorties vers View en fonction du résultat du traitement (génération de texte HTML) ** ** 6. Le serveur envoie un message Resonse au client et la page Web s'affiche ** Il s'agit d'un flux simple du modèle MVC, mais à proprement parler, il existe des types tels que MVC2, MVP et MVVM, et il doit être modifié de manière appropriée en fonction de l'application à développer.

Flux de l'ensemble de l'application Web

Sur la base de ce qui précède, le mécanisme global d'une application Web utilisant Java est le suivant. Bien entendu, il existe un client Web côté client et des serveurs Web, des serveurs d'applications et des serveurs de base de données côté serveur. Lors de la création d'un serveur, installez un serveur Web, un serveur d'applications, un serveur de base de données, etc. et exécutez chacun d'eux, de sorte que lorsque vous accédez à l'application Web, elle fonctionne normalement. Si vous ajoutez une nouvelle application, vous pouvez installer, exécuter et étendre le serveur d'applications qui l'exécute.

référence

Yusuke Komori (2010/4/10) "Introduction à la technologie Web pour devenir un professionnel" -Pourquoi ne pouvez-vous pas développer un système Web? "Société d'examen technique