Cần giúp đỡ về AJAX

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

sacroyant viết 11:32 ngày 10/10/2018

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 viết 11:33 ngày 10/10/2018

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 viết 11:31 ngày 10/10/2018

Đượ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 viết 11:34 ngày 10/10/2018

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 viết 11:32 ngày 10/10/2018

Đượ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

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

khanh_media

0 chủ đề

0 bài viết

Tác giả nổi bật