Probleme mit einem AJAX-Call in einem dynamischen Webprojekt

pkm

Bekanntes Mitglied
Ich habe ein dynamisches Webprojekt (mit jsp-Seiten), bei dem ich verschiedene AJAX-Calls mit jQuery erfolgreich mache, da gab es nie Probleme.

Nun habe ich eine neue jsp-Seite, nachdem ich vergeblich mit einen AJAX-Call mit jQuery machen wollte, bin ich um gestiegen auf Vanilla-JavaScript, ud es klappt nach wie vor nicht, und ich verstehe nicht, woran das liegen kann.

Hier meine Funktion mit dem Call:

Javascript:
function forumContent() {
      
 
     var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
               if (xmlhttp.status == 200) {
                   alert("huhu");
               }
               else if (xmlhttp.status == 400) {
                  alert('There was an error 400');
               }
               else {
                   alert('Something else other than 200 was returned');
               }
            }
        };

        xmlhttp.open("POST", "Forum", true);
        xmlhttp.send();
        
    
}

… hier das Servlet:

Java:
package com.tutorial.jsp;

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 Forum
 */
@WebServlet("/Forum")
public class Forum extends HttpServlet {
    private static final long serialVersionUID = 1L;
      
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Forum() {
        super();
    }


    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        
        response.getWriter().append("success");
    }

}

Ich verstehe wirklich nicht, was da syntaktisch falsch sein kann. Es kommt immer die Antwort: "Something else other than 200 was returned".
 
So funktioniert es auch nicht:

Java:
<%@ page language="java" contentType="text/html; charset=UTF-8"
    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=UTF-8">
<title></title>

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style_forum.css">
</head>
<body>
    <script src="js/jquery.min.js"></script>
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
    
    
<script type="text/javascript">
$(document).ready(function() {
  
    var decodedCookie = decodeURIComponent(document.cookie);

    /*
     if(decodedCookie == '') {
         window.location.replace("http://localhost:8080/KSC/index.jsp");
     }
    */

    $('#saeule').html(forumContent());

});

//TODO: Vom Forum, wenn der Nutzer schon angemeldet ist, soll dieser ruhig in den Chat wechseln können un. umgekehrt.

function forumContent() {

        var dataToBeSent  = {
                    uNick :'nick',                       
                    uPassword :'pwd'
                    };
    
     $.ajax({
           url : 'Forum',
           data : dataToBeSent,
           type : 'POST',
           dataType : 'text',
           success : function(response) {
              
             if(response == "success") {
                      alert("test");
        
             }                               
           }
       });
    
    return "<h3>SPIELE</h3><h3>SPIELER</h3>";
}

</script>

  <div class="container">
     <div class="box-orange"><img src="pics/ksc.png"></div>
     <div class="box-blue"><button onclick="byeFunction()" type="submit" class="btn btn-primary">Abmelden</button></div>
     <div class="box">
        Unser Forum
     </div>
  </div>
 
 
<div class="container-fluid">
    <div class="row">
      <div class="col-sm-10 col-md-10 bg-success">
      <div id="saeule">
      </div>
      </div>
      <div id="saeule" class="col-sm-2 col-md-2 bg-warning">
        <p>Auf der rechten Seite können Forumstatistiken sowie neuste Themen und Beiträge genannt werden.</p>
      </div>
    </div>
  </div>


<script> 
    function byeFunction() {
 
      var delCookie = document.cookie += "; max-age=0;";

      document.cookie = delCookie;

      var cookieList = (document.cookie) ? document.cookie.split(';') : [];
      
      var cookieValues = {};
      for (var i = 0, n = cookieList.length; i != n; ++i) {
        var cookie = cookieList[i];
        var f = cookie.indexOf('=');
        if (f >= 0) {
          var cookieName = cookie.substring(0, f);
          var cookieValue = cookie.substring(f + 1);

          if(cookieName == "uname") {
              cookieValue = "";
          }
        }
      }
      
      window.location.replace("http://localhost:8080/KSC/index.jsp");
          
    }
 
</script>
 
</body>
</html>
 
Ich habe es jetzt auf die Schnelle mal angeschaut und kann syntaktisch keinen Fehler sehen. Hast du eventuell ein komplettes Projekt? Eventuell ist es etwas was rinsherum fehlt?

Anstatt XMLHttpRequest würde ich dir fetch empfehlen (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) das ist einfacher zu verwenden.
Ich habe mal ein Testprojekt aufgesetzt wo beides wunderbar funktioniert: https://github.com/cwansart/js-fetch-with-servlet-backend-test

Muss jetzt nochmal los, aber wenn du irgendwie ein Projektordner oder so bereitstellen könntest, das man lokal mal prüfen könnte, würde ich da später mal schauen.
 
Und um mögichst alle Fehlerquellen auszuschließen: was passiert, wenn du das ganze mit Postman oder curl o.ä. versuchst?
 
Der zurückgegebene Status ist 404. Ich konnte nicht herausfinden, weshalb, daher habe ich mich entschlossen, das Problem zu umschiffen, indem ich vermittels ActiveX über JavaScript ins Dateisystem schreibe - ist dies überhaupt möglich? Mir ist so etwas wie folgt vorgeschwebt:

Javascript:
    var fname = "C:\\PFAD\\dateiname.txt";
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var file = fso.CreateTextFile(fname, true, true);
    file.WriteLine("sometext");
    file.Close();

Der schreibt aber nicht in die Datei. Woran könnte das liegen?
 
Öm ok. Also ich möchte an dieser Stelle für Eure Hilfe danken. Hab aber auch ne Frage: Kann ich denn von JavaScript aus in eine Datei schreiben? Und falls ja, was ist Eurer Erfahrung nach die beste Technik, dies zu tun?
 
Was genau willst du denn am Ende erreichen?

Servlets kann man auf jeden Fall nicht mit Client-Seitigem JS ersetzten.
 
Naja, ich möchte in eine Datei schreiben. Geht das mit JavaScript?
Wo möchtest du in eine Datei schreiben? Auf dem Server oder auf dem Client?
Wenn beim ausprobieren Client und Server auf dem gleichen Rechner laufen, ist das manchmal schwer zu unterscheiden. Du must dir aber immer vorstellen, dass deine Webseite auf einem Server in New York liegt und ein Benutzer diese Webseite in seinem Browser in Buxtehude aufruft. Willst du die Datei nun in New York oder in Buxtehude speichern?
 
In New York. Aber das geht meines Wissens mit JavaScript alleine nicht. Daher bin ich da am Grübeln, was für Möglichkeiten ich da hab.
 

Zurück
Oben