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

De wikiserver
Dreceres ràpides: navegació, cerca
Línia 1: Línia 1:
 +
'''POST'''
 +
 +
 
Fitxer js:
 
Fitxer js:
 
<source lang="java">
 
<source lang="java">
Línia 68: Línia 71:
  
 
?>
 
?>
 +
 +
</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>

Revisió del 16:36, 18 des 2017

POST


Fitxer js: 

var xhr;

function ajax(){
    if (window.ActiveXObject) { //Iexplorer
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else 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>
Obtingut de «http://wikiserver.infomerce.es/index.php?title=Solució_exercici2-ajax&oldid=8902»