¿Cómo enviar un array mediante ajax?

JavierMMM · #1 (**permalink**) 03/06/2010, 16:20

Hola foreros, tengo una duda.

Estoy realizando una consulta a mi BD de la cual obtengo cadenas, que son en sí, las rutas de direcciones físicas en mi server. Son cerca de 10 mil cadenas diferentes, ya que cada una es la ruta de un archivo diferente.

Lo que necesito hacer es, enviar este vector mediante ajax, de mi página archivo.asp a proceso.asp. Ya puedo enviar una sola variable, pero necesito enviar el array, y lo trato de hacer de esta manera:

Código HTML:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba Ajax</title>
<%
<script language="javascript" type="text/javascript">`
function handleHttpResponse() 
{
    if (http.readyState == 4) 
	{
       if (http.status == 200) 
	   {
          if (http.responseText.indexOf('invalid') == -1) 
		  {
             // Armamos un array, usando la coma para separar elementos
             results = http.responseText.split(",");
             document.getElementById("campoMensaje").innerHTML = results[0];
             enProceso = false;
          }
       }
    }
}

function verificaUsuario() 
{
    if (!enProceso && http) 
	{
       var valor = escape(document.getElementById("arreg(i)").value);
       var url = "proceso.asp?arreg(i)="+ valor;
       http.open("GET", url, true);
       http.onreadystatechange = handleHttpResponse;
       enProceso = true;
       http.send(null);
    }
}

function getHTTPObject() 
{
    var xmlhttp;
    /*@cc_on
    @if (@_jscript_version >= 5)
       try {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
          try {
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (E) { xmlhttp = false; }
       }
    @else
    xmlhttp = false;
    @end @*/
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') 
	{
       try 
	   {
          xmlhttp = new XMLHttpRequest();
       } 
	   catch (e) { xmlhttp = false; }
    }
    return xmlhttp;
}

var enProceso = false; // lo usamos para ver si hay un proceso activo
var http = getHTTPObject(); // Creamos el objeto XMLHttpRequest

</script>

Ors.open "SELECT TOP 10 A.Id, A.Archivo FROM C_MATERIAL A LEFT JOIN C_CURSOS B ON (A.id = B.id) WHERE (YEAR(A.fechainicio) >= 2009) AND A.Id NOT IN (Select Id_Archivo From X_Respaldo) GROUP BY A.Id, Archivo ORDER BY Archivo", Conn 
	Do While not Ors.eof
		nombre_carpeta = Ors("Archivo")
                
                Redim arreg(10000)
		
		for i=0 to Ors.eof
			arreg(i) = nombre_carpeta
		Next 
		%>
		<form method="post" >
			<input type="hidden" name="arreg(i)" id="arreg(i)" value="<%=arreg(i)%>" >
		</form>
		<div id="campoMensaje"></div>
		<%
		Ors.movenext
	Loop
	Ors.Close
	set fs=nothing

%>

</body>
</html>

<SCRIPT>
verificaUsuario();
</SCRIPT>

y en mi página de proceso la recibo de esta manera:

Código HTML:

nombre_carpeta = request.querystring("nombre_carpeta")

y ya sigo con un proceso de la cadena.... pero con el array, a pesar de que no marca error, no hace nada.

¿Alguién sabe cómo puedo hacerle para que mande el array?

Gracias de antemano

Adler · #2 (**permalink**) 05/06/2010, 04:57

Hola

No entiendo por que redimensionas el array a 10000
Redim arreg(10000)
cuando solomente traes 10 registros de tu consulta
SELECT TOP 10

Cambia a esto

Cita:

En esta función

Cita:

Saca el form del while y dale un nombre

Cita:

<form name="formulario">
<%
Ors.open "SELECT TOP 10 A.Id, A.Archivo FROM C_MATERIAL A LEFT JOIN C_CURSOS B ON (A.id = B.id) WHERE (YEAR(A.fechainicio) >= 2009) AND A.Id NOT IN (Select Id_Archivo From X_Respaldo) GROUP BY A.Id, Archivo ORDER BY Archivo", Conn
Do While not Ors.eof
.......

Loop
Ors.Close
set fs=nothing
%>
</form>

Suerte

JavierMMM · #3 (**permalink**) 05/06/2010, 13:25

Gracias Adler por contestar... Redimensiono a 10,000, porque mi consulta completa me trae 10,061 cadenas, en esta primera etapa (la de prueba)....

Y por lo otro, ya trabajo en ello... probaré tu código y luego te comento lo que sucedió.

Nuevamente, gracias

JavierMMM · #4 (**permalink**) 07/06/2010, 15:42

Ya probé el código que me compartiste Adler, pero no sucede nada. Hasta ahora no me envía el vector a la página de proceso....

caricatos · #5 (**permalink**) 07/06/2010, 17:26

Hola:

Si no usas técnicas distintas a las normales de procesamiento de variables por url, debes poner todos los elementos del array en la lista de datos a enviar... No tengo claro como se procesan los datos en asp, pero si el dato tiene nombre dato, para dos valores ( 1 y 2 por ejemplo), debes generar una url del tipo "?dato=1&dato=2", por ejemplo, si se tratase de php la línea sería: "?dato[]=1&dato[]=2"... con los corchetes php procesaría un array... en asp supongo que lo sabrás.

Saludos

Jokuto · #6 (**permalink**) 08/06/2010, 04:48

Hola a todos, yo la verdad es que no se nada de asp pero viendo la primera parte de tu post te puedo decir que envies todos los resultados de la consulta a una variable string separados por la coma como pusiste tu, se lo pasas a AJAX con el responsetext y lo trates en el html mediante javascript con las propiedades de substring e indexof, como cada elemento va separado por comas (puedes usar otro separador evidentemente) pues vas 'cortando' la variable.
Con indexof buscas el caracter ',' que te devuelve la posicion en el string de la primera concordancia y con substring cortas el string desde ese numero + 2 caracteres para quitar la coma hasta el final. No se si me he explicado bien. Claro que este metodo lo hice para una consulta de 9 resultados, lo que no es nada comparado con la tuya (sin embargo puedes hacer varias consultas repitiendo este metodo)

Adler · #7 (**permalink**) 08/06/2010, 05:55

Hola

Una pequeña modificación a esta línea

Cita:

for (var i = 0, total = frm[elemento].length; i < total; i++)

Suerte

JavierMMM · #8 (**permalink**) 08/06/2010, 16:36

No funciona

este es el codigo que tengo en principal.asp

Código:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba Ajax</title>

<script language="javascript" type="text/javascript">
function handleHttpResponse() {
    if (http.readyState == 4) {
       if (http.status == 200) {
          if (http.responseText.indexOf('invalid') == -1) {
             // Armamos un array, usando la coma para separar elementos
             results = http.responseText.split(",");
             document.getElementById("campoMensaje").innerHTML = results[0];
             enProceso = false;
          }
       }
    }
}

function verificaUsuario() 
{
    if (!enProceso && http) 
	{
		elemento = 'arreg[]';
		frm = document.formulario;
		valor = new Array();
		for (var i = 0, total = frm[elemento].length; i < total; i++)
		{
			valor[valor.length] = escape(frm[elemento][i].value);
		}
		
		var url = "consulta.asp?nombre_carpeta="+ valor.join(",");
		http.open("GET", url, true);
		http.onreadystatechange = handleHttpResponse;
		enProceso = true;
		http.send(null);
	}
}

function getHTTPObject() {
    var xmlhttp;
    /*@cc_on
    @if (@_jscript_version >= 5)
       try {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
          try {
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (E) { xmlhttp = false; }
       }
    @else
    xmlhttp = false;
    @end @*/
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
       try {
          xmlhttp = new XMLHttpRequest();
       } catch (e) { xmlhttp = false; }
    }
    return xmlhttp;
}

var enProceso = false; // lo usamos para ver si hay un proceso activo
var http = getHTTPObject(); // Creamos el objeto XMLHttpRequest

</script>
</head>

<body>
<%
  	Set Conn = Server.CreateObject("ADODB.Connection")
	Set Ors = Server.CreateObject("ADODB.Recordset")
	Conn.open = "conexion"
	Ors.open "SELECT TOP 1 A.Id, A.Archivo FROM C_MATERIAL A LEFT JOIN C_CURSOS B ON (A.id = B.id) WHERE (YEAR(A.fechainicio) >= 2009) AND A.Id NOT IN (Select Id_Archivo From X_Respaldo) GROUP BY A.Id, Archivo ORDER BY Archivo", Conn
%><form action="post" name="formulario"><%
	Do While not Ors.eof
		nombre_carpeta = Ors("Archivo")
        Redim arreg(10000)
		for i=0 to Ors.eof
			arreg(i) = nombre_carpeta
		Next
		%>
        <input type="hidden" name="arreg[]" id="arreg[]" value="<%=arreg(i)%>">
        <!--<INPUT type="Button" value="Verificar si existe" onclick="verificaUsuario();">-->
		<%
		Ors.movenext
	Loop
	Ors.Close
	set fs=nothing

%>
</form>
<div id="campoMensaje"></div>
</body>
</html>

y esto en consulta.asp

Código:

<%
' me fijo si viene algun valor en el querystring, si no viene nada, no hago nada
if request.querystring("nombre_carpeta") <> "" then
   	nombre_carpeta = request.querystring("nombre_carpeta") & "<br />"
	response.Write(nombre_carpeta) & "<br />"
else
	response.Write("error")
end if
%>

Al final me regresa ¨error¨.... al parecer no esoy enviando nada....

Pregunta ante una duda que me surge... en la página de consulta, ¿debo de dejarla de esa manera, o hay alguna manera especial de recibir el vector [que supongo que así debe de ser]?

caricatos · #9 (**permalink**) 09/06/2010, 05:02

Hola:

Deberías poner para la parte del navegador/cliente lo que tiene la página (ver código fuente)... otra cosa, si vas a poner algo con corchetes, indicando que es un array, el servidor trabajará la variable como un array (por lo menos con el índice 0, o poner el array como te he explicado antes)

Saludos

Adler · #10 (**permalink**) 09/06/2010, 05:11

Hola

Si que funciona. El problema lo tienes en el ASP.

Revisa en el Firebug esté ejemplo que está basado en lo que te ocupa, verás como se envía

Código Javascript:

Ver original<&#37;@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba Ajax</title>
 
<script language="javascript" type="text/javascript">
function handleHttpResponse() {
    if (http.readyState == 4) {
       if (http.status == 200) {
          if (http.responseText.indexOf('invalid') == -1) {
             // Armamos un array, usando la coma para separar elementos
             results = http.responseText.split(",");
             document.getElementById("campoMensaje").innerHTML = results[0];
             enProceso = false;
          }
       }
    }
}
 
function verificaUsuario() 
{
    if (!enProceso && http) 
    {
        elemento = 'arreg[]';
        frm = document.formulario;
        valor = new Array();
        for (var i = 0, total = frm[elemento].length; i < total; i++)
        {
            valor[valor.length] = escape(frm[elemento][i].value);
        }
        
        var url = "consulta.asp?nombre_carpeta="+ valor.join(",");
        http.open("GET", url, true);
        http.onreadystatechange = handleHttpResponse;
        enProceso = true;
        http.send(null);
    }
}
 
function getHTTPObject() {
    var xmlhttp;
    /*@cc_on
    @if (@_jscript_version >= 5)
       try {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
          try {
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (E) { xmlhttp = false; }
       }
    @else
    xmlhttp = false;
    @end @*/
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
       try {
          xmlhttp = new XMLHttpRequest();
       } catch (e) { xmlhttp = false; }
    }
    return xmlhttp;
}
 
var enProceso = false; // lo usamos para ver si hay un proceso activo
var http = getHTTPObject(); // Creamos el objeto XMLHttpRequest
 
</script>
</head>
 
<body>
<form action="post" name="formulario">
 
        <input type="text" name="arreg[]" id="arreg[]" value="1"><br />
  <input type="text" name="arreg[]" id="arreg[]" value="2"><br />
  <input type="text" name="arreg[]" id="arreg[]" value="3"><br />
  <input type="text" name="arreg[]" id="arreg[]" value="4"><br />
  <input type="text" name="arreg[]" id="arreg[]" value="5"><br />
  <input type="text" name="arreg[]" id="arreg[]" value="6"><br />
        <INPUT type="Button" value="Verificar si existe" onclick="verificaUsuario();">
        
</form>
<div id="campoMensaje"></div>
</body>
</html>

Suerte