Ajax avec J2EE et Javascript XMLHttpRequest
J'essaye de faire un système d'autocomplétion sur une input.
J'ai déjà fait la fonction qui gère le surlignement des éléments, et je m'attaque à la partie Ajax.
Voici ma servlet:
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
| package com.autocompl.servlets;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Base
*/
@WebServlet("/Base")
public class Base extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Base() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println(request.getParameter("param1"));
response.setContentType("text/xml");
response.getWriter().write("<message>"+"<span>pilou</span><span>toto</span><span>mouais</span>"+"</message>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
} |
Pour l'instant je cherche juste à réussir à communiqué en direct avec la page, sans chercher dans la base de donnée encore.
Voici ma jsp avec le script (j'ai un problème qui fait qu eje n'arrive pas encore à l'externalisé, si des gens s'y connaissent en javaee, je veut bien de l'aide ici
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
|
<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/style.css" />
<title>AutoCompl</title>
</head>
<body>
<form method="post" action="">
<input type="search" name="searchbar" id="searchbar" />
</form>
<div id="autoZone"></div>
<script>
(function() {
var input = document.getElementById("searchbar");
input.addEventListener("keyup",function(e) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'base?param1='+e.currentTarget.value,true);
xhr.send(null);
xhr.addEventListener('readystatechange', function() {
if (xhr.readyState === xhr.DONE) {
var spans = xhr.responseXML.getElementsByTagName('span');
document.getElementById('autoZone').innerHTML="";
for(var i =0, l=spans.length; i<l; i++){
console.log(xhr.responseText);
spans[i].setAttribute("class", "propos");
document.getElementById('autoZone').appendChild(spans[i]);
document.getElementById('autoZone').appendChild(document.createElement('br'));
}
addListen();
}
}, false);
})
})();
//gère le surlignement
function addListen() { // Utilisation d une IIFE pour éviter les variables globales.
var propos = document.querySelectorAll('.propos');
console.log(propos);
propos[0].setAttribute('style',"color:white;background:blue;");
var current = propos[0];
var indCur=0;
var nbPro = propos.length;
for(i=0;i<nbPro;i++){
(function(i){
propos[i].addEventListener('mouseover',function(e){
current.setAttribute('style', "");
e.currentTarget.setAttribute('style',"color:white;background:blue;");
current=e.currentTarget;
indCur=i;
});
})(i);
};
document.addEventListener('keyup',function(e){
var code= e.keyCode;
if(code==38){
indCur--;
if(indCur<0){
indCur=nbPro-1;
}
current.setAttribute('style', "");
propos[indCur].setAttribute('style',"color:white;background:blue;");
current=propos[indCur];
}
if(code==40){
indCur++;
if(indCur>nbPro-1){
indCur=0;
}
current.setAttribute('style', "");
propos[indCur].setAttribute('style',"color:white;background:blue;");
current=propos[indCur];
}
});
}
</script>
</body>
</html> |
Le problème que j'ai c'est que la seconde balise span (<span>toto</span>) est considéré comme un undefined par le code derriere; donc il ne veut pas utilisé les fonctions spécifique aux Node. (alors qu'il l'a reconnais bien comme balise span comme il fait 3 tours de boucles)
http://s3-eu-west-1.amazonaws.com/sd...apture3674.PNG
*Merci d'avance si vous avez des idées de solutions :)
