Diferència entre revisions de la pàgina «Exercici 6»
De wikiserver
| Línia 24: | Línia 24: | ||
xhr.open("GET","exercici6.php?q="+input.value); | xhr.open("GET","exercici6.php?q="+input.value); | ||
xhr.send(null); | xhr.send(null); | ||
| − | } | + | }; |
xhr.onreadystatechange=function (){ | xhr.onreadystatechange=function (){ | ||
| Línia 31: | Línia 31: | ||
} | } | ||
| − | } | + | }; |
</script> | </script> | ||
</body> | </body> | ||
| Línia 71: | Línia 71: | ||
}); | }); | ||
| − | } | + | }; |
</script> | </script> | ||
| Línia 103: | Línia 103: | ||
}); | }); | ||
| − | } | + | }; |
</script> | </script> | ||
Revisió del 11:44, 7 abr 2022
Contingut
Programa de servidor exercici6.php
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>
