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:**两个浏览器

相关推荐
懒惰的bit2 小时前
基础网络安全知识
学习·web安全·1024程序员节
2401_858286113 小时前
L7.【LeetCode笔记】相交链表
笔记·leetcode·链表
Natural_yz5 小时前
大数据学习09之Hive基础
大数据·hive·学习
龙中舞王5 小时前
Unity学习笔记(2):场景绘制
笔记·学习·unity
Natural_yz5 小时前
大数据学习10之Hive高级
大数据·hive·学习
love_and_hope5 小时前
Pytorch学习--神经网络--完整的模型训练套路
人工智能·pytorch·python·深度学习·神经网络·学习
青椒大仙KI116 小时前
24/11/7 算法笔记 PCA主成分分析
笔记·算法·信息可视化
夜雨星辰4876 小时前
Android Studio 学习——整体框架和概念
android·学习·android studio
奔跑的花短裤6 小时前
少儿编程启蒙学习
学习·青少年编程·机器人·ai编程
光明中黑暗6 小时前
机器学习 笔记
人工智能·笔记·机器学习