Solució exercici2-ajax
De wikiserver
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 ;
?>
