Add files via upload

ajax.js

@@ -0,0 +1,74 @@
+
+/**
+ *  ajax: async javascript and xml（json）(代表着一种数据结构) 
+ *  同步：一行一行执行 按顺序执行 如果前面出现问题了  后面的代码不会执行（阻碍后续代码的执行）
+ *  异步：可以同时执行
+ *  XMLHTTPRequest 
+ *  ajax: 应用： 前端页面和后台进行数据交互的一种方案
+ *  
+ *  问问题：
+ *  1. 明确问谁  （url地址）
+ *  2. 明确以哪种方式传递数据  （请求方式type）
+ *  3. 明确问问题的条件        （请求参数data）
+ *  4. 对方的答案给到我之后的处理  （成功的回调函数success）
+ *  5. 对方没有给予正常的回答的处理  （失败的回调函数 error）
+ */
+function ajax(options) {
+    // 请求的服务器地址
+    var url = options.url || '';
+    // 请求方式
+    var type = options.type.toUpperCase() || 'GET';
+    // 请求参数   字符串 key=value&key1=value1
+    var data = options.data || '';
+    // 成功的回调函数
+    var success = options.success || function () {};
+    // 失败的回调函数
+    var error = options.error || function () {};
+    // 当前请求是否异步
+    var async = typeof options.async == 'boolean' ? options.async : true;
+    // 请求拦截函数  如果返回false 则不发出网络请求  否则发出
+    var beforeSend = options.beforeSend || function (xhr) {return xhr};
+    // 存储整个网络请求的所有信息对象
+    var xhr = null;
+    if (window.XMLHttpRequest) {
+        xhr = new XMLHttpRequest();
+    } else if (window.ActiveXObject) {
+        xhr = new ActiveXObject('Microsoft.XMLHTTP');
+    } else {
+        return alert('当前浏览器不支持XMLHTTPRequest');
+    }
+    // xhr.readyState  0 - 4
+    // 0    建立连接之前
+    // 1    建立连接 调用open方法了
+    // 2    open调用完了  等待发送数据
+    // 3    正在发送和接收数据
+    // 4    整个请求已经完成  对方已经给予回应
+    xhr.onreadystatechange = function () {
+        if(xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                success(JSON.parse(xhr.responseText));
+            }
+        }
+    }
+    // 监听到错误之后 调用error回调函数
+    xhr.onerror = function (err) {
+        error(new Error(err));
+    }
+    if (!beforeSend(xhr)) {
+        return false;
+    }
+    if (type === 'GET') {
+        // 建立连接
+        xhr.open(type, url + '?' + data, async);
+        xhr.send();
+    } else {
+        // 建立连接
+        xhr.open(type, url, async); 
+        // 设置编码类型  （编码类型指代的是 传递过程当中数据的格式  后台在接收到这个请求的时候 应该以什么格式解析）
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+        // 发出数据
+        xhr.send(data);
+    }
+
+
+}

index.css

