ajax 超级简单聊天

最新推荐文章于 2021-08-06 22:53:33 发布

子弹头99

最新推荐文章于 2021-08-06 22:53:33 发布

阅读量152

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/qq_41082746/article/details/100620514

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        background: #ffff00;
    }

    ul {
        width: 400px;
        border: 1px solid #000;
        margin: 0 auto;
    }
</style>
<body>
<input type="text">
<input type="button" value="发送">
<h3>聊天框</h3>
<ul></ul>
<script>
    document.querySelector('input[type=button]').onclick = function () {
        //创建啊聊天框
        var myLi = document.createElement('li');
        //设置内容
        myLi.innerHTML = document.querySelector('input[type=text]').value;
        //设置背景颜色
        myLi.style.backgroundColor = "red";
        //添加到页面上
        document.querySelector('ul').appendChild(myLi);
        //ajax
        //创建对象
        var xhr = new XMLHttpRequest();
        //设置请求行
        xhr.open('get', 'chat.php');
        xhr.onload = function () {
            var myLia = document.createElement('li');
            //设置内容
            myLia.innerHTML = xhr.responseText;
            //设置颜色
            myLia.style.backgroundColor = "blue";
            //添加到页面上
            document.querySelector('ul').appendChild(myLia);
        };
        xhr.send();

    }
</script>
</body>
</html>