Ajax y asp.net 2.0 ,utilizando XMLHTTP

softdonet · 23 Diciembre 2008, 20:40 PM

Hola a todos.en esta oportunidad aca les dejo un mini tutorial de ajax con asp.net ,sabes que ajax es un conjunto de tecnologias web en el cual evita que la pagina se refresque o se actualise solicitar la informacion de alogada en una base de datos o realizar cualquier otra operacion web.

aca les dejo un pequeño ejemplo de logeo utilizando el evento keyUp de un textbox se pueda realizar la consulta directamente ala base de datos

sin mas detalles a ca el ejemplo

lo que Vamos hacer primero es crear una base de datos , y nuestra tabla usarios

Código (sql) [Seleccionar]



go
use master
go
drop database usuarios
go
create database usuarios
go
use usuarios
go
create table usuarios
(
idus int identity primary key,
usename varchar(20),
pwd varchar(20)
)
go
insert into usuarios values('admin','admin')
insert into usuarios values('Jose','Guevara')
insert into usuarios values('operador','opera')

Una ves que emos crado nestra base de datos y nuestra tabla respectiva

vamos a relizar nuestro diseño del formulario de nuestra pagina web

a nuestra pagina lo llamaremos loing.aspx

Código (asp) [Seleccionar]


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="loing.aspx.vb" Inherits="usarios_loing" %>

<!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 runat="server">
    <title>Página sin título</title>
        <script language="javascript" src="../AjaxNet.js" type="text/javascript" > </script>

</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td style="width: 100px">
                    Usuario</td>
                <td style="width: 100px">
                    <asp:TextBox ID="t1" runat="server"></asp:TextBox></td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    contraseña</td>
                <td style="width: 100px">
                    <asp:TextBox ID="t2" runat="server" onkeyup="usuarios();"></asp:TextBox>
                    <div id='resultado'></div>
                    </td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <input id="log" type="button" value="Loing"  onclick="usuarios();"/></td>
                <td style="width: 100px">
                </td>
                <td style="width: 100px">
                </td>
            </tr>
        </table>
        <div id="msj" style="position:absolute;left:260px;top:180px;width:450px">  
        
        </div> 
        <br />
        <br />
    </form>
</body>
</html>

opteneido como resultado lo siguiente.

ahra vemromos la parate de progracion lo que nos interesa .

para esta aplicacion vamos utilizar un "js" es decir un arcivo jacascript en donde alogaremos todo la informacion del lado del clinte.

el archivo js lo llamaremos "AjaxNet.js"
en este directorio vamos a declara un funcion llamada

usuario en donde se alamacenara toda la invorcion que se solicite al momneto que nosotri digitemos en las cajas de texto y verifique la informacion conrrespondiente con la base de datos.

Código (javascript) [Seleccionar]


function usuarios(){

ajax = new ActiveXObject("Microsoft.XMLHTTP");
var uss = document.getElementById('t1').value;
var pas = document.getElementById('t2').value;
var boton=document.getElementById("log");
ajax.open("GET", "VereFic_Loing.aspx?us="+uss+"&ps="+pas,true);
 //  ajax.open("Get","VereFic_Loing.aspx?us="+uss+"&ps="+pas,true);
document.getElementById('resultado').innerHTML="";
if (ajax) {

ajax.onreadystatechange = function() {
//alert(ajax.status);
 boton.disabled=true;
if (ajax.readyState == 4 && (ajax.status == 200 || ajax.status == 304 || ajax.status == 500)) {
document.getElementById('resultado').innerHTML="";
document.getElementById('resultado').innerHTML = ajax.responseText;
 boton.disabled=false;
}
}
//req.open('GET', pos_url +'?nombre='+nombre,true);
ajax.send(null);
}

}

una ves que creado
aura vamos a crea la paguian aspx del lado del servidor en donde se va verfica la existencia del usario

lo llamaremos a nuestra pagina
VereFic_Loing.aspx

el cual contendra lo siguente

Código (vb) [Seleccionar]


<%@ Page Language="VB"%>

<%@ Import Namespace="system.Data.SqlClient"%>
<%@ Import Namespace="system.Data"%>

