AJAX实现图灵机器人聊天-优快云博客

首先，搜索图灵机器人，在图灵机器人注册一个账号，然后新建一个机器人，获得一个key就可以了，这样就可以聊天了。

关键是你在图灵机器人新建生成的key：

key=9257afd24a374c69b91eeb687d463763
这段代码是复制的，从你新建那里得到。

另外我用的是版本一：（post的第一个参数url）

http://www.tuling123.com/openapi/api

当然你可以用图灵的第二个版本的API也是可以的。

图片我这里用了三张：一张背景图，两张头像图片。

你们可以换成自己想要的图片即可。

文件呢，主要是两个：一个是myajax的js文件，另外一个是html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fengmaybe_Robot</title>
    <script src="myAjax.js"></script>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .imgLayout{
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: url("star.jpg");
        /*简单粗暴解决高度塌陷问题（记得复习其他方法） */
        padding:1px;
    }
    .outer{
        box-sizing: border-box;
        width: 600px;
        height: 600px;
        border-radius: 20px;
        background-color: whitesmoke;
        border: 2px solid white;
        margin: 20px auto;
        padding: 5px;
    }
    .chatContent{
        box-sizing: border-box;
        width: 100%;
        height: 480px;
        /*设置滚动 这里吕某经常用// 符号注释，使得下面一行代码失效*/
        overflow: auto;
        margin-bottom: 10px;
    }
    .outer input{
        width: 580px;
        height: 45px;
        font-size: 30px;
        line-height: 45px;
    }
    .outer button{
        width: 580p