Diferència entre revisions de la pàgina «Exercici 6»

De wikiserver
Dreceres ràpides: navegació, cerca
(Programa de servidor exercici6.php)
 
Línia 1: Línia 1:
== Programa de servidor '''exercici6.php''' ==
 
 
Obtingut de https://www.w3schools.com/xml/ajax_php.asp
 
 
<source lang=php>
 
<?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;
 
?>
 
</source>
 
 
 
== Programa de client '''exercici6.html''' amb objecte XMLHtmlRequest ==
 
== Programa de client '''exercici6.html''' amb objecte XMLHtmlRequest ==
  

Revisió de 18:19, 14 abr 2023

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>