[FRAGE] JSON/RestFUL-Service und Javascript funktionieren nicht?!

[markoo91]

Hallo Leute!

Ich begann vor kurzem ein Webinterface mit Bootstrap aufzubauen. Dabei wollte ich Javascript benutzen um JSON-Daten von einem RestFUL- Service zu laden.

Diesen RestFul-Service baute ich mittels Java auf und der sieht so aus:

@GET
@Path("test")
@Produces(MediaType.TEXT_HTML)
public String createTestJson(){

    JSONObject jsobject= new JSONObject();

    try {
        jsobject.append("test1", "test");
        jsobject.append("test2", "test");
        jsobject.append("test3", "test");
        jsobject.append("test4", "test");
        jsobject.append("test5", "test");
        jsobject.append("test6", "test");
        jsobject.append("test7", "test");

    }catch(Exception e){
        e.printStackTrace();
    }

    return jsobject.toString();

}

Wenn ich die URL- des Rest-Services aufrufe, bekomme ich einen JSON-String zurück:

{"test1":["test"],"test2":["test"],"test3":["test"],"test4":["test"],"test5":["test"],"test6":
["test"],"test7":["test"]}

Weiters habe ich nun eine Javascript Funktion erstellt, welche die JSON-Daten mittels eines GET-Aufrufs laden sollte:

 function loadJSON()
{
   var data_file = "http://127.0.0.1:8085/Rest/test/test";
   var http_request = new XMLHttpRequest();
   try{
      // Opera 8.0+, Firefox, Chrome, Safari
      http_request = new XMLHttpRequest();

   }catch (e){
      // Internet Explorer Browsers
      try{
         http_request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }

   http_request.onreadystatechange  = function(){
      if (http_request.readyState == 4  )
      {

        alert(http_request.responseText.length);
        var jsonObj = JSON.parse(http_request.responseText);

        document.getElementById("test1").innerHTML =  jsonObj.test1;
        document.getElementById("test2").innerHTML = jsonObj.test2;
      }
   }
   http_request.open("GET", data_file, true);
   http_request.send();
}

Ich habe das Skript dann auch mit einem Debugger gut analysiert und kann folgendes berichten:

Netzwerk:
GET- Anfrage mit dem JSON-String als Antwort: 200 OK

XMLHTTPRequest- Object nach empfangen der Daten:

DONE 4 HEADERS_RECEIVED 2
LOADING 3
OPENED 1 UNSENT 0
mozAnon false
mozBackgroundRequest false 
mozSystem false
onloadend null
ontimeout null
readyState 1
response ""
responseText ""
responseType "" 
responseXML null 
status 0

Hier kann man erkennen, dass der

ResponseText

ein leerer String ist.


Somit wird ein Fehler (in der Konsole) beim Parsen des JSON-Strings geworfen.

var jsonObj = JSON.parse(http_request.responseText);

Meine Frage nun: Wieso kommt hier ein leerer String zurück? Ich habe das empfangen der JSON-Daten mit Java versucht und dies klappte einwandfrei.

Ist dies hier ein Fall für php? Denn die Weboberfläche befindet sich dann später nicht auf dem selben Client wie der Server (somit muss sich die IP-immer ändern?)


Aber Generell: Warum funktioniert dies hier nicht?



---Zusätzlich------

Anfragen-Header:

Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Encoding gzip, deflate Accept-Language de-de,de;q=0.8,en-us;q=0.5,en;q=0.3 
Connection keep-alive Host 127.0.0.1:8085 
Origin null User-Agent Mozilla/5.0 (Windows NT 6.3; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0

Antwort- Header:

Content-Type application/xhtml+xml 
Date Mon, 24 Aug 2015 22:56:18 GMT Server Apache-Coyote/1.1 
Transfer-Encoding chunked

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

Vielleicht könnt ihr mir helfen, denn ich bin schon am Rande des verzweifeln..


Ich bitte um Hilfe!


Marko

 

[kkapsner]

Dir steht die SOP im Weg. Dein RestFUL-Server muss die CORS-Header mitsenden.

 

[markoo91]

Vielen Vielen Danke!
Dein Tipp hat mich zur Lösung geführt! Aber auf die CORS wäre ich echt nicht gekommen.


Zur Vollständigkeit ist hier noch mein veränderter Restful-Service:

@Path("/export")
public class Export {
	
	@GET
	@Path("excel")
	@Produces(MediaType.TEXT_HTML)
	public Response createExcelExport(){
JSONObject jsobject= new JSONObject();
		
		try {
			jsobject.append("test1", "test");
			jsobject.append("test2", "test");
			jsobject.append("test3", "test");
			jsobject.append("test4", "test");
			jsobject.append("test5", "test");
			jsobject.append("test6", "test" );
			jsobject.append("test7", "test");
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	
		return Response.ok()
				.entity(s)
				.header("Access-Control-Allow-Origin", "*")
				.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
				.build();
		
		
		

	}

 

[kkapsner]

Vielen Vielen Danke!

Bitte - gern geschehen.

Super, dass du deine Lösung hier zeigst.