Exercici 6
De wikiserver
La revisió el 12:45, 7 abr 2022 per Jcomas (Discussió | contribucions)
Contingut
Programa de servidor exercici6.php
Obtingut de https://www.w3schools.com/xml/ajax_php.asp
<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= "<br>$name";
}
}
}
}
// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>Programa de client exercici6.html amb objecte XMLHtmlRequest
<html>
<body>
<h1>exercici 6 AJAX</h1>
<input type="text" id="input"></input>
<br>Suggeriments:
<div id="contingut"></div>
<script lang="javascript">
var xhr=new XMLHttpRequest();
var contingut=document.getElementById("contingut");
var input=document.getElementById("input");
input.oninput=function () {
xhr.open("GET","exercici6.php?q="+input.value);
xhr.send(null);
};
xhr.onreadystatechange=function (){
if(xhr.readyState==4 && xhr.status==200) {
contingut.innerHTML=xhr.responseText;
}
};
</script>
</body>
</html>
Programa de client exercici6.html amb FETCH
<html>
<body>
<h1>exercici 6 AJAX</h1>
<input type="text" id="input"></input>
<br>Suggeriments:
<div id="contingut"></div>
<script lang="javascript">
var contingut=document.getElementById("contingut");
var input=document.getElementById("input");
input.oninput=function () {
fetch("exercici6.php?q="+input.value)
.then( function(response){
if(response.ok) {
return response.text()
} else {
throw "Error a la crida Ajax";
}
})
.then(function(responseText){
contingut.innerHTML=responseText;
})
.catch(function(err) {
console.log(err);
});
};
</script>
</body>
</html>Programa de client exercici6.html amb AXIOS
<html>
<body>
<h1>exercici 6 AJAX</h1>
<input type="text" id="input"></input>
<br>Suggeriments:
<div id="contingut"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script lang="javascript">
var contingut=document.getElementById("contingut");
var input=document.getElementById("input");
input.oninput=function () {
axios.get("exercici6.php?q="+input.value)
.then(function(response){
contingut.innerHTML=response.data;
})
.catch(function(err) {
console.log(err);
});
};
</script>
</body>
</html>
