HTML 中的文档

<body>
<h3>简单的Ajax实例</h3>
<div class="chatbox">
<!-- 聊天内容 -->
<div class="messages">
<div class="self">
<h5>我说</h5>
<p>你好</p>
</div>
<div class="other">
<h5>对方说</h5>
<p>你好</p>
</div>
</div>
<div class="form">
<div class="input">
<textarea></textarea>
</div>
<div class="btn">
<input type="button" value="发送" />
</div>
</div>
</div>
<script>
// 1. 给发送按钮添加点击事件, 点击时, 获取textarea的文本 value值
// 2. 动态创建我说部分, 动态创建 div, 类名 self, 并添加到聊天框中
// 3. 发送ajax请求到服务器, 服务器会返回一句话
// 4. 根据返回的话, 动态他说部分, 动态创建 div, 类名 other, 并添加到聊天框中
// 让滚动条, 滚动到显示这个盒子
// 盒子.scrollIntoView(); 让滚动条显示到盒子的位置
var btn = document.querySelector('.btn > input'); // 发送按钮
var textarea = document.querySelector('.form textarea');
var messages = document.querySelector('.messages');
btn.onclick = function() {
var value = textarea.value.trim(); // 获取值
textarea.value = ''; // 清空内容
if (value === '') {
return;
}
// 肯定是有值的
// 动态创建我说部分
var div = document.createElement('div');
messages.appendChild(div);
div.className = 'self';
div.innerHTML = "<h5>我说</h5><p>" + value + "</p>";
div.scrollIntoView();
// 发送ajax请求, 要求使用post
var xhr = new XMLHttpRequest();
xhr.open('post', '12.php');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('msg=' + value);
// 处理响应
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 响应成功
var result = xhr.responseText; // 获取结果
// 动态创建他说部分
var div = document.createElement('div');
messages.appendChild(div);
div.className = 'other';
div.innerHTML = '<h5>对方说</h5><p>' + result + '</p>';
div.scrollIntoView();
}
}
}
textarea.onkeyup = function(e) {
if (e.keyCode === 13) {
btn.onclick();
}
}
 
</script>
</body>
 
 
 
php中的文档
<?php
// 设置字符集
header('content-type: text/html; charset=utf-8;');
$arr = array(
'爱过',
'情不知所以',
'你妹',
'不约',
'你怎么穿着品如的衣服',
'晚上有空么'
);
// 从数组中随机出来一个
// array_rand(数组名, 随机出来几个下标)
// $rand = array_rand($arr, 2);
// print_r($rand);
$rand = array_rand($arr, 1); // 随机的下标
// php里面, 延时响应
sleep(1);
echo $arr[$rand];
?>
 
 
这种可以设置一个简单的与机器人对话的过程，最基础的

用ajax写机器人聊天的案例的更多相关文章

  1. 用Python写的一个多线程机器人聊天程序

    本人是从事php开发的, 近来想通过php实现即时通讯(兼容windows).后来发现实现起来特别麻烦, 就想到python.听说这家伙在什么地方都能发挥作用.所以想用python来做通讯模块...所 ...

  2. Vue2 全家桶仿 微信App 项目，支持多人在线聊天和机器人聊天

    前言 这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中.写这个项目主要目的是练习和熟悉vue和vuex ...

  3. Java接入图灵机器人，实现与机器人聊天

    很多人都玩过微信,其中就有与机器人聊天的功能:

  4. ajax 写登录

    AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ajax的优点: 1.最大的一点是页面无刷新,用户的体验非常好. 2.使用 ...

  5. python写机器人玩僵尸骰子

    python写机器人玩僵尸骰子由Al Sweigart用python发布注意:我正在为我的僵尸骰子模拟器寻找反馈,以及这一套指令.如果你觉得有什么地方可以改进,请发邮件到al@inventwithpy ...

  6. 你也可以写个聊天程序 - C# Socket学习1

    原文:你也可以写个聊天程序 - C# Socket学习1 简述 我们做软件工作的虽然每天都离不开网络,可网络协议细节却不是每个人都会接触和深入了解.我今天就来和大家一起学习下Socket,并写一个简单 ...

  7. Python实现机器人聊天

    今天午休的时候,无意之中看了一篇博客,名字叫Python实现机器人,感觉挺有的意思的.于是用其写了一个简单的Python聊天,源码如下所示: # -*- coding: utf- -*- import ...

  8. 使用itchat实现一个微信机器人聊天回复功能

    近看到好多群里都有一个@机器人的功能,挺有趣的,想自己也玩下,就通过百度一点点实现,在这总结一下整个从无到有的过程. 首先,要知道itchat,它是Python写的,所以想要实现这个机器人的功能,需要 ...

  9. 【阿里云产品公测】开放搜索服务 opensearch java jdk 应用体验之 机器人聊天

    作者:阿里云用户啊里新人 需求:基本实现智能聊天! 最近在开发一款机器人,希望实现基本的聊天功能,词库是有的,但是如果是做完全匹配这个出来的效果很悲催,   比如词库:你好,回答是:哈哈,很好啊. 如 ...

随机推荐

  1. C++入门经典-例6.4-输出字符数组中的内容

    1:代码如下: // 6.4.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using ...

  2. 【python】windows更改jupyter notebook（ipython）的默认打开工作路径

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  3. leetcode-easy-others-190. Reverse Bits-NO

    mycode 不会... 参考: 1. 思路: 将十进制的n转换成二进制(str) -> 利用切片.反向获取不包含0b的反转后的二进制字符串 -> 补上0(共32位) 2. class S ...

  4. leetcode 63 不同路径II

    二维数组动态规划,还可以采用一维数组进行动态规划. class Solution { public: int uniquePathsWithObstacles(vector<vector< ...

  5. 【剑指offer38】字符串的排列

    如果没有要求字典序排序,则直接采用递归的思想,将字符串的排列看成两步,第一步,交换第一个字母和任意一个字母(包括自己,但不包括和自己相等的其他字母)固定第一个字母,固定第一个字母,然后对后面的字符串也 ...

  6. LDA(Latent Dirichlet Allocation)主题模型算法

    原文 LDA整体流程 先定义一些字母的含义: 文档集合D,topic集合T D中每个文档d看作一个单词序列< w1,w2,...,wn >,wi表示第i个单词,设d有n个单词.(LDA里面 ...

  7. java里poi操作excel的工具类（兼容各版本）

    转: java里poi操作excel的工具类(兼容各版本) 下面是文件内具体内容,文件下载: import java.io.FileNotFoundException; import java.io. ...

  8. rsync从linux到linux的文件同步备份

    rsync从linux到linux的文件同步备份 一.环境 需要备份文件的服务器(服务器端):192.168.1.201 (RHEL 5) 接收备份文件的服务器(客户端):192.168.1.202 ...

  9. Nginx正向代理、反向代理、负载均衡及性能优化

    一.Nginx是什么 Nginx是一款高性能的 HTTP 和反向代理服务器,由俄罗斯人Igor Sysoev(伊戈尔·赛索耶夫)为俄罗斯网站Rambler.ru开发的,在Rambler.ru网站平稳的 ...

  10. Java Map集合 遍历 五种方式（包含 Lambda 表达式遍历）

    示例代码如下: package com.miracle.luna.lambda; import java.util.HashMap; import java.util.Iterator; import ...