再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销
写在前面
ajax学习到了第二天，这次是用第一天封装的ajax函数，后端使用了php+mysql实现基本的注册，登录，注销。
php是我前几个月get到的技能，我已经学习到了面向对象，知道各修饰符的含义，继承，接口，构造函数，实例化对象
mysql是跟php一块学的，学习了基本增删改查。
ajax原理其实不难理解，最主要的就是XMLHttpRequest(ActiveXObject("Microsoft.XMLHTTP"))；在理解该对象之后，最主要理解的是前后端数据的传递问题，我也是正在学习其中的乐趣。
HTML、CSS
因为这次学习，主要学习前后端数据的传递，所以就不贴出HTML、CSS的代码了，下面是简单示意为主的图
示意为主的注册与登录页面
注册不成功页面
当输入帐号输入栏失去焦点(onblur)时，ajax传入get参数，执行check方法，检测mysql是否有有相同username的用户，有则无刷新提示且提交按钮的disabled为true，无则可以继续注册
正常注册
登录成功
登录成功会设置一个1min的cookie，值为帐号名，js检测cookie不存在，也就是undefined，则隐藏注销栏，当存在，则显示注销栏，有退出选项，点击退出可触发，注销函数，去清除cookie，通过把失效日期设置为过去的日期/时间，删除一个 cookie setcookie('uid', "", time() - 60, '/');，其中uid是mysql做表的时候，auto_increment的编号。用这个代表当前用户。
AJAX
ajax还是第一天的封装好的ajax函数
//ajax函数 function ajax(url,method,data,success){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(e){ xhr = new ActiveXObject("Microsoft.XMHTTP"); } url+="?"+data; xhr.open(method,url,true); xhr.onreadystatechange=function(){ if(xhr.readyState===4){ if(xhr.status===200){ success && success(xhr.responseText); }else{ alert(xhr.status); } } } xhr.send() }
ajax(url,method,data,success)，一共4个形参，success为一个回调函数，主要作用是将后台的数据传到前台了，这个回调函数很关键。
后端
后端是单入口文件，单入口文件的好处之一是绝对路径的设置是参考该入口文件的，避免因为路径而踩入不必要的坑
index.php
1:$config 一个存放数据库host，port，username，password，database的数组
//数据层 $config=array( 'db_host' => 'localhost', 'db_port' => '3306', 'db_user' => 'root', 'db_password' => '123', 'db_name' => 'talklist', );
2:定义一个获取get/post请求参数值的常量
//控制层 define("module_action",$_REQUEST["a"]);
3:mysql的控制层，有两个类，一个是引入数据库连接库的类，另一个是给模型层的传入send方法，send方法是为了把执行状态（code，message）传给前台，send每次执行完，都要echo 模型层给send传的参数，是为了获取responseText 最后要exit()，退出当前脚本;
// mysql库的控制层 class DB{ public static function factory(){ global $config; //mysql库 require_once("./libs/Class/DB_Mysql.class.php"); return DB_Mysql::instance($config); } }
上述代码中DB_Mysql.class.php是mysql库包含DB_Mysql类，DB_Mysql类包含instance方法，instance方法检测当前类是否实例，如果没有实例，就实例当前类并储存起来，且传入$config，如果有实例，就直接return 当前实例对象，实际上实例就是调用当前类的构造函数。保存$config，且执行DB_Mysql类的数据库连接方法connect()，因为是构造函数，所以实例化对象时就会执行构造函数。
class DB_Mysql { private static $instanceObj; private $config ; //盛放的是数据库连接的信息，host port username password databases private function __construct($config) { $this->config = $config; $this->connect(); } public static function instance($config) { if (!self::$instanceObj) { self::$instanceObj = new DB_Mysql($config); } return self::$instanceObj; } //连接数据库 public function connect() { mysql_connect($this->config['db_host'],$this->config['db_user'],$this->config['db_password']); mysql_select_db($this->config['db_name']); $this->query("set names 'utf8'"); } ｝
所以我是觉得这段代码是最有趣的。不知道大家是怎样想的。
4：Controller类，是为了为模型层的子级继承父级的Controller类下的send方法，发送数据到前台。
class Controller{ public $db = null; private $ajaxData=array( "code"=>0, "message"=>"", ); public function __construct(){ $this->db = DB::factory(); } public function send($data=array()){ $showdata = array_merge($this->ajaxData,$data); echo json_encode($showdata);//转成json responseText exit(); //输出一个消息并且退出当前脚本 } }
5：加载模型层方法，require_once("./Controller/IndexController.class.php")，get到的参数就是模型层IndexController类的方法
//MVC中的模型层 require_once("./Controller/IndexController.class.php"); //把第一个参数作为回调函数调用,其余参数是回调函数的参数。 call_user_func(array(new IndexController,module_action));
6:在介绍模型层之前，先介绍完数据库文件DB_Mysql.class.php剩下的方法
class DB_Mysql{ //执行sql语句 public function query($sql) { return mysql_query($sql); } public function select($sql) { $query = $this->query($sql); $rs = array(); //将查询的结果以数字1的索引方式存在数组里面 $queryArr = mysql_fetch_array($query, 1); if($queryArr) { $rs[] = $queryArr; } return isset($rs[0])?$rs[0]:false; } ｝
query方法就不用多讲了，就是执行sql语句 mysql_query()，主要是说了select方法，把select方法单独挑出来就是为了单独执行select sql语句 select * from ...等
单独执行是为了将select语句晒出来的数据fetch到一个数组里面，mysql_fetch_array($query, 1),将查询的结果以数字1的索引方式存在数组里面，最最最关键的是要
判断数据库查到数据了没，查到返回当前查到的数据，没查到就返回一个bool值，为得就是在模型层判断是否查到，return一个状态（code，message），方便前台获取
介绍完这个，就就能很轻松的理解模型层的方法了。
7：模型层IndexController类extends Controller类，并且定义了自己的一些方法和属性
class IndexController extends Controller { /** * @ 用户名验证 传返回值。 * return 0: 表示在数据库没有查到有相同用户名 * return 1: 用户名的长度和类型不合法 * return 2: 表示在数据库查到了相同用户名 * $rs存在: 表示表示用查到了相同的用户名，return 2； */ private function _verifyUserName($username) { if (strlen($username) < 3 || strlen($username) > 10) {return 1;} //查数据库里面的数据 $rs = $this->db->select("SELECT `username` FROM `users` WHERE `username`='{$username}' LIMIT 1"); if ($rs) {return 2;}else{return 0;} } /** * @ interface 用户名验证return * 前台传来的get参数，选择执行IndexController下来action */ public function verifyUserName() { $username = $_REQUEST['username']; $code = $this->_verifyUserName($username); switch ($code) { case 0: $this->send(array('code'=>0,'message'=>'恭喜你，该用户名可以注册！')); break; case 1: $this->send(array('code'=>1,'message'=>'用户名长度不能小于4个或大于10个字符！')); break; case 2: $this->send(array('code'=>2,'message'=>'对不起，该用户名已经被注册了！')); break; default: break; } } ｝
在_verifyUserName中先要判断长度是否合适，再判断数据库是否有相同的username，记住要limit 1 ；
$this->db->select("SELECT `username` FROM `users` WHERE `username`='{$username}' LIMIT 1");
这句话也很有意思，表单看来是在当前类的db变量下的select方法，别忘了IndexController extends Controller，在当前类找不到db属性，那就是它爸爸那找么，他爸爸身上也是也是没有的
class Controller{ public $db = null; public function __construct(){ $this->db = DB::factory(); } ｝
所以有趣DB类的factory找，DB::factory()说，我也没有，我给你 return DB_Mysql::instance($config);，那你去DB_Mysql类中去找把，找啊找，终于在DB_Mysql类中找到了select的方法，由此看来找个这个select方法不容易啊，分析一下，我们从模型层中找到了控制层，控制层又去在数据库的控制层找，这样做是为了啥，为的就是模块化管理，数据库的方法就方法数据库类中，互补干扰，修改起来也很容易，这是MVC的魅力，前端MVC大致也如此吧。
好的，那就下一个方法verifyUserName，这个方法主要就是为了send方法，send状态（code，message），让前台获取。用到了流程语句switch case
好的，那验证就结束了，下来就是注册了，注册就是insert into
class IndexController extends Controller{ public function reg() { $username = $_REQUEST['username']; $password = $_REQUEST['password'];
$code = $this->_verifyUserName($username);
//if($code ==0){$this->sendByAjax(array('code'=>1,'message'=>""))}
if ($code !== 0 || strlen($password)<3 || strlen($password) > 15) {
$this->send(array('code'=>1,'message'=>'注册失败！'));
}
//密码加密，插入数据库里面 $password = md5($password); if (false === $this->db->query("insert into users (username, password) values ('{$username}', '{$password}')")) { $this->send(array('code'=>1,'message'=>'注册失败！')); }else { $this->send(array('message'=>'注册成功！')); } } }
插入帐号，插入密码，执行的是query方法，insert错误，就注册是吧，否则注册成功，记着要讲密码md5加密呢。也很好理解
再之后就是登录方法，注册不仅要check帐号密码是否匹配，更重要是设置cookie，就是为以后的注销做打算
class IndexController extend Controller{ /** * @ 用户登陆 * $username 是帐号 * $password 是密码 * $rs 在数据库中选出所有用户名等于$username的所有信息，mysql_fetch_array($sql,1);放在$rs数组里面 * setcookie(cookiename,cookie的值,cookie的有效期，cookie的服务器路径) */ public function login() { $username = $_REQUEST['username']; $password = $_REQUEST['password']; //检测cookie中有没有uid，有则证明已经登录过了。 if (isset($_COOKIE['uid'])) { $this->send(array('code'=>1,'message'=>'你已经登陆过了！')); } $rs= $this->db->select("select * from users where username='{$username}' limit 1"); if ($rs) { if ($rs['password'] != md5($password)) { $this->send(array('code'=>1,'message'=>'密码与帐号不匹配')); } else { //1分钟过期 setcookie('uid', $rs['uid'], time() + 60, '/'); setcookie('username', $rs['username'], time() + 60, '/'); $this->send(array('code'=>0,'message'=>'登陆成功！cookie有效时间为1min')); } } else { $this->send(array('code'=>1,'message'=>'数据库未检测到您的信息')); } } }
首先在登录的时候，有用户已经登录，就不能继续登录，这句话得先判断，isset($_COOKIE['uid']这句话很重要，如何检测是否有用户登录呢，你select * from users
把select到的内容都放入一个数组里面，之前也说了mysql_fetch_array()这个方法了，这是$rs放的就不只有username了，还有password和auto_increment的uid，这就方便了check，首先在数据库的username是否和输入的username一致的情况下再判断password是否一致，如果password一致，那就setcookie了
setcookie('uid', $rs['uid'], time() + 60, '/'); setcookie('username', $rs['username'], time() + 60, '/');
前台检测cookie是否存在，存在就显示注销栏，不存在就不现实注销栏，最后那就是注销了，之前注销也说了，就是清除cookie
class Controller extends Controller{ /** * @ 用户退出 * 通过把失效日期设置为过去的日期/时间，删除一个 cookie * uid不存在的话，则证明就没有登录 */ public function logout() { if (!isset($_COOKIE['uid'])) { $this->send(array('code'=>1,'message'=>'你还没有登陆！')); } else { //通过把失效日期设置为过去的日期/时间，删除一个 cookie： setcookie('uid', "", time() - 60, '/'); $this->send(array('code'=>0,'message'=>'退出成功！')); } } }
setcookie('uid', "", time() - 60, '/');这句话狠抓那个要，通过把失效日期设置为过去的日期/时间，删除一个 cookie：
if (!isset($_COOKIE['uid'])) {
$this->send(array('code'=>1,'message'=>'你还没有登陆！'));
}
这句话可有可无，因为你没有uid的时候，注销栏都隐藏了，所以何谈点击，何谈get请求呢，聪明的你肯定想到了。
说了这么多，还没有说JS大法呢。
JS
理解了后台，再去做前台就会很容易了。getelements我就不写了，就要写函数
检测帐号
//校验帐号 username1.onblur=function(){ ajax("guestbook/index.php","get","m=index&a=verifyUserName&username="+this.value,function(data){ var jsondata = JSON.parse(data) verifyUserNameMsg.innerHTML=jsondata.message; console.log(JSON.parse(data)); if(jsondata.code==1 || jsondata.code==2){ verifyUserNameMsg.style.color="red"; btnReg.disabled=true; }else{ verifyUserNameMsg.style.color="green"; btnReg.disabled=false; } }) }
m=index&a=verifyUserName&username="+this.value，这是你get的参数
回调函数有参数data，data就是responseText，就是状态（code，message），就是send的的echo值
code=1 代表格式不对 code=2 代表重名了 code=0代表ok
注册与登录
//注册帐号 btnReg.onclick=function(){ ajax("guestbook/index.php","get","m=index&a=reg&username="+username1.value+"&password="+password1.value,function(data){ alert("注册成功！跳转页面中..."); location.reload(); }) } //登录帐号 btnLogin.onclick=function(){ ajax("guestbook/index.php","get","m=index&a=login&username="+username2.value+"&password="+password2.value,function(data){ console.log(data); var jsondata = JSON.parse(data); if(jsondata.code===1){ alert(jsondata.message); }else{ alert(jsondata.message); user.style.display="block"; location.reload(); //userinfo.innerHTML=cookiename; } }) }
m=index&a=reg&username="+username1.value+"&password="+password1.value 注册get参数
m=index&a=login&username="+username2.value+"&password="+password2.value 登录get参数
code等于1代表未检测到您的信息
退出
//退出 logout.onclick=function(){ console.log(123); ajax("guestbook/index.php","get","m=index&a=logout",function(data){ var jsondata = JSON.parse(data) console.log(data); if(jsondata.code === 0){ alert("退出成功！"); location.reload(); }else{ } }) }
退出的get参数 m=index&a=logout
code=0退出成功
接下来就是如何前端获取cookie了
//前端获取cookie function getCookie(cookiename){ var strCookie = document.cookie; var arrCookie = strCookie.split(";"); for(var i = 1;i<arrCookie.length;i++){ var arr = arrCookie[i].split("="); if(arr[0]===cookiename){ return arr[1]; } } } var cookiename = getCookie(" username"); console.log(cookiename);
前端如何判断cookie是否存在了
//登录成功后显示 用户名退出栏 if(cookiename===undefined){ // userinfo.innerHTML=""; user.style.display="none"; }else{ userinfo.innerHTML=cookiename; }
cookiename就是username
但是聪明的你又发现了，过多的get请求会导致缓存严重，尤其在chrome下，缓存严重必须要Ctrl+F5了,
而且dom操作过多，导致了页面性能的降低
sql
create database talklist create table `users` ( `uid` int(11) unsigned primary key auto_increment, `username` char(16) `password` char(32) key `username` (`username`) ) engine=myisam default charset=utf8;
收获
通过这两次ajax的复习，对ajax的原理和使用有了深刻的认识，前后端交数据交互，ajax在其中发挥了巨大作用，PHP面向对象与JS面向对象的区别我也有了新的理解，上午还看了一个帖子，讲JS面向对象，一对比果然印象深刻，这次前后端的锻炼，让我收获颇丰，自己继续会撸起袖子加油干。
好了，晚安，期待下一次发贴。
已经把源码放在我的github里面了，有需要可以去下载，如果喜欢帮忙点一个star
https://github.com/dirkhe1051931999/writeBlog/tree/master/php-mysql-ajax-js-login-reg
