【在线五子棋对战】五、前端扫盲：html && css && javascript && ajax && jquery && websocket-EW帮帮网

文章目录

Ⅰ. HTML扫盲
Ⅱ. CSS扫盲
Ⅲ. JS扫盲
Ⅳ. AJAX扫盲
Ⅴ. WebSocket前端技术扫盲
Ⅵ. 几种技术的区别

Ⅰ. HTML扫盲

1、认识 HTML 标签

HTML代码是由标签构成的。比如：

<body>hello</body>

标签名（body）放到 < > 中
大部分标签成对出现，为开始标签，为结束标签
少数标签只有开始标签，称为 “单标签”
开始标签和结束标签之间，写的是标签的内容，比如上面的 hello
开始标签中可能会带有 “属性”。id 属性相当于给这个标签设置了一个唯一的标识符（比如身份证号码）
```
<body id="myId">hello</body>
```

2、HTML 文件基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

html 标签是整个 html 文件的根标签（最顶层标签）
head 标签中写页面的属性
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题

3、标签层次结构

分为父子关系、兄弟关系。比如按上面的文件基本结构的例子，可以看出：

head 和 body 是 html 的子标签（html 就是 head 和 body 的父标签）
title 是 head 的子标签，head 是 title 的父标签
head 和 body 之间是兄弟关系

标签之间的结构关系, 构成了一个 DOM 树（Document Object Mode 文档对象模型）。

在这里插入图片描述

4、HTML 常见标签

💥标题标签：h1-h6

有六个标题标签，等级从 h1 ~ h6。数字越大, 则字体越小。

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

在这里插入图片描述

💥段落标签：p

把一段比较长的文本粘贴到 html 中，会发现并没有分成段落。在 html 中使用 <p> 标签括起一个段落进行换行。当然也可以在段落内使用 <br/> 标签进行换行操作。

例如以下文本：

<p>
    段落，
	在html中一般的回车并不起作用，会被解释成为一个空格<br/>但是br不一样，br标签的作用就是换行。
</p>

在这里插入图片描述

文本格式化标签

加粗： strong 标签和 b 标签
倾斜： em 标签和 i 标签
删除线： del 标签和 s 标签
下划线： ins 标签和 u 标签

<p><b>比如b标签就是加粗</b></p>
<p><i>比如i标签就是斜体</i></p>
<p><s>比如s标签就是删除线</s></p>
<p><u>比如u就是下划线</u></p>

在这里插入图片描述

💥图片标签：img

img 标签必须带有 src 属性，表示图片的路径

alt： 替换文本。当文本不能正确显示的时候, 会显示一个替换的文字
title： 提示文本。鼠标放到图片上, 就会有提示
width / height： 控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡
border： 边框。参数是宽度的像素，但是一般使用 CSS 来设定

<img src="D:\Blog\blog\source\images\7ea5163b679d1ba48e94964949b7f53.jpg" alt="显示失败时的信息" title="图片提示信息" width="150px" height="150px" border="5px">

在这里插入图片描述

💥超链接标签：a

href：必须具备，表示点击后会跳转到哪个页面
target：打开方式，默认是 _self，如果是 _blank 则用新的标签页打开

<a href="http://www.baidu.com" target="_blank">点击这里打开新标签访问百度</a>

在这里插入图片描述

💥注意：这里百度文本就是一个连接点击项，而这个点击项不一定非是文本，可以是图片也可以是其他的一些信息。

表格标签

table 标签：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗
thead：表格的头部区域（注意和 th 区分，范围是比 th 要大的）
tbody：表格得到主体区域.

<table align="center" border="1" cellpadding="1" cellspacing="0" width="200" height="20"> 
    <tr> 
        <th>菜名</th> 
        <th>单价</th> 
        <th>折扣</th> 
    </tr> 
    <tr> 
        <td align="center">红烧茄子</td> 
        <td align="center">￥18</td> 
        <td align="center">8.8折</td> 
    </tr> 
    <tr> 
        <!--colspan合并列， rowspan合并行--> 
        <td colspan="3" align="right">总价：￥18</td> 
    </tr> 
