Odczytanie tekstu z body w javascript

pytanie zadane 11 lipca 2020 w JavaScript przez Szyszka Gaduła (3,510 p.)

Witam. JavaScript mam podłączone do strony index.html, i przy użyciu JavaScript chciał bym odczytać to co zawiera body z pliku np. ahrwec.html. W jaki sposób mogę to zrobić?

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Chcesz w JavaScript odczytać treść zewnętrznego pliku? Najpierw kod HTML z tego pliku powinieneś pobrać Ajaxem, następnie sparsować i dopiero potem dobierać się do jego elementów w DOM.

1 odpowiedź

odpowiedź 11 lipca 2020 przez Tomek Sochacki Ekspert (227,490 p.)

Ale co Ty dokładnie chcesz zrobić? Możesz sobie pobrać document.body.innerHTML ale niezbyt widzę sens takiej operacji, chyba, że mówimy o jakimś skrypcie robiącym coś z contentem strony, jakiś pupetter czy coś? Ale to też to nie jest najlepszy kierunek... napisz lepiej jaki masz problem BIZNESOWO, a nie implementacyjnie.

komentarz 11 lipca 2020 przez Szyszka Gaduła (3,510 p.)

Okej, tak wygląda kod Java:

package pl.Szyszka;

import javax.servlet.http.HttpServlet;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.util.Scanner;

public class RegisterSystem extends HttpServlet {
    public static String saveLogin(String login, String response) throws IOException {
        File file = new File("C:/Users/Windows/Desktop/JavaEE/IntelliJ Projects/WebApp1/src/main/resources/db.txt");
        //checks if the login is repeated
        String checkedLogin = "";
        Scanner scanner = new Scanner(file);
        if(scanner.hasNextLine()) {
            while (scanner.hasNextLine() && !login.equals(checkedLogin)) {
                if (!login.equals(checkedLogin)) {
                    checkedLogin = scanner.nextLine();
                }
            }
        }
        if(!file.canWrite() || !file.exists()){
            response = "error: the file is not writeable or the file does not exist";
        }
        else if(login.equals(checkedLogin)){
            response = "error: login is already in use";
        }
        else if(!login.equals(checkedLogin)){
            response = login + " has been successfully registered";
            FileWriter fileWriter = new FileWriter(file, true);
            fileWriter.write(login+"\n");
            fileWriter.close();
        }
        return response;
    }
}

a tak JS:

function getLogin(){
    var login = document.getElementById("loginField").value;
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "js/fordevelopers.jsp?name=" + login, true);
    xhttp.send();
}

I w tym kodzie JS chcę pobrać to, co zwróci response w kodzie Java na stronie localhost:8080/js/fordevelopers.jsp?name= + login

( a to co zwróci umieszczane jest w <body></body>. Kod JSP:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="pl.Szyszka.RegisterSystem"%>
<html>
<head>
    <title>InformationForDevelopers</title>
</head>
<body>
<%=RegisterSystem.saveLogin(request.getParameter("name"), "")%>
</body>
</html>

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Przed xhttp.open umieść listener nasłuchujący na event zakończenia zapytania i w nim odczytaj response:

xhttp.addEventListener('load', event => {
    console.log('response: ', event.response || xhttp.response);
});

Dobrze by było zwrócić z backendu response o content-type "text/html".

To następnie sparsuj i odczytaj z tego body.

komentarz 12 lipca 2020 przez Szyszka Gaduła (3,510 p.)

Zrobiłem coś takiego:

function getLogin(){
    var login = document.getElementById("loginField").value;
    var xhttp = new XMLHttpRequest();
    var domParser = new DOMParser();
    var x = xhttp.addEventListener('load', event => {
        console.log('response: ', event.response || xhttp.response);
    });
    var y = domParser.parseFromString(""+x, "text/html");
    xhttp.open("GET", "js/fordevelopers.jsp?name=" + login, true);
    xhttp.send();
    document.getElementById("notificationField").innerHTML = y.body.innerHTML;
}

I to mi zawsze zwraca "undefined" w polu "notificationField", dlaczego?

komentarz 12 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Zapytanie ajaxowe wykonało się asynchronicznie, więc HTML zwrócony z serwera jest dostępny wewnątrz event listenera (linia 6), a Ty próbujesz to odczytać poza nim. Metoda addEventListener zwraca undefined, dlatego zmienną x, y (swoją drogą nadaj im jakieś znaczące nazwy) oraz przypisanie treści body do innego elementu HTML powinieneś wykonać w listenerze - ewentualnie wywołać w nim funkcję, która zrobi to poza nim (powinieneś wtedy przekazać tam treść zwróconą z serwera).

Przykład:

xhttp.addEventListener('load', event => {
    var response = event.response || xhttp.response;
    console.log('response: ', response);

    var parsedResponse = domParser.parseFromString(response, "text/html");
    document.getElementById("notificationField").innerHTML = parsedResponse.body.innerHTML;
});
xhttp.open("GET", "js/fordevelopers.jsp?name=" + login, true);
xhttp.send();