即使聊天（超简版）

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>即时聊天</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        #list {
            margin: 30px auto;
            width: 800px;
            border: 1px solid #ccc;
            padding: 10px;
        }
        #list:after {
            display: block;
            content: '';
            overflow: hidden;
            clear: both;
        }
        #list li:nth-child(2n){
            float: left;
            clear: both;
            background-color: red;
        }
        #list li:nth-child(2n+1){
            float: right;
            clear: both;
            background-color: blue;
        }
        form [name='chat']{
            margin: 10px auto;
            width: 800px;
        }
        form[name='chat'] textarea {
            width: 100%;
            height: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            var
                oList = document.getElementById('list'),
                oChat = document.chat,
                oTextarea  = oChat.content;
            oChat.onsubmit = function () {
                //如果用户没有输入内容，则不提交
                if(oTextarea.value !== ''){
                    var
                        oLi = document.createElement('li');
                    oLi.innerHTML = oTextarea.value;
                    oList.appendChild(oLi);
                    //异步发送数据
                    if(window.ActiveXObject){
                        var oXhr = new window.ActiveXObject('Microsoft.XMLHTTP');
                    } else {
                        var oXhr = new XMLHttpRequest();
                    }
                    //打开链接进行配置
                    oXhr.open('POST','http://localhost/ajax/chat.php');
                    //设置请求头
                    oXhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                    //发送数据
                    oXhr.send('content=' + encodeURIComponent(oTextarea.value));
                    //开始接受数据
                    oXhr.onreadystatechange = function () {
                        if(oXhr.readyState ===4 && oXhr.status === 200){
                            var
                                oLi = document.createElement('li');
                            oLi.innerHTML = oXhr.responseText;
                            oList.appendChild(oLi);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<ul id="list"></ul>
<form action="javascript:;" name="chat" id="chat">
    <textarea name="content" id="content" cols="30" rows="10"></textarea>
    <input type="submit" value="发送">
</form>
</body>
</html>

后端PHP代码：（如果想要完善这个代码，那后端就要写的完善一点，本人后端小小白）

<?php
	header("Access-Control-Allow-Origin:*");
	$content = $_POST['content'];
	
	echo $content.'!';
?>

即使聊天（超简版）

猜你喜欢