</table>

在这里插入图片描述

列表标签

主要使用来布局的，整齐好看：

无序列表（重要）：ul 和 li
有序列表（用的不多）：ol 和 li
自定义列表（重要）：dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的。

<ul> 
    <li>ul/li是无序列表</li> 
    <li>ul/li是无序列表</li> 
</ul> 
<ol> 
    <li>ol/li是有序列表</li> 
    <li>ol/li是有序列表</li> 
</ol> 
<dl> 
    <dt>dl/dt是小标题</dt> 
    <dd>dl/dd是围绕标题的描述</dd> 
    <dd>dl/dd是围绕标题的描述</dd> 
</dl>

在这里插入图片描述

💥表单标签

表单是让用户 输入信息的重要途径。分成两个部分：

表单域：包含表单元素的区域，重点是 form 标签
表单控件：输入框，提交按钮等，重点是 input 标签

<form>
    <input type="text" placeholder="input标签默认是文本框"> <br/> 
    <input type="password" placeholder="type属性为password是密码框"> <br/> 

    <input type="radio" name="sex">type属性为radio是单选框,name属性相同则默认为同一组-男 <br/> 
    <input type="radio" name="sex" checked="checked">type属性为radio是单选框-女<br/> 

    <input type="checkbox"> checkbox是复选框-吃饭 <br/> 
    <input type="checkbox"> checkbox是复选框-睡觉 <br/> 
    <input type="checkbox"> checkbox是复选框-打游戏<br/> 
    <input type="checkbox" id="testid"> 
    <label for="testid">label标签for属性与对应的输入框id对应起来，这时候点击文字也能选中</label><br/> 

    <input type="button" value="button是普通按钮" onclick="alert('alert是提示框调用函数')"><br/> 
    <input type="submit" value="submit是提交按钮">点击这里就会向服务器提交表单域中的表单数据<br/> 
    <input type="file" value="file是文件选择按钮框"><br/> 
    <input type="reset" value="reset是清空按钮，会清空表单域的所有数据"><br>
</form>

在这里插入图片描述

下拉菜单标签

option 中定义 selected=“selected” 表示默认选中。

<select> 
    <option selected="selected">--请选择年份--</option> 
    <option>1990</option> 
    <option>1991</option> 
    <option>1992</option> 
</select>

在这里插入图片描述

文本域标签

<textarea name="文本域标签" id="" cols="30" rows="10" placeholder="textarea是文本域标签"> </textarea>

在这里插入图片描述

无语义标签：div & span

div 标签：division 的缩写，含义是分割

span 标签：含义是跨度

就是两个盒子，一般用于网页布局。

div 是独占一行的，是一个大盒子
span 不独占一行，是一个小盒子

<div>div是个大盒子独占一行</div> 
<span>span是个小盒子并不独占一行</span> 
<span>span是个小盒子并不独占一行</span>

在这里插入图片描述

html5语义化标签

div 没有语义，对于搜索引擎来说没有意义。为了让搜索引擎能够更好的识别和分析页面（SEO 优化），HTML 引入了更多的 “语义化” 标签。但是这些标签其实本质上都和 div 一样（对于前端开发来说）。然而对于搜索引擎来说，见到 header 和 article 这种标签就会重点进行解析，而 footer 这种标签就可以适当忽略。

header：头部
nav：导航
article：内容
section：某个区域
aside：侧边栏
footer：尾部

<header>头部容器标签</header> 
<nav>导航容器标签</nav> 
<article>内容容器标签</article> 
<section>某个区域的容器标签</section> 
<aside>侧边栏容器标签</aside> 
<footer>尾部容器标签</footer>

在这里插入图片描述

因为没有 CSS 的加持，所以解析完本质上是没有什么效果的，要配合 CSS 才会有效果！

多媒体标签

video标签：视频

audio标签：音频

<video src="https://www.runoob.com/try/demo_source/movie.mp4" controls="controls" 
       type="video/mp4">video是视频控件标签</video> 
<audio src="https://www.runoob.com/try/demo_source/horse.mp3" controls="controls" 
       type="audio/mp3">audio是音频控件标签</audio>

