Ajax学习笔记第8天

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

【`1. 聊天室小案例`】

文件目录

初始mysql数据库

index.html

window.location.assign('url');

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

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

html 复制代码

<!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>
</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>

login.php

session_start();

开启session会话

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

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

exit();

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

php 复制代码

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

room.php

overflow-x: hidden;

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

.info:nth-child(2n)

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

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

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

它们大体可以分为两类，

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

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

php 复制代码

<?php
  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("<div class='info'>" + o.username + "说：" + o.content + "</div>")
      }
    })
  }, 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>

render.php

php 复制代码

<?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();
?>

read.php

1 :php输出Resource id #3,这个结果表示的是输出一个记录集合

php 复制代码

$result = mysql_query($sql);
echo $result;
  // 有截图42

2 :php输出Resource id #3,这个结果表示的是输出一个记录集合

php 复制代码

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

php 复制代码

<?php
  // 返回的数据格式是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：**两个浏览器

Ajax学习笔记第8天

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

【1. 聊天室小案例】

【`1. 聊天室小案例`】