Solució exercici2-ajax - Historial de revisió

Mfernandez a 15:40, 3 abr 2024

2024-04-03T15:40:11Z

Jnoguera a 15:36, 18 des 2017

2017-12-18T15:36:57Z

Jnoguera a 15:36, 18 des 2017

2017-12-18T15:36:15Z

Jnoguera a 14:45, 17 març 2015

2015-03-17T14:45:31Z

Jnoguera a 15:04, 22 feb 2015

2015-02-22T15:04:58Z

Jnoguera a 13:30, 22 feb 2015

2015-02-22T13:30:48Z

Asalinas a 18:30, 20 març 2014

2014-03-20T18:30:46Z

Asalinas: Es crea la pàgina amb «Fitxer js:

 var xhr;  function ajax(){     if (window.ActiveXObject) { //Iexplorer             xhr = new ActiveXObject("Microsoft.XMLHTTP");     }     else if (windo…».

2014-03-20T18:24:16Z

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…».

Pàgina nova

Fitxer js:
<pre>
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', 'majuscules.php');
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
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;
</pre>

Fitxer html:
<pre>
<!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>
</pre>

Fitxer php:
<pre>
<?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";

?>

</pre>

← Versió més antiga		Revisió del 15:36, 18 des 2017
Línia 122:		Línia 122:
	</html>		</html>

		+	</source>
		+
		+
		+	<source lang="php">
		+	<?php
		+	$nom = $_REQUEST['nom'];
		+	$cognom = $_GET['cognom'];
		+
		+	echo "nom ".$nom." cognom ".$cognom ;
		+
		+	?>
	</source>		</source>

@@ Línia 1: / Línia 1: @@
 Fitxer js:
 <source lang="java">
@@ Línia 68: / Línia 71: @@
 ?>
 </source>

@@ Línia 1: / Línia 1: @@
 Fitxer js:
-<pre>
+<source lang="java">
 var xhr;
@@ Línia 34: / Línia 34: @@
 window.onload = inici;
-</pre>
+</source>
 Fitxer html:
-<pre>
+<source lang="html">
 <!DOCTYPE html>
 <html>
@@ Línia 52: / Línia 52: @@
      </body>
 </html>
-</pre>
+</source>
 Fitxer php:
-<pre>
+<source lang="php">
 <?php
 header("Access-Control-Allow-Origin: *");
@@ Línia 69: / Línia 69: @@
 ?>
-</pre>
+</source>

@@ Línia 7: / Línia 7: @@
 function ajax(){
-     if (window.ActiveXObject) { //Iexplorer
+     if (window.XMLHttpRequest) { //Tots els altres navegadors que soporten ajax
              xhr = new XMLHttpRequest();
+     }

@@ Línia 19: / Línia 19: @@
 	if (this.readyState == 4) {
 		if (this.status >= 200 && this.status < 300) {
-			document.getElementById('content').innerHTML =
+			document.getElementById('content').innerHTML = this.responseText;
+		}
+	}
+     }
-     var content = "nombre=" +document.getElementById("nom").value +
+     var content = "nombre=" +document.getElementById("nom").value + "&apellido=" + document.getElementById("cognom").value;
      xhr.send(content);

@@ Línia 15: / Línia 15: @@
      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() {
 	if (this.readyState == 4) {