Scribd Logo
Carica

Benvenuto in Scribd!

  • Codigo de Ajax

    Caricato da

    rancest
    13 visualizzazioni3 pagine
    En la primera función que se ejecuta luego definimos el evento change para el primer select Es decir cuando hagamos la selección de un item del primer select se ira a la función mostrarMaterias.

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    En la primera función que se ejecuta luego definimos el evento change para el primer select Es decir cuando hagamos la selección de un item del primer select se ira a la función mostrarMaterias.

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    13 visualizzazioni3 pagine

    Codigo de Ajax

    Caricato da

    rancest
    En la primera función que se ejecuta luego definimos el evento change para el primer select Es decir cuando hagamos la selección de un item del primer select se ira a la función mostrarMaterias.

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    Pagina1.

    html
    <html>
    <head>
    <script src="funciones.js" language="JavaScript"></script>

    llama a la
    function.js con leguaje

    javascript
    </head>
    <body>
    <h1>Prueba de cargar un control de tipo select recuperando datos del servidor mediante AJAX
    </h1>
    el tamao del titulo
    Seleccione la carrera:
    <select id="carreras" name="carreras">
    <option value="0">Seleccionar....</option>
    lista desplegable para seleccionar una
    Opcin
    <option value="1">Analista de sistemas</option>
    <option value="2">Telecomunicaciones</option>
    <option value="3">WebMaster</option>
    </select><span id="espera"></span><br>
    Materias de la carrera:
    <select id="materias" name="materias">
    podemos seleccionar una opcin
    </select><br>
    </body>
    </html>

    Funciones.js
    En la primera funcin que se ejecuta luego
    addEvent(window,'load',inicializarEventos,false);
    definimos el evento change para el primer select
    function inicializarEventos()
    Es decir cuando hagamos la seleccin de un item
    {
    del primer select se ira a la funcin
    var select1=document.getElementById('carreras');
    mostrarMaterias.
    addEvent(select1,'change',mostrarMaterias,false);
    }
    var conexion1;
    function mostrarMaterias(e)
    {
    var codigo=document.getElementById('carreras').value;
    if (codigo!=0)
    {
    conexion1=crearXMLHttpRequest();
    conexion1.onreadystatechange = procesarEventos;
    conexion1.open('GET','pagina1.php?cod='+codigo, true);
    conexion1.send(null);
    }
    else
    {
    var select2=document.getElementById('materias');
    select2.options.length=0; } }

    Rescata el valor del primer select (es decir donde


    estan almacenadas los nombres de carreras. Si
    est seleccionada procede a crear un objeto de
    tipo XMLHttpRequest y le pasa como parmetro
    el cdigo de la carrera respectiva.
    En caso de seleccionar el primer item del select
    (que contiene el texto "Seleccionar....")

    function procesarEventos()
    {
    if(conexion1.readyState == 4)
    {
    var d=document.getElementById('espera');
    La funcin procesarEventos carga la
    d.innerHTML = '';
    imagen generada dinmicamente en el
    var xml = conexion1.responseXML;
    var pals=xml.getElementsByTagName('materia');
    servidor. Esto se hace cuando el objeto
    var select2=document.getElementById('materias');
    XMLHttpRequest nos informa que los
    select2.options.length=0;
    datos fueron generados completamente
    for(f=0;f<pals.length;f++)
    {
    var op=document.createElement('option');
    var texto=document.createTextNode(pals[f].firstChild.nodeValue);
    op.appendChild(texto);
    select2.appendChild(op);
    }
    }
    else
    {
    var d=document.getElementById('espera');
    d.innerHTML = '<img src="cargando.gif">'; }
    }
    //***************************************
    //Funciones comunes a todos los problemas
    //***************************************
    function addEvent(elemento,nomevento,funcion,captura)
    {
    if (elemento.attachEvent)
    {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
    }
    else
    if (elemento.addEventListener)
    {
    elemento.addEventListener(nomevento,funcion,captura);
    return true;
    }
    else
    return false;
    }
    function crearXMLHttpRequest()
    XMLHttpRequesto , ActiveXObject,
    {
    var xmlHttp=null;
    Estos Se Pueden comprobar si estn
    if (window.ActiveXObject)
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    En JavaScript en la jerarqua del
    else
    if (window.XMLHttpRequest)
    Navegador.
    xmlHttp = new XMLHttpRequest();
    return xmlHttp; }

    Pagina1.php
    <?php
    $car=$_REQUEST['cod'];
    if ($car==1) {
    $materias=array('Programacion I','Analisis Matematico',
    'Estructura de las Organizaciones','Etica Profesional');
    }
    if ($car==2)
    {
    $materias=array('Fundamentos de Fisica','Analisis Matematico 1',
    'Ingles Tecnico I','Sistemas de Comunicaciones I
    ');
    }
    if ($car==3)
    {
    $materias=array('Informatica I','Multimedia I','Bases de Datos');
    }
    $xml="<?xml version=\"1.0\"?>\n";
    $xml.="<materias>\n";
    for($f=0;$f<count($materias);$f++)
    {
    $xml.="<materia>".$materias[$f]."</materia>\n";
    }
    $xml.="</materias>\n";
    header('Content-Type: text/xml');
    echo $xml;
    ?>

    Potrebbero piacerti anche