您的位置：首页 > 数据库

轻量级网页在线聊天系统

2017-08-19 23:50 260 查看

ajax异步请求实时刷新

用文本文档代替数据库

主页

index.html

<!DOCTYPE html>
<html
lang="en">
<head>
    <meta
charset="UTF-8">
    <title>Document</title>
    <style
type="text/css">
    *{
        margin:
0;
        padding:
0;
    }


    .bigbox textarea{
            width:
600px;
            height:100px;
            border:
1px solid #666;
            margin:0
auto;
            /*text-align: center;*/
            display:
block;
            /*margin-left: 200px;*/
        }
    .bigbox input{
        /*display: block;*/
        margin-left:
930px;
    }
    .bigbox .box{
            width:
600px;
            height:
400px;
            overflow-y:
auto;
             word-break:
break-all;
            text-overflow:
clip;
            border:
1px solid black;
            margin:
10px auto;
            margin-bottom:
20px;



        }
        ul{
            list-style:
none;
        }
        li{
            margin:
30px;
            /*border:1px solid red;*/
            background:
skyblue;

        }
        /*li a{*/
            /*text-decoration: none;*/
            /*border: 1px solid gray;*/
            /*border-radius: 5px;*/
            /*background-color: skyblue;*/
            /*word-wrap: break-word;*/
            /*max-width: 300px;*/
            /*min-width: 50px;*/
            /*display: block;*/
            /*padding: 10px;*/
            /*margin-top: 30px;*/
        /*}*/
    </style>
</head>
<body>
<div
class="bigbox">
    <div
class="box"
id="content">
        <ul>
            <li>今日最佳影片......</li>
        </ul>
    </div>
    <div>
        <form>
            <textarea
placeholder="发表评论吧"></textarea>
            <br>
            <input
type="button"
name=""
value="发表评论">
        </form>
    </div>
</div>
</body>
<script
type="text/javascript">
var content =
document.getElementById('content');
    readData();
//打开页面读取数据
    // console.log(content.scrollHeight);
    // content.scrollTop =(content.offsetHeight);
    //

    document.querySelector('input[type=button]').onclick=function(){

        var nowTime=new
Date();
        var xhr=new
XMLHttpRequest();
        xhr.open('post','show.php');
         xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                document.querySelector('ul').innerHTML=xhr.responseText;
                content.scrollTop =
content.scrollHeight;

                document.querySelector('textarea').value='';
            }
        }
//判断发送的内容是否为空

        if(document.querySelector('textarea').value!=''){

            xhr.send('val=<li>'+gettime(nowTime)+'：发表评论:
'+document.querySelector('textarea').value+'</li>');
        }else{
            xhr.send('val=');
        }

    }

    setInterval(function(){
        readData();//每隔一秒读取页面实时刷新
    },1000)

function readData(){
    var xhr=new
XMLHttpRequest();
        xhr.open('post','show.php');
         xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                document.querySelector('ul').innerHTML=xhr.responseText;
                content.scrollTop =
content.scrollHeight;
            }
        }
        xhr.send('val=');
}

    function
gettime(data){
        var year=data.getFullYear();
        var month=(+data.getMonth())+1;
        var day=data.getDate();
        var hour=data.getHours();
        var min=data.getMinutes();
        var sec=data.getSeconds();
        month =
month < 10 ?
"0"+month :month;
        var str =
"" +year +
"-" + month +"-" +day +
" " +hour +":" +min +":" +sec;
return str;
    }
</script>
</html>

show.php 读取文档里面的数据，根据发送来的数据更新数据

<?php

    $val=$_POST['val'];
$ip = $_SERVER["REMOTE_ADDR"];
$ips='游客：ip为'.$ip.'在';

$info=file_get_contents('liuyanban.txt');

if($val!=''){
file_put_contents('liuyanban.txt',$info.''.$ips.''.$val);
}else{
// file_put_contents('liuyanban.txt',$info.''.$val);
}

$info1=file_get_contents('liuyanban.txt');
echo $info1;

?>

liyanban.txt 建一个空的即可，注意路径不要错

最终页面展示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax 异步数据库 web chatOnLine

相关文章推荐

新的分享

章节导航