在这里插入图片描述

Ⅱ. CSS扫盲

层叠样式表 CSS（Cascading Style Sheets） 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。

1、基本语法规范：选择器 + 声明

选择器 + { 一条/N条声明 }

选择器决定针对谁修改（找谁）
声明决定修改啥（干啥）
声明的属性是键值对，使用 分号 ; 来区分键值对，使用 冒号 : 来区分键和值

<style> 
    p { 
        color: red;  	 /* 设置字体颜色 */ 
        font-size: 30px; /* 设置字体大小 */ 
    } 
</style> 

<p>hello</p>

CSS 要写到 style 标签中（后面还会介绍其他写法）
style 标签可以放到页面任意位置，一般放到 head 标签内
CSS 使用 / / 作为注释 （vscode 使用 ctrl + / 快速切换）

2、代码风格

样式格式

紧凑风格
```
p { color: red; font-size: 30px;}
```

展开风格（推荐）

p { 
    color: red; 
    font-size: 30px; 
}

样式大小写

虽然 CSS 不区分大小写，我们开发时 统一使用小写字母

3、选择器

选择器的功能

用于选中页面中指定的标签元素。简单地说，要先选中元素, 才能设置元素的属性。就好比 SC2、War3 这样的游戏，需要先选中单位，再指挥该单位行动。

选择器的种类

以下内容只是 CSS2 标准中支持的选择器，在 CSS3 中还做出了一些补充，咱们后面再说。

基础选择器：单个选择器构成的
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器：用一个 * 号来表示，表示对所有的标签产生效果
复合选择器：把多种基础选择器综合运用起来
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器

下面我们来解释一下这几种选择器：

通配符选择器：对所有的标签产生效果，是一个 * 号来表示

* { 
     margin: 0px; 
     padding: 3px; 
}

标签选择器：p 这种与 html 标签同名的称之为标签选择器，同类标签都具有这个属性

<html>
    <head>
        <title>test html</title>
        <style>
            p {  
                 color: red; 
                 font-size: 30px; 
            }
        </style>
    </head>
    <body>
        <p>这是一个标题</p>
    </body>
</html>

在这里插入图片描述

类选择器：类名以 . 开头，多个类属性可以在一个标签内使用

<html>
    <head>
        <title>test html</title>
        <style>
            .green { 
                color: green; 
            } 
            .big { 
                font-size: 40px; 
            } 
        </style>
    </head>
    <body>
        <p class="green big">这是一个类选择器修饰的属性</p>
    </body>
</html>

在这里插入图片描述

id选择器：名称以 # 开头，修饰指定 id 的标签容器，只能被一个标签使用，因为 id 唯一。

<html>
    <head>
        <title>test html</title>
        <style>
            #font { 
                font-size: 20px; 
                font-family:sans-serif; 
                color: aqua; 
            } 
        </style>
    </head>
    <body>
        <p id="font">这个是id选择器弄的样式</p>
    </body>
</html>

在这里插入图片描述

后代选择器：用于选择某个元素的后代元素。后代选择器使用 空格分隔两个或多个选择器，表示选择器左侧的元素的后代元素。比如下面，要选择所有 <p> 元素，可以使用后代选择器 div p，表示选择所有 <div> 元素的后代 <p> 元素。

