• Ajax学习笔记第8天

    放弃该放弃的是无奈，放弃不该放弃的是无能，不放弃该放弃的是无知，不放弃不该放弃的是执着！

    【1. 聊天室小案例】

    文件目录

    045.png

    初始mysql数据库

    048.png

    index.html

    • window.location.assign('url');

    触发窗口加载并显示指定的 url的内容

    当前页面会保存到会话历史中，即可以点击回退按钮回退到之前的页面

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  设置用户名：
  <input type="text" id="username">
  <input type="button" id="btn" value="进入聊天室">
  <script src="js/jquery.min.js">script>
  <script>
    $('#btn').click(function ()
    {
      $.post("login.php", {
        "username": $('#username').val()
        // data:login.php返回的数据【回调函数】
      }, function (data)
      {
        if (data === '1') {
          // 触发窗口加载并显示指定的 url的内容
          // 当前页面会保存到会话历史中，即可以点击回退按钮回退到之前的页面
          window.location.assign('room.php');
          // window.location = "room.php";
        } else {
          alert('请输入用户名')
        }
      }
      );
    });
  script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    login.php

    • session_start();

    开启session会话

    • preg_match("/^[\\s]*$/",$m)—空字符串的正则

    正则校验–匹配$m是否是非空字符串

    • exit();

    exit() 函数输出一条消息，并退出当前php脚本。 

    
// 开启session会话
session_start();
$username = $_POST['username'];
  // 正则校验--匹配$username是否是非空字符串
if (preg_match("/^[\\s]*$/",$username)) {
  // 如果是 空字符【没有输入用户名】
  echo "0";
  // exit() 函数输出一条消息，并退出当前php脚本。
  exit();
}
// 赋值
$_SESSION['username'] = $username;
echo "1";
?>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    room.php

    • overflow-x: hidden;

    将左右两边的溢出的内容隐藏掉

    • .info:nth-child(2n)

    括号内写2n就是选中info父元素的所有子元素偶数项

    • 实现Web端即时通讯的方法：

    实现即时通讯主要有四种方式，它们分别是轮询、长轮询(comet)、长连接(SSE)、WebSocket。

    它们大体可以分为两类，

    一种是在HTTP基础上实现的，包括短轮询、comet和SSE；

    另一种不是在HTTP基础上实现是，即WebSocket。

    
  session_start();
?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  .container {
    width: 800px;
    height: 500px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    /* 将左右两边的溢出的内容隐藏掉 */
    overflow-x: hidden;
    background-color: rgb(200, 215, 236);
  }

  .info {
    background: #eee;
    line-height: 24px;
    padding: 5px;
    margin: 3px 0;
  }

  /* 括号内写2n就是选中info父元素的所有子元素偶数项 */
  .info:nth-child(2n) {
    background: #fff;
  }

  .sub {
    width: 800px;
    margin-top: 10px;
  }

  .sub #info {
    border-color: #ccc;
    width: 800px;
    padding: 0 10px;
    height: 30px;
    border-radius: 4px;
    font-size: 20px;
    color: orangered;
  }
  </style>
</head>

