AJAX JSP Tooltip WebApp

[Stefan2902]

Hallo,

Ich möchte meine Web Applikation erweitern und habe zum Ziel, Daten aus einem RESTful Webservice als Tooltip im meiner JSP Seite beim mouseover Event anzuzeigen. Diesbezüglich habe ich zwei Probleme/Fragen.

Zunächst aber meine Implementierung. Ich habe einen RESTful Webservice deployed, der die folgenden Daten im JSON Format zurückliefert (wahlweise auch in XML):

[XML]
{
"gameList": [{
"awayTeam": "FC Schalke 04",
"gameId": "19705",
"goalsAwayTeam": "2",
"goalsHomeTeam": "2",
"homeTeam": "Hannover 96",
"matchDate": "2012-08-26T17:30:00+02:00"
}, {
"awayTeam": "FC Augsburg",
"gameId": "19712",
"goalsAwayTeam": "1",
"goalsHomeTeam": "3",
"homeTeam": "FC Schalke 04",
"matchDate": "2012-09-01T15:30:00+02:00"
}, {
"awayTeam": "FC Schalke 04",
"gameId": "19727",
"goalsAwayTeam": "2",
"goalsHomeTeam": "0",
"homeTeam": "SpVgg Greuther Fürth",
"matchDate": "2012-09-15T18:30:00+02:00"
}, {
"awayTeam": "FC Bayern München",
"gameId": "19729",
"goalsAwayTeam": "2",
"goalsHomeTeam": "0",
"homeTeam": "FC Schalke 04",
"matchDate": "2012-09-22T15:30:00+02:00"
}, {
"awayTeam": "SC Freiburg",
"gameId": "19848",
"goalsAwayTeam": "3",
"goalsHomeTeam": "1",
"homeTeam": "FC Schalke 04",
"matchDate": "2012-12-15T18:30:00+01:00"
}]
}
[/XML]

Da ich keine Vorkenntnisse mit AJAX habe, habe ich ein Beispiel aus dem Internet genommen und nach meinen Bedürfnissen angepasst. In diesem Beispiel verwende ich den folgenden Java Script Code:

function createXMLHttpRequest(){
  // See [url=http://en.wikipedia.org/wiki/XMLHttpRequest]XMLHttpRequest - Wikipedia, the free encyclopedia[/url]
  // Provide the XMLHttpRequest class for IE 5.x-6.x:
  if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {}
    throw new Error( "This browser does not support XMLHttpRequest." )
  };
  return new XMLHttpRequest();
}

var AJAX = createXMLHttpRequest();

function handler() {
  if(AJAX.readyState == 4 && AJAX.status == 200) {
	
	  alert(AJAX.responseText);
	  //var doc = AJAX.responseXML;
	  //alert(doc);
	  
      var json = eval('(' + AJAX.responseText +')');
      alert (json.toString());
      alert('Success. Result: name => ' + json.id + ',' + 'balance => ' + json.id);
  }else if (AJAX.readyState == 4 && AJAX.status != 200) {
    alert('Something went wrong...');
  }
}

function show(){
		var url = "http://localhost:8080/RESTfulExposeBundesliga/rest/bundesliga/games/6";
	alert(AJAX.readyState);
  AJAX.onreadystatechange = handler;
  AJAX.open("GET", url);
  AJAX.send("");
};

Das Alert Statement in Zeile 19 liefert mir auch das gewünscht Ergebnis (siehe Anhang Alert.png). Soweit alles gut.

Hier nun meine Fragen:

1) Wie parse ich die Collection in JavaScript, um ein Ergebnis zu erhalten, was ungefähr so aussieht:

FC Schalke 04 - SC Freiburg 3:0
Bayern München - Bor. Dortmund 0:14

Mit normalen Java mitteln würde ich Gson nutzen und aus der Response eine ArrayList von Game erzeugen, welche ich dann durchlaufen kann und den String generiere. Wie aber funktioniert das in JavaScript? Gibt es einen einfachen Weg die Collection zu durchlaufen und u.a. String zu erzeugen?

2) Sobald ich den String erzeugt habe, würde ich ihn dann gerne als Tooltip anzeigen lassen, wenn ich mit der Maus über einen Eintrag in meiner JSP Seite fahre? Hat jemand eine Idee, wie ich das umsetzen kann? Auf das mouseover Event zu reagieren habe ich mir ungefähr so vorgestellt:

<a href="#" onmouseover="javascript:show();"> test</a>

Aber wie dann die Response als Tooltip anzeigen zu lassen?

Hat jemand eine Idee zu diesen beiden Fragen?

Vielen Dank und Gruß

Stefan

 

[ARadauer]

Zum ajax thema würd ich mir auf jeden fall jquery ansehen... Das spart viel arbeit

 

[Stefan2902]

Vielen Dank für deine schnelle Antwort.

Hast du eine Idee, wo ich anfangen kann? Grundlagen JQuery oder fällt die was ein, was vielleicht ein wenig spezifischer bei meinem Problem helfen kann?

Danke und Gruß

Stefan

 