<html>
    <head>
        <title>test html</title>
        <style>
            div p {
                font-size: 14px;
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <p class="child">这是子元素1。</p>
            <p class="child">这是子元素2。</p>
        </div>
    </body>
</html>

在这里插入图片描述

伪类选择器：用于选择元素的某个状态或行为。伪类选择器 以冒号（:）开头，后面跟着伪类的名称。例如，:hover 伪类选择器用于选择鼠标悬停在元素上时的状态。

以下是一些常见的伪类选择器：

:hover：选择鼠标悬停在元素上时的状态。
:active：选择元素被激活（例如鼠标点击）时的状态。
:focus：选择元素获得焦点时的状态。
:visited：选择已访问链接的状态。
:first-child：选择作为其父元素的第一个子元素的元素。
:last-child：选择作为其父元素的最后一个子元素的元素。
:nth-child(n)：选择作为其父元素的第n个子元素的元素。
:nth-of-type(n)：选择作为其父元素中指定类型的第n个子元素的元素。

<html>
    <head>
        <title>test html</title>
        <style>
            a { 
                font-size: 30px; 
            } 
            a:link { 
                color:blue; 
            } 
            /* a:visited 选择已经被访问过的链接 */ 
            a:visited { 
                color:darkgrey; 
            } 
            /* a:hover 选择鼠标指针悬停上的链接 */ 
            a:hover { 
                color: red; 
            } 
            /* a:active 选择活动链接(鼠标按下了但是未弹起) */ 
            a:active { 
                color:darkorange; 
            }
        </style>
    </head>
    <body>
        <a href="#">伪类选择器,可以试着鼠标放到连接上，以及点击后观察颜色变化</a>
    </body>
</html>

在这里插入图片描述

并集选择器：用于选择多组标签，即选择多个选择器所匹配的所有元素。并集选择器 使用逗号分隔两个或多个选择器，表示选择这些选择器所匹配的所有元素。

例如，给定以下HTML代码：

<p class="class1">这是段落1。</p>
<p class="class2">这是段落2。</p>
<div class="class1 class2">这是div元素。</div>

要选择所有具有 class1 或者 class2 类的元素，可以使用并集选择器 .class1, .class2，表示选择具有 class1 或者 class2 类的所有元素。可以将该选择器应用于 CSS 样式表中，例如：

.class1, .class2 {
    font-size: 14px;
    color: blue;
}

该样式规则将选择所有具有 class1 或者 class2 类的元素，并将它们的字体大小设置为 14 像素，颜色设置为蓝色。

再比如以下例子，结合表格标签的例子：

<html>
    <head>
        <title>test html</title>
        <style>
            th,td { 
             text-align: center; 
             width: 120px; 
             height: 50px; 
             border: 1px solid #f3f3f3; 
            }
        </style>
    </head>
    <body>
        <table> 
            <tr> 
                <th>名称</th> 
                <th>单价</th> 
                <th>数量</th> 
            </tr> 
            <tr> 
                <td>红烧茄子</td> 
                <td>￥18</td> 
                <td>2</td> 
            </tr> 
        </table>
    </body>
</html>

在这里插入图片描述

子选择器：用于选择作为另一个元素的直接子元素的元素。子选择器 使用大于号（>）分隔两个选择器，表示选择器左侧的元素的直接子元素。

例如，给定以下 HTML 代码：

<div class="parent">
    <p class="child">这是子元素1。</p>
    <span class="child">这是子元素2。</span>
    <p>这是普通段落。</p>
</div>

要选择所有 <p> 元素，但不包括 <div> 元素中的 <span> 元素，可以使用子选择器 div > p，表示选择 <div> 元素的直接子元素中的所有 <p> 元素。可以将该选择器应用于 CSS 样式表中，例如：

div > p {
    font-size: 14px;
    color: blue;
}

在这里插入图片描述

Ⅲ. JS扫盲

1、介绍

JavaScript（JS）是一种流行的脚本语言，通常用于在 Web 浏览器中创建交互式前端应用程序和动态网页。JavaScript 是一种解释型语言，可以在浏览器中运行，也可以在服务器端使用 Node.js 运行。

JavaScript 是一种面向对象的语言，它支持许多面向对象的概念，如封装、继承和多态。它还支持函数式编程，允许函数作为值传递和操作，从而使得编写高阶函数和函数组合变得更加简单。

JavaScript 也是一种动态类型的语言，它不需要在声明变量时指定类型，而是根据变量的值来确定其类型。这种灵活性使得JavaScript代码更加简洁和易于编写。

2、基本使用

这里我们不花时间讲语法，直接通过例子来学习，这是为了我们的项目服务的，其次 js 主要就是通过函数来实现动态的行为，其思想和我们以前学过的 C/C++ 是类似的！这里主要要学的是两个点：

给按钮添加点击事件
获取以及设置一个页面控件（普通的控件以及输入框，这两者的使用方式不太一样）的内容

下面我们分为三步，来逐步看看如何使用 js 进行简单的控制页面：

① 给按钮添加点击事件

首先是给按钮添加点击事件，这里有个 HTML 的例子，就是一个普通的按钮控件，没有任何的事件：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <button> 普通的按钮 </button>
    </body>
</html>

接着我们在 <button> 中添加一个 onclick 属性也就是点击属性，然后它的属性值是一个函数，这里设定为 test()，此时就变成这样子：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
</html>

然后就是完成 test() 函数的实现啦，一般来说，我们 要将 js 的代码放到整个 body 的后面，因为我们要等页面渲染完之后，再去进行脚本控制！并且在 js 代码块的片段，要加上 <script> 和 </script> 标签进行修饰，说明这是 js 的代码位置！

这里 test() 的功能我们写简单一点，就是一个弹窗操作，通过调用 alert() 就能触发弹窗警告：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
    <script>
        function test()
        {
            alert("你好呀！我是警告弹窗！");
        }
    </script>
</html>

在这里插入图片描述

② 获取以及设置一个普通的控件

这里我们以标题控件为例，下面是其基本的 html 例子：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <h2 id="h2_title"> hello liren </h2>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
    <script>
        function test()
        {}
    </script>
</html>

其中 h2 标题中带着 id 的属性，因为我们下面要通过 id 来寻找对应的标签进行操作！接下来我们完成 test() 函数的实现：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <h2 id="h2_title"> hello liren </h2>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
    <script>
        function test()
        {
            var h2 = document.getElementById("h2_title");
            alert(h2.innerHTML);
            h2.innerHTML = "bye~";
        }
    </script>
</html>

可以看到，这里用 var 关键字定义一个变量 h2，并且绑定的是 id 为 “h2_title” 的那个标签，它是通过 document.getElementById() 函数来实现的！

接着我们在代码中用 alert() 先打印出 h2 一开始的值，获取 h2 的值是通过 h2.innerHTML 来得到的。

最后如果我们关掉了弹窗，就会执行最后一行代码，也就是将 h2 的值修改为 “bye~”，如下图所示：

在这里插入图片描述

③ 获取以及设置一个对话框

这个操作对我们后面项目是比较重要的，因为涉及到聊天功能中的对话框，我们需要从用户在对话框输入的内容进行对页面的动态反馈！

首先还是一样给出一个基本的 html 例子：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <form>
            <input type="text" id="username" name="username">
        </form>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
    <script>
        function test()
        {}
    </script>
</html>

此时可以看到文本输入框中带有 id 属性，因为我们下面还是使用 id 属性去寻找特定控件。其次只要我们点击了按钮，就会触发 test() 去执行它的代码，现在我们来完成 test() 的实现：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <form>
            <input type="text" id="username" name="username">
        </form>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
    <script>
        function test()
        {
            var input = document.getElementById("username");
            alert(input.value);
            input.value = "";
        }
    </script>
</html>

可以看到还是通过 document.getElementById() 来找到对应 id 绑定给变量 input，然后弹出窗口，显示对话框变量 input 的内容，注意和普通控件不同的是，这里用的是 变量.value 来访问内容，当我们关闭对话框的时候，input 变量的内容就会被清空：

在这里插入图片描述

Ⅳ. AJAX扫盲

1、什么是 AJAX

页面显示完成后客户端仍与服务器端保持着联系。

浏览器执行JavaScript，可能会进行一些异步的操作，这个模式就是AJAX，也就是JavaScript向服务器发送一系列的异步请求，从而更新页面上的局部区域，从而达到动态网站的效果。

至此，所有的准备工作都已做好，你就可以开始和网页进行交互了！

AJAX = 异步 + JavaScript + XML（Asynchronous JavaScript and XML）

简单地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。再简单一点，就是一个异步的 http 客户端，向服务器发送 http 请求。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

而 jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON，同时能够把这些外部数据直接载入网页的被选元素中。

如果没有 jQuery，AJAX 编程还是有些难度的。 因为编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

所以我们下面的操作都是基于 jQuery 为我们提供的关于 AJAX 的方法！

2、安装 jQuery

jQuery 安装指导

根据上面的链接可以看到有两种安装方式，这里我们选择其中的替代方案，就是直接通过 **CDN（内容分发网络）**来引用它，这就不需要我们去下载和存放 jQuery，但是有时候这些链接比如下面的 Staticfile CDN：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>

这种链接有时候会失效了，当失效的时候我们要重新去网上查找对应的链接并且更新一下即可，这里我们就直接用这个 Staticfile CDN！

一般我们是将其放在 body 标签结束后的位置，如下所示：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <form>
            <input type="text" id="username" name="username">
        </form>
    </body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>  
</html>

3、基本使用

jQuery ajax() 方法

我们目前是为了项目而学里面的一些常用接口，下面就根据需求来接触样例来学习！

我们要做的就是在输入框和密码框中输入信息，然后做一个登录请求发送给服务器，服务器收到之后做一个响应信息之后把响应信息返回回来的功能！

首先搭建一下基本框架，也就是一个 id 为 username 的输入框，id 为 password 的密码框，还有一个普通按钮，但是里面有点击触发函数 test()，而 test() 中就包括了一个类似数组的变量 login_info，存放着两个元素，分别是 username 和 password，它们分别绑定的就是输入框和密码框，这个我们在 js 中就已经讲过了！

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <form>
            <input type="text" id="username" name="username">
            <input type="password" id="password" name="password">
        </form>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script>
        function test()
        {
            var login_info = {
                username: document.getElementById("username").value,
                password: document.getElementById("password").value
            }
            $.ajax({})
        }
    </script>
</html>

而最重要的就是 ajax 的定义，是一个 $ 符号加上 .ajax，后面跟着括号和花括号，下面我们就来填充一下花括号的具体内容：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <form>
            <input type="text" id="username" name="username">
            <input type="password" id="password" name="password">
        </form>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script>
        function test()
        {
            var login_info = {
                username: document.getElementById("username").value,
                password: document.getElementById("password").value
            }
            $.ajax({
                type: "post",
                url: "http://81.71.97.127:8080/login",
                data: JSON.stringify(login_info),
                success: function(res, status, xhr){
                    alert(res);
                },
                error: function(xhr){
                    alert(JSON.stringify(xhr));
                }
            })
        }
    </script>
</html>

type 字段就是要给对应服务器发送的请求类型。

url 字段是请求的资源路径（但其实这里是不行的，因为对于 ajax 来说，页面从哪里来的，它的请求就会发到哪里去，但是 ajax 有严格的认证，响应的内容和来源的链接它不一样，因为我们这个页面是本地的，而响应的内容是来自于服务器的，但服务器用的还是我们本地的资源，这就造成了错误，所以这里自己测试时候其实不太方便，但是我们可以确定的是，等会收到的响应一定是错误的，我们这里只需要保证能接收到响应即可！）

data 字段是要发送给服务器的数据，要先通过 json 格式化之后才能发送，所以要调用 JSON.stringify() 对 login_info 进行序列化！

success 是当客户端接收到正确的响应之后的成功处理回调函数，会进行何种操作由我们自行选择。这里我们直接给一个函数，在函数中打印出响应的信息即可，而响应的信息已经被解析并且存放在了第一个变量 res 里面，所以我们直接用 alert(res) 即可。

error 是当客户端接收到响应之后的失败处理回调函数，会进行何种操作由我们自行选择。这里我们也是直接打印出响应的错误信息即可，但是和成功信息不一样，这里的 xhr 是 XML 的一个 http request 的对象，它里面包含了一些详细的响应信息，但是在用之前我们要先对其进行解析也是就是反序列化，还是用 JSON.stringify() 函数进行解析！

下面我们去修改一下之前写的 websocket 服务器中 http_callback() 函数中一些细节（忘记源代码的可以翻翻之前的笔记）：

// 任务：打印请求内容，并且设置响应内容
void http_callback(wsserver_t* server, websocketpp::connection_hdl hdl)
{
    // 首先将一些请求内容打印到终端
    wsserver_t::connection_ptr conn_ptr = server->get_con_from_hdl(hdl); 
    std::cout << "body: " << conn_ptr->get_request_body() << std::endl;  

    websocketpp::http::parser::request req = conn_ptr->get_request();    
    std::cout << "method: " << req.get_method() << std::endl;           
    std::cout << "uri: " << req.get_uri() << std::endl;                  
    std::cout << "version: " << req.get_version() << std::endl;        

    // 然后再响应资源
    conn_ptr->set_body(conn_ptr->get_request_body()); // 改成了这条代码
    // std::string body = "<html><body><h1>Hello Liren!</h1></body></html>"; // 写一个简单的html页面格式
    // conn_ptr->set_body(body);                                             // 设置响应正文
    // conn_ptr->append_header("Content-Type", "text/html");                 // 设置响应头部
    // conn_ptr->set_status(websocketpp::http::status_code::ok);             // 设置响应状态码
}

上述代码中，就是将响应的代码，原本是返回一个简单的 html 页面，但是这次我们直接将收到的请求正文直接返回即可！

最后我们打开本地的 html 文档，进行操作之后的效果如下：

在这里插入图片描述

现在我们请求肯定返回的都是错误的，但是不怕，后面做项目的时候，文档都是在服务器上面的，就不会错误了！

如果出现 html 文档错误的话，可以在浏览器点击 f12 进行查看错误。

Ⅴ. WebSocket前端技术扫盲

在前面讲使用 WebSocket 服务器的搭建时候讲过，WebSocket 是一种协议，用于在客户端和服务器之间进行实时双向通信，在前端开发中，使用 WebSocket 可以实现实时更新和交互式的应用程序，例如在线游戏、聊天应用程序、股票行情等。使用 WebSocket 的好处是，它可以实现实时更新，而不需要客户端不断地发起请求，同时也可以减少服务器的负载。

不过之前讲的是一个 c++ 实现的库：websocketpp，而在前端开发的时候，我们也需要在 JavaScript 中使用一些 WebSocket API 来创建连接、收发消息、错误处理等等。

其实我们之前也见过 websocket 客户端的模样，我们再拎出来看看：

<!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>Test Websocket</title>
    </head>
    <body>
        <input type="text" id="message">
        <button id="submit">提交</button>
        <script>
            // 创建 websocket 实例
            // ws://192.168.51.100:8888
            // 类比http：
            // ws表示websocket协议，192.168.51.100 表示服务器地址，8888表⽰服务器绑定的端⼝
            let websocket = new WebSocket("ws://81.71.97.127:8080/");

            // 处理连接打开的回调函数
            websocket.onopen = function() {
                alert("连接建⽴");
            }
            // 处理收到消息的回调函数
            // 控制台打印消息
            websocket.onmessage = function(e) {
                alert("收到消息: " + e.data);
            }
            // 处理连接异常的回调函数
            websocket.onerror = function() {
                alert("连接异常");
            }
            // 处理连接关闭的回调函数
            websocket.onclose = function() {
                alert("连接关闭");
            }
            // 实现点击按钮后, 通过 websocket实例 向服务器发送请求
            let input = document.querySelector('#message');
            let button = document.querySelector('#submit');
            button.onclick = function() {
                console.log("发送消息: " + input.value);
                websocket.send(input.value);
            }
        </script>
    </body>
</html>

其中最重要的部分就是 <script> 标签内的代码，其实和我们当时写的服务器的思路也是类似的，创建 WebSocket 示例，然后实现几个回调函数，负责给服务器发消息和收消息！

下面我们结合上面学的基本前端操作，来写我们自己的一份 WebSocket 客户端加深印象。我们的工作就是要有 一个输入框，然后点击按钮之后，会将标题改为服务端发来的信息，并将输入框清空（我们服务端的代码中实现的其实就是客户端发过去的正文响应回来而已）。

先给出基本结构：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <h2 id="h2_title">Hello liren</h2>
        <form>
            <input type="text" id="username" name="username">
        </form>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
    <script>
        function test()
        {}
    </script>
</html>

下面我们先创建 WebSocket 实例，然后完成几个常见回调函数的实现：

<html>
    <head>
        <title>test html</title>
    </head>
    <body>
        <h2 id="h2_title">Hello liren</h2>
        <form>
            <input type="text" id="username" name="username">
        </form>
        <button onclick="test()"> 普通的按钮 </button>
    </body>
    <script>
        // 创建WebSocket实例
        var ws = new WebSocket("ws://81.71.97.127:8080")

        // 握手成功的回调函数
        ws.onopen = function(){
            alert("WebSocket 握手成功");
        }

        // 断开连接的回调函数
        ws.onclose = function(){
            alert("WebSocket 断开连接");
        }

        // 通信错误的回调函数
        ws.onerror = function(){
            alert("WebSocket 通信错误");
        }

        // 接受信息的回调函数
        ws.onmessage = function(evt){
            var h2 = document.getElementById("h2_title");
            h2.innerHTML = evt.data; // 将标题改为响应信息
        }

        function test()
        {
            // 点击之后发送输入框内容给服务端，然后清空输入框
            ws.send(document.getElementById("username").value);
            document.getElementById("username").value = "";
        }
    </script>
</html>

在这里插入图片描述

Ⅵ. 几种技术的区别

对于 HTML、CSS、JS 来说，它们的主要任务是为了渲染页面，而 AJAX 和 WebSocket 的任务是为了客户端与服务端之间的通信，这里主要讲一下后两者的区别：

通信方式：Ajax 使用的是基于 HTTP 的请求/响应模型，即客户端通过向服务器发送请求，然后等待服务器响应的方式进行通信。而 WebSocket 则是一种全双工的通信方式，允许客户端和服务器之间进行实时双向数据传输。
连接方式：Ajax 通过创建 HTTP 请求与服务器进行通信，每次请求都需要重新建立连接。而 WebSocket 则通过单个 TCP 连接进行通信，因此连接建立后可以保持长时间的双向通信。
数据格式：Ajax 可以使用多种数据格式进行通信，例如文本、JSON、XML 等。而 WebSocket 通常使用二进制或文本格式进行数据传输。
服务器支持：由于 Ajax 使用 HTTP 协议进行通信，因此任何支持 HTTP 的服务器都可以处理 Ajax 请求。而 WebSocket 则需要服务器支持 WebSocket 协议，通常需要使用特定的 WebSocket 服务器软件或框架。
安全性：由于 Ajax 使用 HTTP 协议进行通信，因此需要考虑安全性问题，例如跨域请求、CSRF 攻击等。而 WebSocket 也需要考虑安全性问题，例如 SSL/TLS 加密、同源策略等。

综上所述，Ajax 和 WebSocket 都有各自的优缺点和适用场景，需要根据具体的需求来选择使用哪种技术。如果 需要实现实时双向通信，WebSocket 是更好的选择；如果 只需要进行简单的请求/响应通信，可以使用 Ajax。

在这里插入图片描述

【在线五子棋对战】五、前端扫盲：html && css && javascript && ajax && jquery && websocket

文章目录

Ⅰ. HTML扫盲

1、认识 HTML 标签

2、HTML 文件基本结构

3、标签层次结构

4、HTML 常见标签

💥标题标签：h1-h6

💥段落标签：p

文本格式化标签

💥图片标签：img

💥超链接标签：a

表格标签

列表标签

💥表单标签

下拉菜单标签

文本域标签

无语义标签：div & span

html5语义化标签

多媒体标签

Ⅱ. CSS扫盲

1、基本语法规范：选择器 + 声明

2、代码风格

样式格式

样式大小写

3、选择器

选择器的功能

选择器的种类

Ⅲ. JS扫盲

1、介绍

2、基本使用

① 给按钮添加点击事件

② 获取以及设置一个普通的控件

③ 获取以及设置一个对话框

Ⅳ. AJAX扫盲

1、什么是 AJAX

2、安装 jQuery

3、基本使用

Ⅴ. WebSocket前端技术扫盲

Ⅵ. 几种技术的区别

网站公告

今日签到

热门文章

最新发布