@@ -0,0 +1,132 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
+/* 伪元素 */
+::-webkit-scrollbar {
+
+    width: 0;
+    /* 隐藏滚动条 */
+}
+
+.box {
+    width: 600px;
+    /* 
+        vh: viewport height 
+            一个设备的高度平均分成了100份  
+              设备的高度 =  100vh
+        vw: viewport width
+            一个设备的宽度 = 100vw
+    */
+    height: 100vh;
+    margin: 0 auto;
+    background-color: #eee;
+}
+
+.header {
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    text-align: center;
+    background-color: grey;
+}
+
+.content {
+    overflow-y: scroll;
+    /* 塌陷了 */
+    height: calc(100% - 40px - 50px);
+}
+
+.send-box {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background-color: #ddd;
+}
+
+.clearfix::after {
+    content: '';
+    display: block;
+    clear: both;
+}
+
+.mine {
+    display: block;
+    margin: 5px 10px;
+}
+
+.robot {
+    display: block;
+    margin: 5px 10px;
+}
+
+.mine .avator {
+    width: 30px;
+    height: 30px;
+    background-image: url('./img/3.png');
+    background-size: 100% 100%;
+    float: right;
+}
+
+.text {
+    padding: 0 10px;
+    line-height: 30px;
+    border-radius: 5px;
+    max-width: 50%;
+    /* 最大宽度，防止换行 */
+}
+
+.mine .text {
+    float: right;
+    background-color: greenyellow;
+    position: relative;
+    margin-right: 5px;
+}
+
+.mine .text::after {
+    content: "";
+    position: absolute;
+    right: -10px;
+    top: 10px;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-left-color: greenyellow;
+}
+
+.robot .avator {
+    width: 30px;
+    height: 30px;
+    background-image: url('./img/dog1.jpg');
+    background-size: 100% 100%;
+    float: left;
+}
+
+.robot .text {
+    float: left;
+    margin-left: 5px;
+    background-color: #fff;
+    position: relative;
+}
+
+.robot .text::after {
+    content: "";
+    position: absolute;
+    left: -10px;
+    top: 10px;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-right-color: #fff;
+}
+
+.send-box #send-inp {
+    width: 500px;
+    height: 30px;
+}
+
+.send-box #send-btn {
+    width: 80px;
+    height: 30px;
+}

index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>聊天机器人</title>
+    <link rel="stylesheet" href="./index.css">
+</head>
+
+<body>
+    <div class="box">
+        <h4 class="header">
+            AI客服
+        </h4>
+        <div class="content">
+            <div class="mine clearfix">
+                <div class="avator"></div>
+                <div class="text">今天你吃了吗？</div>
+            </div>
+            <div class="robot clearfix">
+                <div class="avator"></div>
+                <div class="text">吃饱了！</div>
+            </div>
+        </div>
+        <div class="send-box">
+            <input type="text" id="send-inp">
+            <button id="send-btn">发送</button>
+        </div>
+    </div>
+    <script src="./ajax.js"></script>
+    <script src="./index.js"></script>
+</body>
+
+</html>

index.js

@@ -0,0 +1,56 @@
+var sendInp = document.getElementById('send-inp');
+var sendBtn = document.getElementById('send-btn');
+sendInp.onkeyup = function (e) {
+    // 键盘的enter
+    if (e.which == 13) {
+        // 
+        sendBtn.click();
+    }
+}
+sendBtn.onclick = function () {
+    var val = sendInp.value.trim();
+    if (val) {
+        renderDom('mine', val);
+        sendInp.value = '';
+        getData(val);
+    }
+}
+
+// 发送请求函数
+function getData(val) {
+    ajax({
+        // url: 'http://localhost:3000/chat',
+        url: 'https://developer.duyiedu.com/edu/turing/chat',
+        type: 'get',
+        data: 'text=' + val,
+        success: function (res) {
+            renderDom('robot', res.text); // 返回的text渲染到页面
+        }
+    })
+}
+
+
+// 渲染内容区
+function renderDom(className, text) {
+    var oDiv = document.createElement('div');
+    oDiv.className = 'clearfix ' + className;
+    oDiv.innerHTML = `  <div class="avator"></div>
+    <div class="text">${text}</div>`;
+    var content = document.querySelector('.content');
+    content.appendChild(oDiv);
+    // console.log(content, content.scrollHeight);
+    // scrollTo(0,offsetHeight):offsetHeight不变，一直是一个位置
+    // 应该是里面内容区的最底部
+    // content.scrollTo(0, content.scrollHeight)传递的是滚动条到达的坐标
+    content.scrollTop = content.scrollHeight - content.clientHeight;
+}
+
+// clientHeight不包含边框  offsetHeight包含边框
+// scrollHeight 表示的是在没有滚动条的时候 该区域如果被内容区撑开的高度
+// window.innerHeight    元素身上没有
+// 元素身上有offsetHeight,clientHeight
+// 一个IP映射多个域名：也存在跨域（域名）  和ip无关
+// 127.0.0.1  localhost   
+// 127.0.0.1  aaaa
+
+// 图灵机器人配合node