Pedir HTML ó XML al Servidor con el Método POST

Envíamos datos usando POST y recibimos HTML ó XML para su uso en cualquier parte de la página.

La forma más básica del código para enviar datos y recibir HTML es la siguiente:

var XMLHttpRequestObject = false if ( window.XMLHttpRequest ) XMLHttpRequestObject = new XMLHttpRequest() else if ( window.ActiveXObject ) XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP") // La función que debemos llamar cuando queremos pedir // contenido al servidor, donde "dataSource" es un script // en el servidor que se encarga de devolvernos HTML function getData(dataSource) { if( XMLHttpRequestObject ) { // Aquí es donde se hace la petición usando el método POST XMLHttpRequestObject.open("POST", dataSource) // Especificamos que le estamos enviando un formulario codificado XMLHttpRequestObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded") XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { // Aquí ponemos lo que queremos hacer con el HTML, en este caso // invocamos una función y pasamos como argumento el HTML que obtuvimos AssignData( XMLHttpRequestObject.responseText ) } } // En esta parte envíamos los datos al servidor, // debemos codificarlos como cadenas de texto. XMLHttpRequestObject.send("variable1=valor1&variable2="+variablequecontienevalor2) } }

Ahora, para recibir XML usamos XMLHttpRequestObject.responseXML en vez de XMLHttpRequestObject.responseText y para "interpretarlo" y poder usar los datos que contiene usamos la función getElementsByTagName() de JavaScript.

Por ejemplo, si el xml es algo de este estilo: <item><option>valor1</option> <option>valor2</option> ... </item> podemos obtener las etiquetas en un array mediante:

var options = XMLHttpRequestObject.responseXML.getElementsByTagName("option")

El array contiene entonces los tags así: options[0]="<option>valor1</option>", options[1]="<option>valor2</option>", etc. Para accesar a los datos de las etiquetas usamos la jerarquía del DOM, es decir una línea de código como la siguiente:

var DataOfOption = options[0].firstChild.data

Finalmente, si deseamos enviar XML al servidor en vez un formulario codificado modificamos los parametros de la función setRequestHeader() de la siguiente forma:

XMLHttpRequestObject.setRequestHeader("Content-Type", "text/xml")

Y ahora en vez de enviar variables, envíamos datos con la sintaxis de XML como sigue:

XMLHttpRequestObject.send("<doc><name>limite</name><data>10</data></doc>")

Desde luego el script "dataSource" con el que nos comuniquemos debe ser capaz de manejar XML.