Diferència entre revisions de la pàgina «Exercici 6»
De wikiserver
(Es crea la pàgina amb «== Programa de servidor '''exercici4.php''' == <source lang=php> </source> == Programa de client '''exercici4.html''' amb objecte XMLHtmlRequest == <source lang=ja...».) |
|||
| Línia 1: | Línia 1: | ||
| − | == Programa de servidor ''' | + | == Programa de servidor '''exercici6.php''' == |
<source lang=php> | <source lang=php> | ||
| Línia 5: | Línia 5: | ||
</source> | </source> | ||
| − | == Programa de client ''' | + | == Programa de client '''exercici6.html''' amb objecte XMLHtmlRequest == |
| − | <source lang= | + | <source lang=html> |
| + | <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> | ||
</source> | </source> | ||
| − | |||
| − | <source lang=javascript> | + | == Programa de client '''exercici6.html''' amb FETCH == |
| + | |||
| + | <source lang=html> | ||
| + | <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> | ||
</source> | </source> | ||
| − | == Programa de client ''' | + | == Programa de client '''exercici6.html''' amb AXIOS == |
| + | |||
| + | <source lang=html> | ||
| + | <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> | ||
</source> | </source> | ||
Revisió del 12:42, 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>
