关键词：
一、准备工作
js和界面部分和前面的笔记一样【前端笔记】二、JavaScript实例
通信部分【前端笔记】三、前后端通信（http协议和Ajax）
回顾发送请求的方法：
//需要发送的消息
var msg = 'hello'
// 创建一个XHR对象
var xhr = new XMLHttpRequest();
console.log('刚刚创建的XHR对象：', xhr.readyState);
// 打开XHR对象，
xhr.open('POST', 'https://www.qsxqd.com/api/play/helloworld');
console.log('调用open函数后的XHR对象：', xhr.readyState);
// 设定XHR对象的onreadystatechange属性
xhr.onreadystatechange = function()
console.log('调用send函数后的XHR对象：', xhr.readyState);
// 浏览器接收完成服务器数据
if (xhr.readyState === 4)
// 响应状态码有效
if (200 <= xhr.status < 300 || xhr.status === 304)
console.log('接收到服务器数据：', xhr.responseText);
// 发送http请求
xhr.send(msg);
关注open函数，xhr.open('POST', 'https://www.qsxqd.com/api/play/helloworld');，第一个参数为请求方式，第二个参数为url
修改第一个参数，由post方式改为get 方式，然后修改url
var xhr = new XMLHttpRequest();
console.log('刚刚创建的XHR对象：', xhr.readyState);
// 打开XHR对象，请求方式为GET
xhr.open('GET', 'https://robotchat.xhxly.cn/api.php?key=free&appid=0&msg='+msg);
console.log('调用open函数后的XHR对象：', xhr.readyState);
// 设定XHR对象的onreadystatechange属性
xhr.onreadystatechange = function()
console.log('调用send函数后的XHR对象：', xhr.readyState);
// 浏览器接收完成服务器数据
if (xhr.readyState === 4)
// 响应状态码有效
if (200 <= xhr.status < 300 || xhr.status === 304)
console.log('接收到服务器数据：', xhr.responseText);
// 发送http请求
xhr.send();
get请求和post请求的主要区别是：
- get请求直接通过URL来给服务端发消息，也就是消息被一起拼接在URL里
- post请求，约定通过body来传递消息，也就是**xhr.send()**括号里的内容
函数封装：
function ajax(method, url, data, cb)
// 默认请求方式为 GET
method = method || "GET";
data = data || null;
if (!url)
throw new Error("必须指定 url 参数");
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onreadystatechange = function()
// readyState 为 4 时表示已经全部接收到响应数据
if (xhr.readyState === 4)
// Http 状态码大于等于 200 小于 300，或者等于 304，表示请求成功
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)
cb(xhr.responseText);
else
cb(null);
;
xhr.send(data);
var msg = 'hello'
ajax('GET', 'https://robotchat.xhxly.cn/api.php?key=free&appid=0&msg='+msg, null,function success(response)console.log(response))
这里的cb是一个回调函数，ajax函数执行后调用传入的这个函数来发送消息
二、调用相关API完成机器人实现自动回复
html界面布局：
<!DOCTYPE html>
<html>
<body>
<header>
<link rel="stylesheet" type="text/css" href="chat.css">
<h2>聊天机器人</h2>
</header>
<ul class="message-list" id="message-list">
<li class="message-list__item-robot">
<div>
你好，我是聊天机器人
</div>
</li>
<li class="message-list__item-user">
<div>
你好
</div>
</li>
</ul>
<!--输入区-->
<div class="message-send ">
<textarea id="inputArea"></textarea>
<button id="sendMsgButton">发送</button>
</div>
</body>
<script src="./chat_utf.js"></script>
</html>
css样式：
*
margin: 0;
padding: 0;
header
background-color: dodgerblue;
color: white;
padding: 15px 0px;
display: flex;
justify-content: center;
.message-list
width: 100%;
padding: 10px;
overflow-y: scroll;
position: fixed;
top: 65px;
bottom: 300px;
left: 0px;
.message-list__item-robot,
.message-list__item-user
margin-bottom: 10px;
display: flex;
.message-list__item-user
flex-direction: row-reverse;
.message-list__item-robot div
padding: 7px;
border-radius: 5px;
background: lightgray;
.message-list__item-user div
padding: 7px;
border-radius: 5px;
background: dodgerblue;
color: white;
display: none;
.message-send
display: flex;
border-top: 1px solid lightgray;
height: 300px;
width: 100%;
display: flex;
position: fixed;
bottom: 0px;
left: 0px;
.message-send textarea
outline: none;
border: none;
flex-grow: 1;
padding: 7px;
font-size: 16px;
.message-send button
border: none;
width: 50px;
background: dodgerblue;
color: white;
js功能：
// 找到发送按钮
var sendMsgButton = document.getElementById('sendMsgButton')
// 找到输入框
var inputArea = document.getElementById('inputArea')
// 找到聊天列表
var msgList = document.getElementById('message-list')
/**
* 封装与服务器通信的ajax函数
* @param method 请求方式，GET或POST
* @param url 服务器url地址
* @param data 传送的data
* @param cb 回调函数，用于获取服务器发送的回复
*/
// 向服务器发送请求
function ajax(method, url, data, cb)
var xhr = new XMLHttpRequest();
xhr.open(method, url);
console.log("xhr.readyState=" + xhr.readyState + " open xhr")
xhr.onreadystatechange = function()
console.log("onreadystatechange readyState: " + xhr.readyState)
if (xhr.readyState === 4)
console.log("xhr.readyState = 4 xhr.status = " + xhr.status)
// Http 状态码大于等于 200 小于 300，或者等于 304，表示请求成功
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)
console.log("xhr.responseText:" + xhr.responseText)
cb(xhr.responseText);
else
cb(null);
;
xhr.send(data)
console.log("xhr.readyState=" + xhr.readyState + " send data")
/**
* 统一的添加消息函数
* @param msg 需要添加的消息
* @param className 消息节点的类名
*/
function sendMsg(msg, className)
//创建元素
var li = document.createElement('li')
li.className = className
var div = document.createElement('div')
div.innerText = msg
//添加至聊天记录中
li.appendChild(div)
msgList.appendChild(li)
if (className == "message-list__item-user") div.style.display = "block"
/**
* 点击事件
*/
function handleSendMsg()
// 获取输入框文字
var userMsg = inputArea.value;
// 清空输入框
console.log("userMsg:" + userMsg);
if (userMsg == "")
alert("消息不得为空")
return;
inputArea.value = ''
//发送用户消息
sendMsg(userMsg, "message-list__item-user");
var url = "http://api.qingyunke.com/api.php?key=free&appid=0&msg=" + userMsg;
// var url = "https://robotchat.xhxly.cn/api.php?key=free&appid=0&msg=" + userMsg;
console.log("url:" + url);
ajax('GET', url, null, function success(response)
console.log("response:\\n" + response);
)
// 监听点击事件
sendMsgButton.addEventListener('click', handleSendMsg);
…
待完善内容：
- 回车发送
- 发送图片
- 回复时自动显示最新消息（消息列表滚动到最底部，页面不被遮挡）
参考：
前端入门：https://www.zhihu.com/question/32314049/answer/713711753
然代码：https://www.qsxqd.com/
前端笔记三前后端通信（http协议和ajax）(代码片段)
....获取服务器返回的数据三、实例一、http协议http协议就是前端与后端之间相互通信所遵循的协议，协议定义了传输信息的格式，信息所表示的具体的含义。前端和后端之间沟通的信息分为两种：前端给后端发送的信息... 查看详情
网络编程——tcp协议和通信(代码片段)
第1章 TCP通信TCP通信同UDP通信一样，都能实现两台计算机之间的通信，通信的两端都需要创建socket对象。区别在于，UDP中只有发送端和接收端，不区分客户端与服务器端，计算机之间可以任意地发送数据。而TCP通信是严格区... 查看详情
flask前后端数据通信流程(代码片段)
对于服务器开发工程师来说，前端页面的刷新分：1、后端刷新2、前端刷新1、后端刷新的实现是通过模板+数据的方式实现的2、前端刷新是通过jQuery的Ajax+jQuery动态加载HTML、CSS的方式实现的 不管是后端刷新和前端刷新，它们... 查看详情
osi协议和tcp/ip协议笔记
1、OSI协议：第7层应用层：OSI中的最高层。是用户与网络的接口。该层通过应用程序来完成网络用户的应用需求，如文件传输、收发电子邮件等。在此常见的协议有:HTTP，HTTPS，FTP，TELNET，SSH，SMTP，POP3等。第6层表示层：... 查看详情
netty学习：通信协议和编解码
无论使用Netty还是原生Socket编程，都可以实现自定义的通信协议。所谓协议就是：客户端和服务端商量好，每一个二进制数据包中的每一段字节分别代表什么含义的规则。有了规则，在服务端和客户端就可以通过这个设置好的规... 查看详情
im即时通讯开发的那些坑：架构设计通信协议和客户端
有过移动端开发经历的开发者都深有体会：移动端IM的开发，与传统PC端IM有很大的不同，尤其无线网络的不可靠性、移动端硬件设备资源的有限性等问题，导致一个完整的移动端IM架构设计和实现都充满着大量的挑战。移动互联... 查看详情
从反向代理请求中保留协议和端口号
】从反向代理请求中保留协议和端口号【英文标题】：Retainingprotocolandportnumberfromreverseproxyrequest【发布时间】：2014-03-0303:43:42【问题描述】：案例：用户请求https://api.abc.com这是反向代理(Apache2.2)到http://internal.abc.com:123的内部服务... 查看详情
http协议和httpd的配置(代码片段)
http协议和httpd的配置来自马哥教育学习笔记一.URL：UnifromResourceLocatorURL方案：scheme服务器地址：ip:port资源路径：http://www.magedu.com:80/bbs/index.php,https://二.基本语法：br/>params:参数http://www.magedu.com/bbs/hello;gender=fquery：http 查看详情
17江科大stm32视频学习笔记——usart串口协议和usart串口外设
目录1、通信接口2、硬件电路3、电平标准4、串口参数及时序5、USART简介 6、USART工作（1）写操作（2）读操作（3）帧头和帧尾的添加和除由电路自动执行（4）硬件数据控制流（5）中断输出... 查看详情
http学习
...信的过程前后端通信的过程是在“请求—响应”中完成的前端：浏览器端客户端：只要能和服务器通信的就叫客户端后端：服务器端二、HTTP请求响应的过程三、HTTP报文浏览器向服务器发送请求，请求本身就是信... 查看详情
flask数据通信的流程前后端刷新的方法
...流程 前后端刷新的方法对于服务器开发工程师来说，前端页面的刷新分：1、后端刷新2、前端刷新后端刷新的实现是通过模板+数据的方式实现的2、前端刷新是通过jQuery的Ajax+jQuery动态加载HTML、CSS的方式实现的不管是后端刷... 查看详情
网络通信协议和通信
1.通信规则（建立规则）标志发出方和接收方通用语言和语法传递的速度和时间证实或确认要求2.多协议互动时常见的计算机协议·消息编码·消息格式和封装·消息大小·消息时序·消息传输选项 查看详情
前后端分离学习笔记---[vue基础](代码片段)
...信建议官方文档学习VUE2.0版本在线文档1.关于前后端分离前端html页面通过ajax调用后端的restufulapi接口并使用json数据进行交互.前端服务器使用nginx/tomcat。前端/WEB服务器放的是css，js，图片等等一系列静态资源，前端服... 查看详情
了解http协议和tcp协议
HTTP(超文本传输协议)，互联网上应用最为广泛的一种网络协议。所有的www文件都必须遵守这个标准。HTTP是一个客户端和服务端请求和应答的标准（TCP）；客户通过浏览器发起一个到服务器上指定端口的HTTP请求。通常，由HTTP客户... 查看详情
http协议和socket接口区别
...如：同轴电缆，插头，接收器，水晶头，网线等。可以在通信的两个数据终端的设备之间连接起来形成一条通路。再说下这个协议中的某一项规定：比如eiars-232-c及rs-449就可以兼容于100 查看详情
协议和协议栈的区别？
协议和协议栈的区别？2017年06月19日10:53:36阅读数：3089在通信领域特别是无线通信领域，我们经常会听到用到什么协议啊，什么协议栈方面的东西。1.首先，协议定义的是一些列的通信标注，通信的双方需要共同按照这一个标准... 查看详情
前端整体流程
...uery、vue.js、bootstrap三、web框架学习（flask、django）四、web前端实战项目案例（京东PC端首页以及移动端首页） web基础、http协议、python自定义web服务器ajax==json、ajax基础、ajax的开发实例、ajax跨域和网络安全 框架flask、... 查看详情
swift学习笔记-协议和扩展(代码片段)
协议声明使用protocol来声明协议。protocolExampleProtocolvarsimpleDescription:Stringgetmutatingfuncadjust()协议的遵循类、枚举以及结构体，都可以遵循某个协议。类classSimpleClass:ExampleProtocolvarsimpleDescription:String=“Averysimp 查看详情