<script runat="server">
    'lo  primero que se debe ralizar es importar los Namespace
    'tanto el data com el SqlClient 
    'estos Namespace contienen las libreriar que interactuan con 
    'el administrador de base de datos utilizamos es decir con el sql server
    
    '================0
    'una ves que hemos importado las librerias cramos nuetra acadena de conexion
    ' a nuestra cadena de conexion lo vamos ha llamr con
    
    Dim con As New SqlConnection("Integrated security=sspi;server=.;database=usuarios")
    'database: nos permita optener el nombre de la base de datos con la que vamos a trabajar 
    'en este caso nuetra base de datos se llama usuarios
    'SERVER:NOS DA EL ORIGEN DE DATOS ,EN ESTE CAMO ESTAMOS TRABAJANDO LOCALMENTE,
    'SOLAMENTE PODRMOS PUNTO O SIMPLEMENTE (LOCAL), O EL NOMBRE DE L MAQUEINA PERO SI NUETRS BASE DE DATOS 
    'ESTUBIERA ALOGADO EN UN SERVIDOR TENDRIAMOS PONER EL NOMBRE DEL SERVIDOR POR EJEMPLO
    'EL SERVIDOR QUE ESTA ALOGADA NUESTRA BASE DE DATOS TOMARA EL IP:200.65.15.3
    'EL ORIENGE DEDATOS SERIA SERVER=200.65.15.3.
    
    Sub page_load(ByVal sender As Object, ByVal e As System.EventArgs)
        ' el la varible user resivimos el parametro us que declaramos la funcion ajax 
        Dim user As String = Request.QueryString("us") 'recibimos el paramtro del usarios
        Dim pas As String = Request.QueryString("ps") 'recibimos el paramtro del contraseña
        'llamamos ala funcion  y enviamos los parametros solicitados, tanto el usario con la contraseña
        
        If users(user, pas).Rows.Count = 0 Then
            'en caso la contraseña  y/o usario sea inconrrecto mostrar el siguente mensaje
            Response.Write("Acceso Denegado")
        Else
            ' el caso contrario que fueran conrrecto los datos mostrar los soguente
            Response.Write("Felicitacion Acceso Concedido al sistemas")
        End If
    End Sub
    'hacemos una funcion para verficar la existencia del uasario
    'de tipo datatable en el cual enviamos dos parametros ,el nombre del usario y la contraseña
    Function users(ByVal us As String, ByVal pas As String) As DataTable
        'creamos la consulta ala tabla usarios utilizando la sentencia like 
        Dim da As New SqlDataAdapter("select  idus,usename,pwd from usuarios where usename like '" & us & "' and pwd  like '" & pas & "'", con)
        Dim ds As New DataSet
        Dim dtb As New DataTable
        da.Fill(dtb)
        Return dtb
    End Function

</script>

eso es todo espero qu les sirva de algo

mas adelante continuare con mas aportes.........

043h68 · 24 Diciembre 2008, 00:46 AM

Ps solo agradecer por el aporte

,

Buenisimo

Saludos.

MANULOMM · 24 Diciembre 2008, 19:58 PM

Cita de: softdonet en 23 Diciembre 2008, 20:40 PM
ajax es nueva tecnologia web en el cual evita que la pagina se refresque o se actualise solicitar la informacion de alogada en una base de datos o realizar cualquier otra operacion web.

De hecho AJAX no es un tecnología, se definiria más como un conjunto de Tecnologías (javascript, XML, Servicios Web JSON, REST, XHTML, DOM etc), su utilidad mas visible es evitar que se realizen postbacks con la pagina entera, solo se recarga un trozo deseado, OJO el postback se realiza solo que es asincronico y no se nota pues no se envia la pagina entera al servidor, lo que disminuye el tiempo de carga y el ancho de banda requerido por el sitio web.

Atentamente,

Juan Manuel Lombana
Medellín - Colombia

Test Foro de elhacker.net SMF 2.1

Ajax y asp.net 2.0 ,utilizando XMLHTTP

softdonet

043h68

MANULOMM