<body>
  <h1><?php echo $_SESSION["username"]; ?>你好，欢迎来到聊天室！</h1>
  <div class="container">
    <div class="info">
      获取信息中...
    </div>
  </div>

  <div class="sub">
  <input type="text" id="info" placeholder="请输入消息后按回车键发送">
  </div>
  <script src="js/jquery.min.js"></script>
  <script>
  // 长轮询的请求，请求的是数据库中的信息【在服务端hold一段时间】
  // 读取数据
  setInterval(function() {
    // 读取数据 返回mysql存着的聊天数据
    $.get("read.php", function(data) {
      $(".container").html("");
      console.log(data);
      for (let i = 0; i < data.result.length; i++) {
        const o = data.result[i];
        // append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。
        $(".container").append("
    " + o.username + "说：" + o.content + "
    "    )
      }
    })
  }, 1000);

  // 发送消息
  // 当键盘键被按下时，设置 
  $("#info").keydown(function(e) {
    // 如果按下的按键是13，即回车键
    if (e.keyCode === 13) {
      // 如果按下的按键是回车键，那么重新渲染页面
      if ($("#info").val()) {
        //如果input框输入的值非空，进入判断体 
        //  发送请求【将聊天的内容传递给render.php】
        $.post("render.php", {
          "content": $("#info").val()
        },function(data){
          // "result":"error"
          console.log(data);
          // 清空输入框
          $("#info").val("")
        })
      }
    }
  })

  </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106

    render.php

    
// 开启会话
  session_start();
  //获取信息
  $username = $_SESSION['username'];
  $content = $_POST['content'];
  // 多添加的
  header('Content-type: application/json');

  // 链接数据库
  $connet = mysql_connect("localhost","root","xjf123456");
  // 选择数据库
  mysql_select_db("ikungg");
  // 设置字符串
  mysql_query("SET NAMES UTF8MB4");
  // 插入sql
  $sql = "INSERT INTO liaotianshi (username,content) VALUES ('{$username}','{$content}')";

  $result = mysql_query($sql);
  if($result == 1) {
    echo '{"result":"success"}';
  }else{
    echo '{"result":"error"}';
  }
  // 关闭服务器
  mysql_close();
?>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    read.php

    • 1 :php输出Resource id #3,这个结果表示的是输出一个记录集合 
    $result = mysql_query($sql);
echo $result;
  // 有截图42

    • 1
    • 2
    • 3

    042.png

    • 2 :php输出Resource id #3,这个结果表示的是输出一个记录集合 
    // 总结果存放到一个数组中
$arr = array("result"=>array());
print_r($arr);
print_r($arr['result']); //空数组
// 有截图44

    • 1
    • 2
    • 3
    • 4
    • 5

    044.png

    
  // 返回的数据格式是josn
  header('Content-type: application/json');
  // 链接数据库
  $connet = mysql_connect("localhost","root","xjf123456");
  // 选择数据库
  mysql_select_db("ikungg");
  // 设置字符串
  mysql_query("SET NAMES UTF8MB4");
  // 查询sql
  $sql = "SELECT * FROM liaotianshi";

  $result = mysql_query($sql);
  // echo $result;
  // php输出Resource id #3,这个结果表示的是输出一个记录集合
  // 有截图42

    // 总结果存放到一个数组中
    $arr = array("result"=>array());
    // print_r($arr);
    // print_r($arr['result']); //空数组
    // 有截图44
    // $arr = array();
    // print_r($arr);

    // mysqli_fetch_array() 函数从结果集中取得一行作为关联数组，或数字数组
    // 返回的是记录集，所以我们将数据放到mysql_fetch_array中
    while($row = mysql_fetch_array ($result)){
    // 向数组$arr['result']尾部添加$row
    array_push($arr['result'],$row);
    };
    //  echo $arr;
  // 固定写法，返回json格式
    $json = json_encode($arr);
    print_r($json); 
    // 关闭服务器
    mysql_close();
?>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    效果展示1：

    046.gif

    **效果展示2：**两个浏览器

    047.gif

  • 相关阅读:
    卫星物联网生态建设全面加速，如何抓住机遇？
    html静态网站基于游戏网站设计与实现共计10个页面 (仿地下城与勇士游戏网页)
    001 Python开发环境搭建
    语音增强——基本谱减法及其python实现
    路径总和 III
    学习正则前的预备 charCodeAt
    股骨—螺钉—骨板系统应力分流研究
    C++ Tutorials: C++ Language: Compound data types: Data structures
    Tomcat 学习笔记及常见问题解决
    【linux】【docker】docker的安装 + 拿到docker开发环境压缩包如何使用
  • 原文地址：https://blog.csdn.net/m0_62003092/article/details/134169566