ajax聊天

Posted 2020-09-22 梦见一只电子羊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax聊天相关的知识，希望对你有一定的参考价值。

ajax实现聊天功能：

代码：

window.onload = function() {

    function id(id) {
        return document.getElementById(id);
    }

    //验证用户名
    id(‘username1‘).onkeyup = function() {
            var url = ‘/5-22ajax/guestbook/index.php‘;
            var data = ‘m=index&a=verifyUserName&username=‘ + id(‘username1‘).value;
            ajax(‘get‘, url, data, function(str) {
                //            console.log(str);
                var js = JSON.parse(str);
                //            console.log(js);
                id(‘verifyUserNameMsg‘).innerhtml = js.message;
                if(js.code) {
                    id(‘verifyUserNameMsg‘).style.color = "red";
                } else {
                    id(‘verifyUserNameMsg‘).style.color = "green";

                }
            })
        }

    id(‘btnReg‘).onclick = function() {

        var url = ‘/5-22ajax/guestbook/index.php‘;
        var data = ‘m=index&a=reg&username=‘ + id(‘username1‘).value + ‘&password=‘ + id(‘password1‘).value;
        ajax(‘post‘, url, data, function(str) {
            //            console.log(str);
            var regStr = JSON.parse(str);
            console.log(regStr);
            if(regStr.code) {
                alert(regStr.message);
            } else {
                alert(regStr.message);
            }
        })
    }

    id(‘btnLogin‘).onclick = function() {
            var url = ‘/5-22ajax/guestbook/index.php‘;
            var data = ‘m=index&a=login&username=‘ + id(‘username2‘).value + ‘&password=‘ + id(‘password2‘).value;
            ajax(‘post‘, url, data, function(str) {
                //            console.log(str);
                var loginStr = JSON.parse(str);
                //            console.log(loginStr);

                //            }
                alert(loginStr.message);
            })
        }
        //改变登录状态

    //查看cookie值
    function getCookie(key) {
        var arr1 = document.cookie.split(‘;‘);
        for(var i = 0; i < arr1.length; i++) {
            var arr2 = arr1[i].split(‘=‘); //=号分割
            if(arr2[0] == key) {
                return arr2[1];
            }
        }
    }
    //function getCookie(key){
    //    return document.cookie;
    //}

    //    function getUsernameCookie(key) {
    //        var arr2 = document.cookie.split(‘;‘)[1].split(‘=‘)[1];
    //        return(arr2);
    //    }
    //    var usn = getUsernameCookie(‘username‘);
    //var usn=‘lannister‘;

    function updateStatus() {
        var uid = getCookie(‘uid‘);
        var reg = document.getElementById(‘reg‘);
        var login = document.getElementById(‘login‘);
        var user = document.getElementById(‘user‘);
        var userInfo = document.getElementById(‘userinfo‘);

        //        if(uid) {
        //            reg.style.display = ‘none‘;
        //            login.style.display = ‘none‘;
        //            user.style.display = ‘block‘;
        //            userInfo.innerHTML = usn;
        //            alert(‘yes‘);
        //        } else {
        //            reg.style.display = ‘block‘;
        //            login.style.display = ‘block‘;
        //            user.style.display = ‘none‘;
        //            alert(‘no‘);
        //        }

    }
    updateStatus();

    id(‘logout‘).onclick = function() {
        //        alert(‘success‘);
        var url = ‘/5-22ajax/guestbook/index.php‘;
        var data = ‘m=index&a=logout‘;
        ajax(‘post‘, url, data, function(str) {
            var arr = JSON.parse(str);
            alert(arr.message);
        })

    }


    function createList(str) {
        //            console.log(str);
        var contentStr = JSON.parse(str);
                    console.log(contentStr);

        var oDl = document.createElement(‘dl‘);
        var oDt = document.createElement(‘dd‘);
        var oStrong = document.createElement(‘strong‘);
        var oList = document.createElement(‘div‘);
        oList.id = ‘list‘;

        oStrong.innerHTML = contentStr.data.username + ‘  说: ‘;
        oDt.appendChild(oStrong);
        var oDd1 = document.createElement(‘dd‘);
        oDd1.innerHTML = contentStr.data.content;
        var oDd2 = document.createElement("dd");
        oDd2.className = ‘t‘;

        var a1 = document.createElement(‘a‘);
        var a2 = document.createElement(‘a‘);
        a1.innerHTML = ‘点赞(<span>‘ + contentStr.data.support + ‘)</span>‘;
        a2.innerHTML = ‘反对(<span>‘ + contentStr.data.oppose + ‘)</span>‘;
        oDd2.appendChild(a1);
        oDd2.appendChild(a2);
        oDd1.appendChild(oDd2);

        oList.appendChild(oDt);

        oList.appendChild(oDd1);
        id(‘myList‘).appendChild(oList);

    }

    function createAl(str) {
        var oDl = document.createElement(‘dl‘);
        var oDt = document.createElement(‘dd‘);
        var oStrong = document.createElement(‘strong‘);
        var oList = document.createElement(‘div‘);
        oList.id = ‘list‘;

        oStrong.innerHTML = str.username + ‘  说: ‘;
        oDt.appendChild(oStrong);
        var oDd1 = document.createElement(‘dd‘);
        oDd1.innerHTML = str.content;
        var oDd2 = document.createElement("dd");
        oDd2.className = ‘t‘;

        var a1 = document.createElement(‘a‘);
        var a2 = document.createElement(‘a‘);
        a1.innerHTML = ‘点赞(<span class="like">‘ + str.support + ‘)</span>‘;
        a2.innerHTML = ‘反对(<span class="against">‘ + str.oppose + ‘)</span>‘;
        oDd2.appendChild(a1);
        oDd2.appendChild(a2);
        oDd1.appendChild(oDd2);

        oList.appendChild(oDt);

        oList.appendChild(oDd1);
        id(‘myList‘).appendChild(oList);

    }

    id(‘btnPost‘).onclick = function() {
        var url = ‘/5-22ajax/guestbook/index.php‘;
        var data = ‘m=index&a=send&content=‘ + id(‘content‘).value;
//        console.log(id(‘content‘).value);
        ajax(‘post‘, url, data,createList);
    }

    //初始化留言列表
    function showList() {
        var url = ‘/5-22ajax/guestbook/index.php‘;
        var data = ‘m=index&a=getList&page=1&n=2‘;
        ajax(‘post‘, url, data, function(str) {
            var showArr = JSON.parse(str);
                        console.log(showArr);
            var list = showArr.data.list;
//                        console.log(list[1]);
            //            var list1=list[1];
            //            createAl(list1);
            for(var i = 0; i < list.length; i++) {
                createAl(list[i]);
            }
        })
    }
    showList();


    function like() {
        var url = ‘/5-22ajax/guestbook/index.php‘;
        var data = ‘m=index&a=doSupport&cid=1‘;
        id(‘likeFirst‘).onclick = function() {
            ajax(‘post‘, url, data, function(str) {
                var arr = JSON.parse(str);
//                console.log(arr);
                alert(arr.message);
            })
        }

    }
    like();

}

