jamc92/callbackExample.html

## callbackExample.html
<!DOCTYPE html>
<html>
<head>
	<title>Callback in AJAX</title>
	<script>
		var xmlhttp;

		//Se declara la funcion principal con sus parametros
		function loadXMLDoc(url, callFunction) {

			//Se hace el procedimiento de siempre
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = ActiveXObject("Microsoft.XMLHTTP");
			}
			//Se asigna a la propiedad onreadystate el argumento de callFunction
			xmlhttp.onreadystate=callFunction;
			//Recibir peticion por el metodo GET, url y booleano
			xmlhttp.open("GET", url, true);
			//Una vez abierto, se envia.
			xmlhttp.send();
		}

		//Se llama la funcion que llamará a la funcion principal pasando una funcion como argumento (callback)
		function myFunction() {
			//Se llama la funcion del XmlHttpRequest se manda el url como argumento y la funcion como argumento (callback)
			loadXMLDoc("ajax_info.txt", function() {
				//Si el estato ha sido enviado y el status ha sido entregado
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//Escribe la respuesta dentro del div
					document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
				}
			});
		}
	</script>
</head>
<body>
	<div id="myDiv"></div>
	<button type="button" onclick="myFunction()"></button>
</body>
</html>

## getElemntByTag.html
<html>

<head>
<title>ejemplo de getElementsByTagName</title>

<script type="text/javascript">

function getAllParaElems()
{
  var allParas = document.getElementsByTagName("p");

  var num = allParas.length;

  alert("Hay " + num + " <p> elementos en este documento");
}


function div1ParaElems()
{
  var div1 = document.getElementById("div1")
  var div1Paras = div1.getElementsByTagName("p");

  var num = div1Paras.length;

  alert("Hay " + num + " <p> elementos en el elemento div1");
}


function div2ParaElems()
{
  var div2 = document.getElementById("div2")
  var div2Paras = div2.getElementsByTagName("p");

  var num = div2Paras.length;

  alert("Hay " + num + " <p> elementos en el elemento div2");
}

</script>
</head>

<body style="border: solid green 3px">
<p>Algo de texto</p>
<p>Algo de texto</p>

  <div id="div1" style="border: solid blue 3px">
    <p>Algo de texto en div1</p>
    <p>Algo de texto en div1</p>
    <p>Algo de texto en div1</p>

    <div id="div2" style="border: solid red 3px">
    <p>Algo de texto en div2</p>
    <p>Algo de texto en div2</p>
    </div>
  </div>

<p>Algo de texto</p>
<p>Algo de texto</p>

<button onclick="getAllParaElems();">
 muestra todos los elementos p en el documento</button><br />

<button onclick="div1ParaElems();">
 muestra todos los elementos p en div1</button><br />

<button onclick="div2ParaElems();">
 muestra todos los elementos p en div2</button>

</body>
</html>

## getRequest.html
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

</body>
</html>

## onReadyStateChange.html
<!DOCTYPE html>
<html>
<head>
	<title>AJAX onReadyStateChange</title>
	<meta charset="UTF-8" />
</head>
<body>
	<script>
	function onreadystatechange() {
		alert(oXMLHttpRequest.readyState);
	}

	oXMLHttpRequest.onreadystatechange = onreadystatechange;
	</script>
</body>
</html>

## response.html
<!DOCTYPE html>
<html>
<head>
  <title>AJAX responseXML</title>
  <script>
    var loadXMLDoc = function() {
      if (window.XMLHttpRequest) {
        xmldoc = new XMLHttpRequest();
      } else {
        xmldoc = new ActiveXObject(Microsoft.XMLHTTP);
      }
      xmldoc.onreadystatechange = function () {
        if (xmldoc.readyState==4 && xmldoc.status==200) {
          xdoc = xmldoc.responseXML();
          txt = "";
          x = xdoc.getElementsByTagName("ARTIST");
          for (i=0; i < x.length; i++) {
            txt = txt + x[i].childNodes[0].nodeValue + "<br>";
          }
          document.getElementById("div").innertHTML = txt;
        }
      }
      xmldoc.open("GET", "cd_catalog.xml", true);
      xmldoc.send();
    }
  </script>
</head>
<body>
  <h1>AJAX XML</h1>
  <div id="div"></div>
  <button type="button" onclick="loadXMLDoc()">"Get Artist"</button>
</body>
</html>

## tryXML.html
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
    document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}
</script>
</head>

<body>

<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Callback in AJAX</title>
	<script>
	var xmlhttp;

	//Se declara la funcion principal con sus parametros
	function loadXMLDoc(url, callFunction) {

	//Se hace el procedimiento de siempre
	if (window.XMLHttpRequest) {
	xmlhttp = new XMLHttpRequest();
	} else {
	xmlhttp = ActiveXObject("Microsoft.XMLHTTP");
	}
	//Se asigna a la propiedad onreadystate el argumento de callFunction
	xmlhttp.onreadystate=callFunction;
	//Recibir peticion por el metodo GET, url y booleano
	xmlhttp.open("GET", url, true);
	//Una vez abierto, se envia.
	xmlhttp.send();
	}

	//Se llama la funcion que llamará a la funcion principal pasando una funcion como argumento (callback)
	function myFunction() {
	//Se llama la funcion del XmlHttpRequest se manda el url como argumento y la funcion como argumento (callback)
	loadXMLDoc("ajax_info.txt", function() {
	//Si el estato ha sido enviado y el status ha sido entregado
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	//Escribe la respuesta dentro del div
	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
	});
	}
	</script>
	</head>
	<body>
	<div id="myDiv"></div>
	<button type="button" onclick="myFunction()"></button>
	</body>
	</html>
	<html>

	<head>
	<title>ejemplo de getElementsByTagName</title>

	<script type="text/javascript">

	function getAllParaElems()
	{
	var allParas = document.getElementsByTagName("p");

	var num = allParas.length;

	alert("Hay " + num + " <p> elementos en este documento");
	}


	function div1ParaElems()
	{
	var div1 = document.getElementById("div1")
	var div1Paras = div1.getElementsByTagName("p");

	var num = div1Paras.length;

	alert("Hay " + num + " <p> elementos en el elemento div1");
	}


	function div2ParaElems()
	{
	var div2 = document.getElementById("div2")
	var div2Paras = div2.getElementsByTagName("p");

	var num = div2Paras.length;

	alert("Hay " + num + " <p> elementos en el elemento div2");
	}

	</script>
	</head>

	<body style="border: solid green 3px">
	<p>Algo de texto</p>
	<p>Algo de texto</p>

	<div id="div1" style="border: solid blue 3px">
	<p>Algo de texto en div1</p>
	<p>Algo de texto en div1</p>
	<p>Algo de texto en div1</p>

	<div id="div2" style="border: solid red 3px">
	<p>Algo de texto en div2</p>
	<p>Algo de texto en div2</p>
	</div>
	</div>

	<p>Algo de texto</p>
	<p>Algo de texto</p>

	<button onclick="getAllParaElems();">
	muestra todos los elementos p en el documento</button><br />

	<button onclick="div1ParaElems();">
	muestra todos los elementos p en div1</button><br />

	<button onclick="div2ParaElems();">
	muestra todos los elementos p en div2</button>

	</body>
	</html>