XMLHttpRequest response leeg?

Door R Moos op 12-08-2020 19:53 gewijzigd op 12-08-2020 20:18

1.769 views

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!) :

    <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!:

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

Iemand een idee hoe dit kan?

Adoptive Solution

12-08-2020 20:12

Je script doet het niet omdat op regel 4 een ; ontbreekt.

alert(xhr.responseText);

R Moos

12-08-2020 20:33

Ik heb code zojuist iets aangepast (zie initiële bericht), maar lijkt nog niet te werken. Komt niet bij de alert terecht.

Adoptive Solution

12-08-2020 20:49

Ik heb er dit van gemaakt :

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

</script>

<div style="width: 51%; height: 200px; margin:20px; margin-top:100px;padding:10px;">

	<div id="resultNameSuggestion">resultNameSuggestion</div>

	<p><a href='#' onclick='randomizeName("abcdefghij")'>Autofill</a></p>

</div>

En het PHP bestand dat iets terugstuurt :

<?php
$input = $_GET['letter'];
echo $input . ' / ' . str_shuffle ( $_GET['letter'] );
?>

R Moos

13-08-2020 00:08 gewijzigd op 13-08-2020 00:09

Bedankt! Het gaat mij echter met name om de functie getAutoFillNames(). Ik wil hierin een XMLHttpRequest creëren, maar komt niet in de "IF".

Adoptive Solution

13-08-2020 07:42

Ik heb even hier gespiekt :

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

en dit ervan gemaakt.

<script>
function getAutoFillNames()
{
	var xhr = new XMLHttpRequest();
	xhr.open( 'GET', 'localhost', true);
	xhr.onreadystatechange = function() 
	{
		if( xhr.readyState === XMLHttpRequest.DONE )
		{
			if ( this.readyState == 4 && this.status == 200 ) 
			{
				alert( 'test' );
			} else {
				alert( xhr.status );
			}
		}
	}
	xhr.send();
}
</script>

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

R Moos

13-08-2020 10:36

De xhr.Send() ontbrak in mijn code, waardoor er niets uitevoerd werd! Bedankt!!

Thomas van den Heuvel

13-08-2020 20:02

Als je je dan toch wilt verdiepen in jQuery, deze kan ook (en wat mij betreft een stuk makkelijker) met AJAX-requests omgaan.

Reageren

Inloggen om te reageren