XMLHttpRequest response leeg?
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 (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
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 (php)
1
<td><a href='#' onclick='getAutoFillNames()'>Autofill</a></td>
Gewijzigd op 12/08/2020 20:18:39 door R Moos
Code (php)
1
alert(xhr.responseText);
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>
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 :
Code (php)
1
2
3
4
2
3
4
<?php
$input = $_GET['letter'];
echo $input . ' / ' . str_shuffle ( $_GET['letter'] );
?>
$input = $_GET['letter'];
echo $input . ' / ' . str_shuffle ( $_GET['letter'] );
?>
Gewijzigd op 13/08/2020 00:09:03 door R Moos
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange
en dit ervan gemaakt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
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>
