码迷,mamicode.com
首页 > Web开发 > 详细

用ajax写机器人聊天的案例

时间:2019-05-24 20:48:02      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:ESS   result   response   inner   服务器   into   request   创建   and   

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写机器人聊天的案例

标签:ESS   result   response   inner   服务器   into   request   创建   and   

原文地址:https://www.cnblogs.com/yeanling/p/10920071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!