--------------------------------------------------------------------------------

Bonjour,
j'ai une page web composée de plusieurs divisions <div>
je souhaite a partir d'un lien d'une des divison , mettre a jours une autre division sans recharger toute la page , je sais qu'il existe une solution en ajax , mais je sais pas laquelle , merci d'avance de bien vouloir m'aider.
Cordialement


oila un exemple d'une page web ajax.jsp

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<%@taglib uri="http://java.sun.com/jstl/xml_rt" prefix="x_rt"%><%@taglib
	uri="http://java.sun.com/jsf/core" prefix="f"%><%@taglib
	uri="http://java.sun.com/jsf/html" prefix="h"%><%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mon super site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link   rel="stylesheet"  media="screen"  title="Exemple"  type="text/css" href="1.css" />
 
</head>
<body>
 
<f:view>
<!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
 
       <!-- Les menus -->
 
       <div id="menu">        
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
 
 
                   <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
               </ul>
           </div>
 
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page4.html">Lien</a></li>
                   <li><a href="page5.html">Lien</a></li>
                   <li><a href="page6.html">Lien</a></li>
               </ul>
           </div>        
       </div>
 
       <!-- Le corps -->
 
       <div id="corps">
           <h1>Mon super site</h1>
 
           <p>
               Bienvenue sur mon super site !<br />
               Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
           </p>
 
           <h2>A qui s'adresse ce site ?</h2>    
           <p>
               A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
               Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
           </p>
 
           <h2>L'auteur</h2>    
           <p>
               L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
               Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
               Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
           </p>
       </div>
 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
           <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
       </div>
 
 
 
</f:view>
</body>
</html>
je veux si je click sur un lien d'un menu <li><a href="page1.html">Lien</a></li>
que la partie du <!-- Le corps -->
qui change pas la page completement dans <!-- Le corps -->charger par exemple un autre text ou bien des calcule et rester toujour sur mem page ajax.jsp

et le fichier 1.css

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("image/1.jpg");
}
 
/* L'en-tête */
 
#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("image/fr.gif");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
 
/* Le menu */
 
#menu
{
   float: left;
   width: 120px;
}
 
.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
 
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}
 
.element_menu a
{
   color: #B3B3B3;
}
 
.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}
 
 
/* Le corps de la page */
 
#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
 
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}
 
#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
 
#corps h2
{
   height: 30px;
 
   background-image: url("images/titre.png");
   background-repeat: no-repeat;
 
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}
 
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 5px;
   clear: both;
 
   text-align: center;
 
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}