Diferència entre revisions de la pàgina «Solució exercici2-ajax»

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «Fitxer js: <pre> var xhr; function ajax(){ if (window.ActiveXObject) { //Iexplorer xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else if (windo…».)
 
 
(6 revisions intermèdies per 2 usuaris que no es mostren)
Línia 1: Línia 1:
 +
'''POST'''
 +
 +
 
Fitxer js:
 
Fitxer js:
−
<pre>
+
<source lang="java">
 
var xhr;
 
var xhr;
  
 
function ajax(){
 
function ajax(){
−
     if (window.ActiveXObject) { //Iexplorer
+
     if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
−
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
 
−
    }
 
−
    else if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
 
 
             xhr = new XMLHttpRequest();
 
             xhr = new XMLHttpRequest();
 
     }
 
     }
Línia 14: Línia 14:
 
     }
 
     }
 
      
 
      
−
     xhr.open('POST', 'majuscules.php');
+
     xhr.open('POST', 'http://172.16.105.107/ajax/majuscules.php');
−
     xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+
     xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
 
     xhr.onreadystatechange = function() {
 
     xhr.onreadystatechange = function() {
 
if (this.readyState == 4) {
 
if (this.readyState == 4) {
 
if (this.status >= 200 && this.status < 300) {
 
if (this.status >= 200 && this.status < 300) {
−
document.getElementById('content').innerHTML =  
+
document.getElementById('content').innerHTML = this.responseText;
−
                            this.responseText;
 
 
}
 
}
 
}
 
}
 
     }
 
     }
  
−
     var content = "nombre=" +document.getElementById("nom").value +  
+
     var content = "nombre=" +document.getElementById("nom").value + "&apellido=" + document.getElementById("cognom").value;
−
        "&apellido=" + document.getElementById("cognom").value;
 
 
     xhr.send(content);
 
     xhr.send(content);
 
      
 
      
Línia 35: Línia 33:
 
}
 
}
 
window.onload = inici;
 
window.onload = inici;
−
</pre>
+
 
 +
</source>
  
 
Fitxer html:
 
Fitxer html:
−
<pre>
+
<source lang="html">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Línia 53: Línia 52:
 
     </body>
 
     </body>
 
</html>
 
</html>
−
</pre>
+
</source>
  
 
Fitxer php:
 
Fitxer php:
−
<pre>
+
<source lang="php">
 
<?php
 
<?php
 
header("Access-Control-Allow-Origin: *");
 
header("Access-Control-Allow-Origin: *");
Línia 70: Línia 69:
 
?>
 
?>
  
−
</pre>
+
</source>
 +
 
 +
'''GET'''
 +
 
 +
<source lang="java">
 +
<!DOCTYPE html>
 +
<html>
 +
    <head>
 +
        <title></title>
 +
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 +
    <script type="text/javascript">
 +
window.onload=function(){
 +
  var datos;
 +
 +
  function mostrar_datos () {
 +
    if (datos.readyState == 4  && datos.status == 200)
 +
 
 +
var parrafo = document.createElement("p");
 +
var contenido = document.createTextNode(datos.responseText);
 +
parrafo.appendChild(contenido);
 +
document.body.appendChild(parrafo);
 +
  }
 +
 
 +
  function iniciar() {
 +
    var url    = './mayus.php';
 +
    var params = 'nom='+ f.curso.value +'&cognom='+ f.tutor.value;
 +
    datos = new XMLHttpRequest();
 +
    datos.open("GET",url+'?'+params,true);
 +
    datos.onreadystatechange = mostrar_datos;
 +
    datos.send(null);   
 +
  }
 +
 
 +
  document.getElementById("boton").onclick=iniciar;
 +
  }
 +
 
 +
 
 +
</script>
 +
 
 +
</head>
 +
<body>
 +
  <form name="f" method="get" action="mayus.php">
 +
      <input type="text" name="nom" /> 
 +
      <input type="text" name="cognom" />
 +
      <button id="boton">botón</button>
 +
     
 +
  </form>
 +
  <div id="resultado">resultado</div>
 +
</body>
 +
</html>
 +
 
 +
</source>
 +
 
 +
 
 +
<source lang="php">
 +
<?php
 +
$nom = $_REQUEST['nom'];
 +
$cognom = $_GET['cognom'];
 +
 
 +
echo "nom ".$nom." cognom ".$cognom ;
 +
 
 +
?>
 +
</source>

Revisió de 16:40, 3 abr 2024

POST


Fitxer js: 

var xhr;

function ajax(){
    if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
            xhr = new XMLHttpRequest();
    }
    else {
            throw new Error("Ajax is not supported by this browser");
    }
    
    xhr.open('POST', 'http://172.16.105.107/ajax/majuscules.php');
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario.
    xhr.onreadystatechange = function() {
	if (this.readyState == 4) {
		if (this.status >= 200 && this.status < 300) {
			document.getElementById('content').innerHTML = this.responseText;
		}
	}
    }

    var content = "nombre=" +document.getElementById("nom").value + "&apellido=" + document.getElementById("cognom").value;
    xhr.send(content);
    
    
}
function inici(){
   document.getElementById("boton").onclick = ajax; 
}
window.onload = inici;

Fitxer html: 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="exercici2.js"></script>
    </head>
    <body>
        <label>nom:</label><input type="text" id="nom" />
        <label>cognom:</label><input type="text" id="cognom" />
        <button id="boton">enviar</button>
        <div id="content">TODO write content</div>
    </body>
</html>

Fitxer php: 

<?php
header("Access-Control-Allow-Origin: *");

if(isset($_POST["nombre"]) && isset($_POST["apellido"])){
    $nom = $_POST["nombre"];
    $cog = $_POST["apellido"];
    echo "<p><h2>Nom: ".strtoupper($nom)."</h2></p><h2>Cognom:". strtoupper($cog)."</h2>";
    exit;
}
echo "ERROR";

?>

GET 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script type="text/javascript">
 window.onload=function(){
  var datos;
 
  function mostrar_datos () {
    if (datos.readyState == 4  && datos.status == 200) 

var parrafo = document.createElement("p");
var contenido = document.createTextNode(datos.responseText);
parrafo.appendChild(contenido);
document.body.appendChild(parrafo);
  }

  function iniciar() {
    var url    = './mayus.php';
    var params = 'nom='+ f.curso.value +'&cognom='+ f.tutor.value;
    datos = new XMLHttpRequest();
    datos.open("GET",url+'?'+params,true);
    datos.onreadystatechange = mostrar_datos;
    datos.send(null);    
  }

  document.getElementById("boton").onclick=iniciar;
  }


</script>

</head>
<body> 
   <form name="f" method="get" action="mayus.php"> 
      <input type="text" name="nom" />   
      <input type="text" name="cognom" />
      <button id="boton">botón</button>
      
   </form>
   <div id="resultado">resultado</div>
 </body>
</html>


<?php
$nom = $_REQUEST['nom'];
$cognom = $_GET['cognom'];

echo "nom ".$nom." cognom ".$cognom ;

?>
Obtingut de «http://wikiserver.infomerce.es/index.php?title=Solució_exercici2-ajax&oldid=17921»