[AJAX] Image Dynamique en AJAX et servlet JAVA

**Canary3d** · 28/02/2008, 10h45

Bonjour,
Voici mon pb :
Je voudrais afficher une image générée à partir d'un controlleur JAVA via AJAX dans une page HTML

L'image générée est de type jpeg.

Je suis débutant dans le domaine d'ajax, et evidement ce que je fais ne fonctionne pas

Voici le code de mon controleur qui génère l'image et renvoie un flux:
Pour info ce controleur fonctionne très bien puisque cela fonctionne très bien en mode "non-AJAX".

Ce qui m'interresse c'est de savoir si la définition de "response" est bonne (setHeader) et si il ne manque pas kke chose pour un fonctionnement AJAX

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
 
    public ModelAndView handleRequest(HttpServletRequest request,
			HttpServletResponse response) throws WebmapException,
			ServletException, IOException, ClassNotFoundException {
 
		if (log.isDebugEnabled()) {
			log.debug("**/ Affichage de la map /**");
		}
    	session = request.getSession();
    	map = (mapObj) session.getAttribute("Map");
   		if (log.isDebugEnabled()) {
   			log.debug("Current Scale :\t " + Double.toString(map.getScaledenom()));
   		}
   		response.setHeader("Pragma","no-cache");
   		//response.setHeader("Content-Type", "application/x-www-form-urlencoded");
   		//response.setIntHeader("Expires",-1);
   		response.setHeader("Content-Type", "image/jpeg");
		response.getOutputStream().write(cartoService.renderMap(map).getBytes());
   		response.getOutputStream().flush();
   		response.flushBuffer();
   		return null;
    }

voici maintenant ma page html avec l'appel à la servlet ("genererImage.html") qui execute le controleur (voir ci-dessus) :

2) Est ce que la méthode utilisée pour affecter le contenu du flux à la source (src) de mon image est la bonne ?

3) Y a t il une méthode spécifique pour récupérer la "response" avec un autre format que text (responseText) ou XML (responseXML) ?

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
 
<%@ include file="/inc/admin_include.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
	function submitForm()
	{ 
		var req = null; 
 
		document.ajax.dyn.value="Started...";
 
		if(window.XMLHttpRequest) {// Firefox   
			req = new XMLHttpRequest();   
		} else if(window.ActiveXObject) {// Internet Explorer   
			req = new ActiveXObject("Microsoft.XMLHTTP");   
		} else { // XMLHttpRequest non supporté par le navigateur
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest... Veuillez Utiliser Internet Explorer ou FireFox");   
			return;   
		}
 
		req.onreadystatechange = function()
		{ 
			document.ajax.dyn.value="Wait server...";
			if(req.readyState == 4)
			{
				if(req.status == 200)
				{
					document.ajax.dyn.value="Image Received";	
					var monImage = document.getElementById('image');
					if (monImage) {
						monImage.src = req.responseXML;
					}	
				}	
				else	
				{
					document.ajax.dyn.value="Error: returned status code " + req.status + " " + req.statusText;
				}	
			} 
		}; 
		req.open("POST", "genererImage.html", true); 
		req.send(null); 
	} 
	</script>
</head>
 
<body>
<FORM name="ajax" method="POST" action="">
 
<p><INPUT type="BUTTON" value="Submit" ONCLICK="submitForm()">
</p>
<p><input type="text" name="dyn" size="32" value=""></p>
<img src="" id="image">
</FORM>
</body>
</html>

Est ce quelqu'un pourrait me dire à quelle endroit je fais une erreur, voire même me renvoyer le code source de la solution ?.

merci pour le coup de main !

**jojosbiz** · 29/02/2008, 09h03

Salut,
si c'est bien l'url de l'image que tu renvoies, la méthode me semble être la bonne, à part qu'il faudrait p-e utiliser "responseText" et pas "responseXML".

**Canary3d** · 29/02/2008, 12h04

Non, justement, ce n'est pas l'url mais un flux de type byte[]. Le controleur génère une image et "place" dans le "response" le flux outputStream.

Cette méthode fonctionne très bien lorsque je n'utilise pas d'ajax et que je fais tout simplement dans une page html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img id="toto" src="genererImage.html">

[AJAX] Image Dynamique en AJAX et servlet JAVA

JavaScript

Discussions similaires

Partager

Partager