ajax.js:

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
    }
    
    if (method == ‘get‘ && data) {
        url += ‘?‘ + data;
    }
    
    xhr.open(method,url,true);
    if (method == ‘get‘) {
        xhr.send();
    } else {
        xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
        xhr.send(data);
    }
    
    xhr.onreadystatechange = function() {
        
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);
            } else {
                alert(‘出错了,Err：‘ + xhr.status);
            }
        }
        
    }
}

接口：

<?php
/**
 * @ controller Index.class.php
 *
 */

defined(‘IN_APP‘) or exit(‘Denied Access!‘);

class IndexController extends Controller {

    public function index() {
        echo ‘<p>欢迎</p>‘;
        //$result = $this->db->get("select * from users", 1);
        //dump($result);
    }

    /**
     * @ interface 用户名验证
     */
    public function verifyUserName() {
        
        $username = trim(isset($_REQUEST[‘username‘]) ? $_REQUEST[‘username‘] : ‘‘);
        
        switch ($this->_verifyUserName($username)) {
            case 0:
                $this->sendByAjax(array(‘message‘=>‘恭喜你，该用户名可以注册！‘));
                break;
            case 1:
                $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘用户名长度不能小于3个或大于16个字符！‘));
                break;
            case 2:
                $this->sendByAjax(array(‘code‘=>2,‘message‘=>‘对不起，该用户名已经被注册了！‘));
                break;
            default:
                break;
        }
        
    }

    /**
     * @ interface 用户注册
     */
    public function reg() {
        $username = trim(isset($_REQUEST[‘username‘]) ? $_REQUEST[‘username‘] : ‘‘);
        $password = trim(isset($_REQUEST[‘password‘]) ? $_REQUEST[‘password‘] : ‘‘);
        $avatar = trim(isset($_REQUEST[‘avatar‘]) && in_array($_REQUEST[‘avatar‘], array(1,2,3,4,5,6,7,8,9)) ? intval($_REQUEST[‘avatar‘]) : 1);

        if ($this->_verifyUserName($username) !== 0 || strlen($password)<3 || strlen($password) > 20) {
            $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘注册失败！‘));
        }
        $password = md5($password);
        if (false === $this->db->query("INSERT INTO `users` (`username`, `password`, `avatar`) VALUES (‘{$username}‘, ‘{$password}‘, {$avatar})")) {
            $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘注册失败！‘));
        } else {
            $this->sendByAjax(array(‘message‘=>‘注册成功！‘));
        }
    }


    /**
     * @ 用户登陆
     */
    public function login() {
        $username = trim(isset($_REQUEST[‘username‘]) ? $_REQUEST[‘username‘] : ‘‘);
        $password = trim(isset($_REQUEST[‘password‘]) ? $_REQUEST[‘password‘] : ‘‘);

        if (isset($_COOKIE[‘uid‘])) {
            $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘你已经登陆过了！‘));
        }

        if ($rs = $this->db->get("SELECT * FROM `users` WHERE `username`=‘{$username}‘")) {
            if ($rs[‘password‘] != md5($password)) {
                $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘登陆失败！‘));
            } else {
                setcookie(‘uid‘, $rs[‘uid‘], time() + 3600*60, ‘/‘);
                setcookie(‘username‘, $rs[‘username‘], time() + 3600*60, ‘/‘);
                $this->sendByAjax(array(‘code‘=>0,‘message‘=>‘登陆成功！‘));
            }
        } else {
            $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘登陆失败！‘));
        }
    }

    /**
     * @ 用户退出
     */
    public function logout() {
        if (!isset($_COOKIE[‘uid‘])) {
            $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘你还没有登陆！‘));
        } else {
            setcookie(‘uid‘, 0, time() - 3600*60, ‘/‘);
            $this->sendByAjax(array(‘code‘=>0,‘message‘=>‘退出成功！‘));
        }
    }

    /**
     * 用户留言保存
     */
    public function send() {
        if (!isset($_COOKIE[‘uid‘])) {
            $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘你还没有登陆！‘));
        } else {
            $content = trim(isset($_POST[‘content‘]) ? $_POST[‘content‘] : ‘‘);
            if (empty($content)) {
                $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘留言内容不能为空！‘));
            }
            $dateline = time();
            $this->db->query("INSERT INTO `contents` (`uid`, `content`, `dateline`) VALUES ({$_COOKIE[‘uid‘]}, ‘{$content}‘, {$dateline})");
            $returnData = array(
                ‘cid‘        =>    $this->db->getInsertId(),
                ‘uid‘        =>    $_COOKIE[‘uid‘],
                ‘username‘    =>    $_COOKIE[‘username‘],
                ‘content‘    =>    $content,
                ‘dateline‘    =>    $dateline,
                ‘support‘    =>    0,
                ‘oppose‘    =>    0,
            );
            $this->sendByAjax(array(‘code‘=>0,‘message‘=>‘留言成功！‘,‘data‘=>$returnData));
        }
    }

    /**
     * @ 顶
     */
    public function doSupport() {
        if (!isset($_COOKIE[‘uid‘])) {
            $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘你还没有登陆！‘));
        } else {
            $cid = isset($_REQUEST[‘cid‘]) ? intval($_REQUEST[‘cid‘]) : 0;
            if (!$cid) $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘无效留言cid！‘));
            $content = $this->db->get("SELECT cid FROM `contents` WHERE `cid`={$cid}");
            if (!$content) $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘不存在的留言cid！‘));
            $this->db->query("UPDATE `contents` SET `support`=support+1 WHERE `cid`={$cid}");
            $this->sendByAjax(array(‘code‘=>0,‘message‘=>‘顶成功！‘));
        }
    }

    /**
     * @ 踩
     */
    public function doOppose() {
        if (!isset($_COOKIE[‘uid‘])) {
            $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘你还没有登陆！‘));
        } else {
            $cid = isset($_REQUEST[‘cid‘]) ? intval($_REQUEST[‘cid‘]) : 0;
            if (!$cid) $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘无效留言cid！‘));
            $content = $this->db->get("SELECT cid FROM `contents` WHERE `cid`={$cid}");
            if (!$content) $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘不存在的留言cid！‘));
            $this->db->query("UPDATE `contents` SET `oppose`=oppose+1 WHERE `cid`={$cid}");
            $this->sendByAjax(array(‘code‘=>0,‘message‘=>‘踩成功！‘));
        }
    }

    /**
     * @ 获取留言列表
     */
    public function getList() {
        $page = isset($_REQUEST[‘page‘]) ? intval($_REQUEST[‘page‘]) : 1;    //当前页数
        $n = isset($_REQUEST[‘n‘]) ? intval($_REQUEST[‘n‘]) : 10;    //每页显示条数
        //获取总记录数
        $result_count = $this->db->get("SELECT count(‘cid‘) as count FROM `contents`");
        $count = $result_count[‘count‘] ? (int) $result_count[‘count‘] : 0;
        if (!$count) {
            $this->sendByAjax(array(‘code‘=>1,‘message‘=>‘还没有任何留言！‘));
        }
        $pages = ceil($count / $n);
        if ($page > $pages) {
            $this->sendByAjax(array(‘code‘=>2,‘message‘=>‘没有数据了！‘));
        }
        $start = ( $page - 1 ) * $n;
        $result = $this->db->select("SELECT c.cid,c.uid,u.username,c.content,c.dateline,c.support,c.oppose FROM `contents` as c, `users` as u WHERE u.uid=c.uid ORDER BY c.cid DESC LIMIT {$start},{$n}");
        $data = array(
            ‘count‘    =>    $count,
            ‘pages‘    =>    $pages,
            ‘page‘    =>    $page,
            ‘n‘        =>    $n,
            ‘list‘    =>    $result
        );
        $this->sendByAjax(array(‘code‘=>0,‘message‘=>‘‘,‘data‘=>$data));
    }

    /**
     * @ 用户名验证
     */
    private function _verifyUserName($username=‘‘) {
        if (strlen($username) < 3 || strlen($username) > 16) {
            return 1;
        }
        $rs = $this->db->get("SELECT `username` FROM `users` WHERE `username`=‘{$username}‘");
        if ($rs) return 2;
        return 0;
    }
}

以上是关于ajax聊天的主要内容，如果未能解决你的问题，请参考以下文章

ajax聊天

AJAX相关JS代码片段和部分浏览器模型

Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

Comet反向ajax技术实现客服聊天系统

Ajax实现聊天室

创建用户聊天系统 -（PHP、MySQL、AJAX？）