charger une partie d'une page

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

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:

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 
qui change pas la page completement dans charger par exemple un autre text ou bien des calcule et rester toujour sur mem page ajax.jsp

et le fichier 1.css

Code:

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;
}