[Stefan2902]

Ich habe mir nun mal ein paar JQuery / AJAX / JSON samples angesehen und bin zu folgendem Zwischenstand gekommen:

<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>

<title>Insert title here</title>
</head>
<script type="text/javascript">

	$("document").ready(function() {
		$.ajax({
		     type: "GET",
		     url: "http://localhost:8080/RESTfulExposeBundesliga/games/6",
		     async: false,
		 	 dataType: "json",success: function(event, XMLHttpRequest, ajaxOptions){
			 alert("event= "+event);alert("XMLHttpRequest= "+XMLHttpRequest);
			 alert("ajaxOptions= "+ajaxOptions);},
			 error: function(xhr) {
			 alert('Error! Status = ' + xhr.status);}
		});
		
	});
</script>

<body>
  <a href="#" onclick="javascript:show();"> Click here to get JSON data from the server side</a>
  <br><a href="#" onmouseover="javascript:show();"> test</a>
</html>

Dieser JQuery Aufruf liefert mir nun auch den XMLHttpRequest. Ein Idee, wie ich das nun parsen kann, um o.g. String zu erzeugen?

 

[Stefan2902]

Hallo,

Das Problem mit dem Tooltip habe ich nun gelöst. Verwende einfach das Title Attribut eines DIV Containers. Nichts desto Trotz habe ich noch Probleme mit meinem AJAX Webservice call.

Leider liefert mir die Zeile

alert(XMLHttpRequest.responseText);)

nur undefined zurück.

$("document").ready(function() {
	$("#outer").mouseover(function() {
	  $("#outer").css("background-color","green");
 	  $.ajax({
           type: "GET",
           url: "http://localhost:8080/RESTfulExposeBundesliga/rest/bundesliga/games/6",
           dataType: "json",success: function(event, XMLHttpRequest, ajaxOptions){
         	  alert("V:" + XMLHttpRequest.responseText);
         	  var json = eval('('+ xmlHttpRequest.responseText +')');
         	  alert("d:" +json.gamelist);},
           error: function(xhr) {
           alert('Error! Status = ' + xhr.status);}
      });	  
	  $("#outer").attr("title", "This is the hover-over text");
	});
});

Nutze ich eine REST Console bekomme ich jedoch über o.g. GET Call folgende Werte:

[XML]
{
"gameList": [{
"awayTeam": "Bayer Leverkusen",
"gameId": "19710",
"goalsAwayTeam": "1",
"goalsHomeTeam": "2",
"homeTeam": "Eintracht Frankfurt",
"matchDate": "2012-08-25T18:30:00+02:00"
}, {
"awayTeam": "Hamburger SV",
"gameId": "19849",
"goalsAwayTeam": "0",
"goalsHomeTeam": "3",
"homeTeam": "Bayer Leverkusen",
"matchDate": "2012-12-15T15:30:00+01:00"
}]
}
[/XML]

Ist das JSON Format nicht valide? Wie kann ich feststellen, ob Daten zurückgeliefert wurden?

Any idea?

Gruß

Stefan

 

[Stefan2902]

Eine komische Sache ist mir noch aufgefallen. Wenn ich den AJAX Code, der innerhalb der JQuery steht lösche und stattdessen das JavaScript show() aufrufe, was ich in meinem initialen Post bereits geposte habe, dann bekomme ich zumindest Ergebnisse vom REST call. Ein alert( ....responseText) liefert mir dann die Ergebnisse. Leider weiß ich jedoch nicht, wie ich die Ergebnisse an die JQuery zurückgeben kann, so dass ein String angezeigt wird.

 

[Stefan2902]

Folgender Code scheint für mich zu funktionieren:

<script type="text/javascript">

 function createXMLHttpRequest(){

	if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() {
	    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch(e) {}
	    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch(e) {}
	    try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}
	    try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
	    throw new Error( "This browser does not support XMLHttpRequest." );
	  };
	  return new XMLHttpRequest();
	}
	 
	var AJAX = createXMLHttpRequest();
	 
	function handler() {
	  if(AJAX.readyState == 4 && AJAX.status == 200) {
		  $(".game").attr("title", AJAX.responseText);
	  }else if (AJAX.readyState == 4 && AJAX.status != 200) {
	    //alert('Something went wrong...');
	  }
	}
	 
	function show(gameId){
	  var url = "http://localhost:8080/RESTfulExposeBundesliga/rest/bundesliga/games/" + gameId;
	  AJAX.onreadystatechange = handler;
	  AJAX.open("GET", url);
	  AJAX.setRequestHeader("Accept","text/plain");
	  AJAX.setRequestHeader("Content-Type","text/plain");
	  AJAX.send("");
	  setTimeout(function() {  AJAX.abort();  },500);
	}; 
	
</script>

Der Aufruf sieht wie folgt aus:

<td align=center class="game" onmouseover="javascript:show(<%=spielValue.getHome_team().getId()%>);"><%=spielValue.getHome_team().getName()%></td>

Habe zwar noch ein Problem, aber das werde ich separat posten.