Tema: traer pagina con ajax
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 02/08/2010, 13:29
Avatar de Adler
Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: traer pagina con ajax
Hola

Intenta con esta pequeña prueba
x.html
Código Javascript: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <script type="text/javascript">
  5.  var ns4 = (document.layers)? true:false
  6. var ie4 = (document.all)? true:false
  7. var ns6 = (document.getElementById)? true:false
  8.  
  9. function captura_objeto(idnombre) {
  10.     if (ns6)
  11.     {
  12.     return document.getElementById(idnombre);
  13.     }
  14.     else if (ie4)
  15.     {
  16.     return document.all[idnombre];
  17.     }
  18.     else if (ns4)
  19.     {
  20.     return document.layers[idnombre];
  21.     }
  22.     else
  23.     {
  24.     return null;
  25.     }
  26. }
  27.  
  28.  
  29. function creaAjax(){
  30.     var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
  31.     var ajax = false;
  32.     for(var i=0 ; !ajax && i<ajaxs.length ; i++){
  33.         try{ 
  34.             ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
  35.         }
  36.         catch(e) { 
  37.             ajax = false; 
  38.         }
  39.     }
  40.     if(!ajax && typeof XMLHttpRequest!='undefined') {
  41.         ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
  42.     }
  43.     return ajax;
  44. }
  45.  
  46.  
  47. function TraeForm() {
  48. var url = "xx.html"
  49. var ajax=creaAjax();
  50. var cargar = captura_objeto("cargando");
  51. ajax.open('get',url,true);
  52. ajax.onreadystatechange = function() {
  53.  
  54.         if (ajax==null){
  55.         alert ("Tu navegador web no soporta AJAX!");
  56.         return;
  57.         }
  58.  
  59.         if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  60.                                       cargar.innerHTML= "";
  61.                  }
  62.  
  63.                  else if (ajax.readyState==4){
  64.                                if(ajax.status==200){    
  65.  
  66.                 if (ajax.responseText.length == 0 || ajax.responseText == null || ajax.responseText == 'undefined') {
  67.                     cargar.innerHTML = 'No ha sido posible';
  68.                 } else {
  69.                     cargar.innerHTML = ajax.responseText;
  70.                 }
  71.                                }
  72.  
  73.             else if (ajax.status==404) {
  74.                 alert('La dirección no existe');
  75.             } else {
  76.                                         alert('Se ha producido un error');
  77.             }
  78.         }
  79. }
  80.     
  81.     ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');    
  82.     ajax.send(null);
  83.             return
  84. }
  85.  
  86.  
  87.  
  88.  
  89.  
  90. function MuestraDatos(val) {
  91. var url = "x.asp"
  92. var ajax=creaAjax();
  93. var ensistema = captura_objeto("dentro");
  94. ajax.open('POST',url,true);
  95. ajax.onreadystatechange = function() {
  96.  
  97.         if (ajax==null){
  98.         alert ("Tu navegador web no soporta AJAX!");
  99.         return;
  100.         }
  101.  
  102.         if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  103.                                       ensistema.innerHTML= "";
  104.                  }
  105.  
  106.                  else if (ajax.readyState==4){
  107.                                if(ajax.status==200){    
  108.  
  109.                 if (ajax.responseText.length == 0 || ajax.responseText == null || ajax.responseText == 'undefined') {
  110.                     ensistema.innerHTML = 'No ha sido posible';
  111.                 } else {
  112.                     ensistema.innerHTML = 'Bienvenido ' + ajax.responseText;
  113.                 }
  114.                                }
  115.  
  116.             else if (ajax.status==404) {
  117.                 alert('La dirección no existe');
  118.             } else {
  119.                                         alert('Se ha producido un error');
  120.             }
  121.         }
  122. }
  123.     
  124.     ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');    
  125.     ajax.send('nom='+val[0].value);
  126.             return
  127. }
  128. </script>
  129. </head>
  130. <body>
  131.  
  132. <form>
  133. <input type="button" value="Traer Formulario" onclick="TraeForm()" />
  134. </form>
  135.  
  136. <div id="cargando"></div>
  137. <div id="dentro"></div>
  138. </body>
  139. </html>
xx.html
Código HTML: 
Ver original
  1. <form>
  2. Nombre: <input type="text" id="nombre" name="nombre" value="" />
  3. <input type="button" value="Validar" onclick="MuestraDatos(this.form)" />
  4. </form>
x.asp
Código ASP: 
Ver original
  1. <%@LANGUAGE="VBSCRIPT"%>
  2. <%
  3. nombre = Request.Form("nom")
  4.  
  5. ' tu conexión
  6.  
  7. SQL ="SELECT nombre FROM usuarios WHERE nombre = '"&nombre&"'"
  8. set rs = oConn.Execute(SQL)
  9.  
  10. if not rs.eof = True Then
  11. Response.Write rs.Fields("nombre")
  12. 'else
  13. 'Response.Write ""
  14. end if
  15. rs.Close
  16. Set rs = Nothing
  17. oConn.Close
  18. Set oConn = Nothing
  19. %>
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />