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;
}
}
时间： 2025-01-01 04:08:25