Cần giúp đỡ về AJAX

**khanh_media** · 12-11-2008 23:28

xin chào tất cả mọi người.

**sacroyant** · 12-11-2008 23:52

Demo đây bạn :

http://lovepm.olympe-network.com/?action=login

Sau vài lần thử sai, sẽ xuất hiện verification code.

**khanh_media** · 13-11-2008 00:14

Cảm ơn bạn sacroyant, bạn có thể cho tôi xin Code đó để tôi tham khảo được không nhi.

**sacroyant** · 14-11-2008 01:19

Được gửi bởi khanh_media

Cảm ơn bạn sacroyant, bạn có thể cho tôi xin Code đó để tôi tham khảo được không nhi.
E-mail:khanh_media@yahoo.de

Nếu bạn dò source code trang đó thì sẽ thấy khá phức tạp vì ngoài login, mình còn kiểm tra mã hình ảnh chứng thực, kiểm tra cookie để chuyển về trang đã mở trước khi vào trang login nếu login thành công... Vì thế, mình rút gọn lại thành 3 file đơn giản bên dưới, bạn tham khảo, có chỗ nào chưa rõ thì cho mình biết để cùng trao đổi.

Đầu tiên là giao diện, chỉ cần viết bằng HTML cũng được. Đây là trang login.php chứa form nhập username và password :

PHP Code:


<html>

  <head>

    <meta http-equiv="Pragma" content="No-cache">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

       <title> - Ajax Login System </title>

        <script type="text/javascript" src="login.js"></script>

  </head>

 <body>

<table  width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>

      <td align="center">

     <form name="login" action="" method="post" onsubmit="return doLogin();" onreset="gTxt('loginMsg','&nbsp;');">

      <table width="400" border="0" cellspacing="1" cellpadding="2">

        <tr height="30">    

          <td colspan="2" align="center">

        <h3 style="color:#664333;">Sign-in your account</h3>

        <span id="msgLogin">&nbsp;</span>

          </td>

        </tr>            

        <tr height="20">    

          <td align="right">

         <b>Username :  </b>

          </td>        

          <td>

        <input type="text" name="user" id="user" value="" maxlength="50" style="width:210px;">

          </td>

        </tr>    

        <tr height="20">    

          <td align="right">

        <b>Password : </b>

          </td>        

          <td>

        <input type="password" name="pwd" id="pwd" value="" maxlength="50" style="width:210px;">

          </td>

        </tr>    

        <tr>

          <td>

        &nbsp;

          </td>        

          <td>

        <input type="submit" value="Submit"><input type="reset" value="Reset">

          </td>

        </tr>    

      </table>    

     </form>

    </td>

  </tr>    

</table>    

 </body>

</html>

File javascript có tên là login.js với các hàm xử lý phía client.

PHP Code:


var flag=false;

function rel(ob){return document.getElementById(ob);}

function gTxt(ob,txt){rel(ob).innerHTML=txt;}

function clearTxt(obj){gTxt(obj,'');}

function cod(s){return encodeURIComponent(s);}

function enablelogin(){flag=false;}

function AJAXControl(){

  var req=null;

    if(window.ActiveXObject){

      req=new ActiveXObject("Msxml2.XMLHTTP");

      if(!req){req=new ActiveXObject("Microsoft.XMLHTTP")}

    }

    else if(window.XMLHttpRequest){

        req=new XMLHttpRequest();

        req.overrideMimeType('text/html');

    }

 return req;

}

function dplMsg(num, color){

  var msg=***91;

    'Negociating... ',

    'Negociating... Please wait... ',

    'Required field cannot be left blank',

    'Username and password do not match.',

    'An error occurred while negociating. Please try again !',

    'You are now logged into system.'

  ***93;;

  gTxt('msgLogin','<font color="'+color+'"><i>'+msg***91;num***93;+'</i></font>');

}



function doLogin(){

  if(!flag){log();}

  else{dplMsg(1, 'blue');}

  return false;

}

function log(){

  var u=document.login.user.value;

  var p=document.login.pwd.value;

  if(u!=''&&p!=''){

    dplMsg(0, 'blue');

     if(!flag){    

        flag=true;testAccount(u,p);

        setTimeout(enablelogin,9999);

     }

  }

  else{

    dplMsg(2, 'red');

    if(u==''){document.login.user.focus();}

    else if(p==''){document.login.pwd.focus();}

  }

  return false;

}

function testAccount(username,password){

  var req=AJAXControl();

  var $packet="user="+cod(username)+"&pwd="+cod(password);

  if(req!=null&&typeof(req)!=undefined){

    try{

      req.onreadystatechange =function(){

        if(req.readyState==4&&req.status==200){

           if(req.responseText==1){

             dplMsg(5, 'blue');

           }

           else{

             dplMsg(3, 'red');

             enablelogin();

          }

        }

      }

    req.open("POST", 'doLogin.php', true);          

    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

    req.send($packet);

    }

    catch(e){dplMsg(4, 'red');enablelogin();}

  }

}

Và cuối cùng là doLogin.php, 1 file PHP minh họa đơn giản :

PHP Code:


<?php

/*

  $username : admin

  $password : #login!!!

  md5($password) : a440882348d35c4efbc1ff6857695639

*/

$username    =    $_POST***91;'user'***93;;

$password    =    $_POST***91;'pwd'***93;;

$test        =    0;



    if($username=='admin' && md5($password)=='a440882348d35c4efbc1ff6857695639'){

        $test=1;

    }

  echo $test;

?>

Bạn tạo 3 file với nội dung như trên, lưu vào cùng thư mục và chạy thử login.php, nhập username và password để xem nó hoạt động. Thế nhé

**sangit** · 17-11-2008 00:26

Thanks sacroyant nhé! Mình cũng đang tìm hiểu về AJAX, nếu có nhiều kinh nghiệm với AJAX, sacroyant nhớ post lên cho mọi người tham khảo với!

**sacroyant** · 17-11-2008 02:01

Được gửi bởi sangit

Thanks sacroyant nhé! Mình cũng đang tìm hiểu về AJAX, nếu có nhiều kinh nghiệm với AJAX, sacroyant nhớ post lên cho mọi người tham khảo với!

Ngày xưa tớ đã từng viết 1 tut về AJAX bên VNInformatics, bạn có thể xem lại tại đây hoặc phiên bản rõ ràng hơn tại đây

Chủ đề: Cần giúp đỡ về AJAX

Hỗ trợ

Rate This Thread

Cần giúp đỡ về AJAX

Bookmarks

Bookmarks

Quy định