Ajax||初体验之虚拟聊天室

最新推荐文章于 2022-08-06 12:14:37 发布

月亮不休我不眠

最新推荐文章于 2022-08-06 12:14:37 发布

阅读量380

点赞数

分类专栏： WEB 文章标签： js web ajax html javascript

本文链接：https://blog.csdn.net/qq_43543920/article/details/105850004

版权

WEB 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

前言

Ajax，直译为“异步的JavaScript与XML技术”，与传统的Web应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。
在跟着B站的老师学了Ajax实现异步的原理后，我尝试着实现了下面的简易版虚拟聊天室。

原理分析

1）用户输入信息并按下发送键
2）浏览器通过post/get方法向服务器发送请求（不刷新页面）
3）服务器收到该请求，从服务器的伪数据库中随机调取一个字符串
4）将该字符串作为响应主体返回给浏览器
5）浏览器收到该数据后在特定位置显示给用户

服务器端

服务器端主要是建一个数组作为伪数据库，当收到浏览器发送的请求时，利用随机函数获得一个值，根据该值调出相应的数据，作为响应主体。
具体代码如下（date.php）：

<?php

    header('content-type:text/html; charset=utf-8');
    $arrayCon = array(
        "你好呀！",
        "终于想起人家了~",
        "鱼你无瓜",
        "关你啥事",
        "(*^_^*)",
        "在学习呢",
        "我手机要没电了qwq",
        "爱你昂(❤ ω ❤)",
        "哼！",
        "???"
    );

    //随机得到一个整数（0-9）
    $autoNum = mt_rand(0, 9);
	//输出
    echo $arrayCon[$autoNum];

?>

浏览器端

1，HTML页面布局
以为主要是尝试一下Ajax的美妙之处，所以对于页面布局尽可能简化了，就用了文本框、按钮等必备的标签。下面是页面布局相关代码：

<body>
    <input type="text" placeholder="快来聊天叭！" />
    <input type="button" value="发送" />
    <h3 style="color: cornflowerblue; text-align: center;">聊天框1.0</h3>
    <ul >
        <!-- <li>111</li>
        <li>你好</li> -->
    </ul>
</body>

2，css样式
直接放代码吧，没啥好说的（因为想着后面做一个升级版，当时对此界面基本上没有美化，直接参考B站老师来做了）：

<style type="text/css">
    ul{
        margin:10px auto;
        width: 500px;
        height: auto;
        border: 1px solid black;
        border-radius: 8px;
        
    }
    li{
        margin-bottom: 4px;
        margin-right: 4px;
    }
</style>

3，js逻辑实现
前面分析易得，需要给按钮添加一个点击事件，每次点击事件发生，均将文本框内容写入ul内并向服务器发送一个请求。
此外还要设置一个回调函数，待服务器响应完毕后向拿到响应主体并写入到ul中。
具体代码如下：

<script>
   document.querySelector('input[type=button]').onclick = function(){
         var myInform = document.querySelector('input').value;

         if(myInform){
             //将文本框的内容加到聊天框
             var li = document.createElement('li');
             li.innerText = myInform;
             li.style.backgroundColor = 'cornflowerblue';
             document.querySelector('ul').appendChild(li);
             
             //调取数据库信息
             var jqr = new XMLHttpRequest();
             
             jqr.open('post', 'date.php');

             //Content-Type: application/x-www-form-urlencoded
             jqr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

             jqr.send(null);

             //回调函数
             jqr.onload = function(){
                 var llli = document.createElement("li");
                 llli.style.backgroundColor = "darksalmon";
                 llli.innerText = jqr.responseText;
                 document.querySelector('ul').appendChild(llli);
             }
         }
         else{
             alert("请输入聊天内容呀");
         }
     }
 </script>