Web_Ajax 聊天机器人JSON文件版完成

需求: 点击按钮发送输入框内容 能够显示返回的信息 实现聊天效果
步骤:

1. 获取元素 btn input msgList
2. btn点击事件 获取输入框输入的内容
3. 创建一个ownMsg的div 设置输入的内容
4. 把创建出来的onwMsg的div拼接到msgList里面去
5. 发送本次输入的内容ajax给服务器
6. 在返回的数据里面 再次创建robot的div设置返回内容
7. 把robotMsg的div拼接到msgList里面去
8. 让聊天界面滚动到最底部

<div id="box">
    <div id="msgList">
        <!--<div class="ownMsg">你好</div>
        <div class="robotMsg">我不好</div>-->
    </div>
    <div id="userContent">
        <input type="text"><button>发送</button>
    </div>
</div>

*{
	padding: 0;
	margin: 0;
}
body,html{
	height: 100%;
}
#box{
	width: 400px;
	height: 95%;
	border: 1px solid #e4393c;
	margin: 0 auto;
	background: url("bg.jpg") no-repeat 0 0/100% 100%;
}
#msgList{
	height: 80%;
	overflow: auto;
}
#userContent{
	height: 20%;
}
#userContent>input{
	height: 100%;
	width: 70%;
	border: none;
	outline: none;
	vertical-align: top;
	font-size: 40px;
}
#userContent>button{
	height: 100%;
	width: 30%;
	border: none;
	outline: none;
	background-color: #e4393c;
	color:#fff;
	font-size: 45px;
}
#userContent>button:active{
	background-color: #e41414;
}
#msgList>div{
	height: 35px;
	padding: 0 25px ;
	line-height: 35px;
	font-size: 20px;
	font-weight: 700;
	border-bottom: 1px solid #e4393c;
}
#msgList>div.myMsg{
	background-color: rgba(255, 255, 255, 0.5);
	text-align: right;
}
#msgList>div.robotMsg{
	background-color: rgba(228, 57, 60, 0.5);
}

// 1.获取元素  btn input msgList
var btn=document.getElementsByTagName("button")[0];
var inp=document.getElementsByTagName("input")[0];
var msgList=document.getElementById("msgList");
/*把自己聊天框的类名和  机器人聊天框的类名  都提前声明好
* 用的时候直接调用变量即可  声明可以放在程序代码的最上面
* 方便维护查找
* */
var ownClass="myMsg";
var robotClass="robotMsg";
// 2.btn点击事件 获取输入框输入的内容
btn.onclick=function () {
//获取输入框输入的内容
	var content=inp.value;
	if(content==""){
		alert("发送的内容不允许为空");
		return;
	}
	// 3.创建一个ownMsg的div 设置输入的内容
	createChat(ownClass,content);
	// 5.发送本次输入的内容ajax给服务器
	ajaxTools({
		url:"php/01.ChatServerByJSON.php",
		data:"chatcontent="+content,
		success:function (ajaxObj) {
		    // console.log(ajaxObj.responseText);
		    //6.在返回的数据里面 再次创建robot的div设置返回内容
		    createChat(robotClass,ajaxObj.responseText)
		}
	});
}
/*把创建div并设置内容 并且拼接到页面上去的代码封装起来*/
function createChat(className,content) {
	var newDiv=document.createElement("div");
	newDiv.setAttribute("class",className);
	newDiv.innerHTML=content;
	msgList.appendChild(newDiv);
	//每次拼接完div以后 都会让盒子的内容变高
	//然后再滚动到最底部
	//让被卷去的头部等于 当前内容的最大高度 也就实现了 卷去的头部为最大值，也就是底部
	msgList.scrollTop=msgList.scrollHeight;
}

/*ajaxTools()方法的封装
参数列表:
	settings对象  一个json对象 必须包含以下几个属性:
		type: 请求方式
		url:服务器地址
		data:提交的数据
		success: 成功的回调
*/
function ajaxTools(settings) {
	if(!settings.url){/*没有服务器地址*/
		return;
	}
	if(!settings.type || settings.type.toLowerCase()!="post"){/*如果没写请求方式默认是get*/
		settings.type="get";
	}else{
		settings.type="post";
	}
	var ajaxObj=new XMLHttpRequest();
	if(settings.type=="get"){
		if(settings.data){
			settings.url=settings.url+"?"+settings.data;
		}
		ajaxObj.open("get",settings.url);
		ajaxObj.send();
	}else{
		ajaxObj.open("post",settings.url);
		ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		if(settings.data){
			ajaxObj.send(settings.data);
		}else{
			ajaxObj.send();
		}
	}
	ajaxObj.onreadystatechange=function () {
		if(ajaxObj.readyState==4 && ajaxObj.status==200){
			if(typeof settings.success=="function"){
				settings.success(ajaxObj);
			}
		}
	}
}

<?php
	header('Content-type:text/html;charset=utf-8');		
	if(!isset($_GET["chatcontent"])){
		echo "你还未发送聊天的内容";
		return;
	}
	//    把json文件的数据读成字符串返回
	$dataArrStr=file_get_contents("data/main.json");
	$defaultArrStr=file_get_contents("data/default.json");
	/*	json_encode  编码:  把对象变成 json字符串
		json_decode 解码:  把json字符串 变成对象
		json_decode有四个参数
		json_string: 待解码的 JSON 字符串，必须是 UTF-8 编码数据
		assoc: 当该参数为 TRUE 时，将返回数组，FALSE 时返回对象。
		depth: 整数类型的参数，它指定递归深度
		options: 二进制掩码，目前只支持 JSON_BIGINT_AS_STRING 。
		我们只看前两个:
		第一个是要解码的字符串
		第二个参数写true 返回值是数组，写false返回值是 对象*/
	$dataArr=json_decode($dataArrStr,true);
	$defaultArr=json_decode($defaultArrStr,true);
	$content=$_GET["chatcontent"];
	//print_r($dataArr);
	$arr;
	if(array_key_exists($content,$dataArr)){
		$arr=$dataArr[$content];
	}else{
		$arr=$defaultArr;
	}
	$num=array_rand($arr);
	sleep(1);
	echo $arr[$num];
?>

//data/default.json---↓
[
  "你说的是啥呢?",
  "听不懂人类语言",
  "地球好危险",
  "你们人类好复杂",
  "能再说一遍么?"
]
//data/main.json---↓
{
  "你好": ["我不好","你也好","大家都好","好啥好"],
  "再见": ["再也不见","滚吧","跪安吧","退下吧"],
  "你吃了没": ["没钱","不饿","减肥","吃不起"],
  "你在干嘛": ["没干嘛","你要干嘛","待着","发愣"]
}