Solució exercici2-ajax
De wikiserver
La revisió el 14:30, 22 feb 2015 per Jnoguera (Discussió | contribucions)
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";
?>
