[JS/AJAX] XMLHttpRequest response leeg?

[RoeltjeM]

Hi!

Ik ben al heel veel jaren bekend met PHP, maar door een ander baan heb ik dit ten tijde van opkomst van AJAX (ca 10 jaar terug?) enigszins laten verwateren.
Nu heb ik mij bedacht en wil ik toch meer kennis hebben van eerst AJAX, vervolgens JQuery.
Ik ben nu begonnen met wat basis-uitwerkingen, en heb hiervoor de volgende code(s) geschreven (erg basaal!) :

code:

    <script>
        function getAutoFillNames() {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() 
          {
            if (this.readyState == 4 && this.status == 200) 
            {
                alert('test');
            }
          }
        }
      function randomizeName(inputAlphabet)
      {
          if(inputAlphabet == "")
          {
            document.getElementById("resultNameSuggestion").innerHTML = "";
            return;
          }
          else
          {
              var xmlhttp = new XMLHttpRequest();
              xmlhttp.onreadystatechange = function() 
              {
                if (this.readyState == 4 && this.status == 200) 
                {
                    document.getElementById("resultNameSuggestion").innerHTML = this.responseText;
                }
              };
                xmlhttp.open("GET", "files/NameDatabase.php?randomize=yes&autofill=&letter=" + inputAlphabet, true);
                xmlhttp.send();
                var refreshbutton = document.getElementById('resultNameRefreshButton');
                refreshbutton.style.display = "block";
            }
        }

    </script>

Nu lukt het mij niet om in de functie getAutoFillNames de XMLHttpRequest aan de praat te krijgen. Als ik xhr.responseText bekijk, is deze ook leeg. In HTML heb ik de volgende code (was puur om even te testen!:

code:

<td><a href='#' onclick='getAutoFillNames()'>Autofill</a></td>

Iemand een idee hoe dit kan?

[ Voor 5% gewijzigd door RoeltjeM op 12-08-2020 20:19 ]

[Woy]

Eerste stap idee om in de browser debug tools te kijken. In de console of step through debugger. Op het netwerk tab kun je zien of er een request is geweest en of die gelukt is.

[RoeltjeM]

Woy schreef op woensdag 12 augustus 2020 @ 20:16:
Eerste stap idee om in de browser debug tools te kijken. In de console of step through debugger. Op het netwerk tab kun je zien of er een request is geweest en of die gelukt is.

Ik heb daar zojuist o.b.v. jouw suggestie naar gekeken. Ik zie inderdaad geen netwerk verzoek te worden verstuurd, terwijl mijn code toch wel erg plain, hoe kan dat ?

[Matis]

Het probleem is tweeledig. Allereerst dienen de HTML argumenten in double quotes (") te staan en niet in single (').
Daarnaast dien je je JavaScript functie-aanroep af te sluiten met een ;
Daarnaast zul je, als je wilt dat de browser niet de link volgt, maar stopt na het uitvoeren van de functie in het script false moeten retourneren binnen je onClick handler.

Je zou er ook voor kunnen kiezen om de href van een is te voorzien en in JavaScript die onClick handler te registreren op basis van die id.

Misschien is dat laatste wel eenvoudiger te debuggen.

[Matis]

Hier een soortgelijke vraag met, mijns inziens, een aantal nette oplossingen en een goede onderbouwing.
https://stackoverflow.com...nction-in-href-vs-onclick

[Josk79]

getAutoFillNames doet niet zoveel. hij maakt een XMLHttpRequest object, maar doet er verder niks mee.

Probeer de code van randomizeName en getAutoFillNames samen te voegen tot een werkende functie .

Het antwoord van @Matis begrijp ik niet. De aanhalingstekens is niks mis mee, en je gebruikt al keurig puntkomma's

[Afvalzak]

Josk79 schreef op woensdag 12 augustus 2020 @ 21:48:
getAutoFillNames doet niet zoveel. hij maakt een XMLHttpRequest object, maar doet er verder niks mee.

Probeer de code van randomizeName en getAutoFillNames samen te voegen tot een werkende functie .

Het antwoord van @Matis begrijp ik niet. De aanhalingstekens is niks mis mee, en je gebruikt al keurig puntkomma's

Het antwoord van Matis doelt op deze regel:

code:

<td><a href='#' onclick='getAutoFillNames()'>Autofill</a></td>

Hier hoort eigenlijk een ; achter de methode aanroep.
M.b.t. de return false: Dat maakt op zich weinig uit nu, maar de browser gaat nu de functie uitvoeren en vervolgens de pagina verversen (want er is op een linkje geklikt) en dat is niet wat je wilt denk ik.

Maar dit kan je ook oplossen door een preventDefault() toe te voegen.

https://stackoverflow.com...n-originating-from-onclic

[Kalentum]

Is xmlhttprequest ondertussen niet een beetje ouderwets? De 'nieuwe' manier is toch fetch

https://developer.mozilla...API/Fetch_API/Using_Fetch

[Josk79]

Woy schreef op woensdag 12 augustus 2020 @ 20:16:
Eerste stap idee om in de browser debug tools te kijken. In de console of step through debugger. Op het netwerk tab kun je zien of er een request is geweest en of die gelukt is.

In de console kun je inderdaad regeltje voor regeltje javascript code inkloppen en uitvoeren. Superhandig.

[RoeltjeM]

Josk79 schreef op woensdag 12 augustus 2020 @ 21:48:
getAutoFillNames doet niet zoveel. hij maakt een XMLHttpRequest object, maar doet er verder niks mee.

Probeer de code van randomizeName en getAutoFillNames samen te voegen tot een werkende functie .

Het antwoord van @Matis begrijp ik niet. De aanhalingstekens is niks mis mee, en je gebruikt al keurig puntkomma's

Klopt dat deze functie (nog) niet zoveel doet, maar dat komt ook omdat het niet lukt om een new XMLHttpRequest aan te maken. Immers, o.b.v. huidige code krijg ik niets terug qua statusText, maar komt de functie ook niet bij de 'if' uit om de alert te tonen. Dit, terwijl bij de functie randomizeName dit wel werkt.

Edit: Aaah!! Ik zie dat het werkt zodra je er een .open() en .send() commando bij voegt, tot die tijd reageert ie nergens op! Kan weer verder!

[ Voor 9% gewijzigd door RoeltjeM op 13-08-2020 00:16 ]