Springboot+neo4j+d3（项目负责部分笔记）

Springboot+neo4j+d3（项目负责部分笔记）

---

前言

刚刚完成了一个小项目，想通过CSDN记录下自己学到的东西

这是一个关于英国高校查询的项目，建立了neo4j存储数据，springboot建立项目，在前端d3可视化图谱。

---

文章只记录了我负责的部分

一、AJAX异步通信

由于设计了智能机器人问答模块，需要前端后端进行信息的交流，我采用的是Ajax通信。Ajax因为是异步的信息传递，所以可以实现动态的网页内容更新。

二、使用步骤

1. 前端触发sendMsg()

代码如下（示例）：

<textarea id="msg_input" class="msgInput"></textarea> <!--document.getElementById('msg_input')-->
<button id="sendbtn" class="sendbtn">发送</button>    <!-- document.getElementById('sendbtn').onclick = function() -->

document.onkeypress = function(event) {
			var e = event || window.event;
			var keycode = e.keyCode || e.which;
			console.log(e)
			if (keycode == 13) {//按下enter键
				sendMsg()       
			}
		}

2. sendMsg(): 派xhr去与服务器联络

代码如下（示例）：

function sendMsg() {
			var input = document.getElementById('msg_input');//查找缓存
			var ul = document.getElementById('content');  
			var newLi = document.createElement('li');//Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素     
			newLi.innerHTML = input.value;               
			newLi.className = 'msgContent right';         
			ul.appendChild(newLi);                       
			var div = document.createElement('div');
			div.style = 'clear:both';                    
			ul.appendChild(div);

//后面还有

3. xhr请求过程, 成功拿到output会返回浏览器

//请求过程
	function ajax(obj) {
		var xhr = null;
		if (window.ActiveXObject) {//whether assisting ActiveX 
			xhr = new ActiveXObject('Microsoft.XMLHTTP')
		} else {
			xhr = new XMLHttpRequest();
		}

		//打开与服务器的连接
		if (obj.method) {//whether can sending message by this method
			xhr.open(obj.method, obj.url, true);
		} else {
			xhr.open('get', obj.url, true);
		}//setRequestHeader(属性名称，属性值) 进行跨域请求
		xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xhr.setRequestHeader("Authorization",
				"APPCODE 3e9dfb924f464e9593a95f9d2bbf4348")

		xhr.onreadystatechange = function() {

			if (xhr.readyState == 4) {
				//数据接收完毕
				if (xhr.status == 200) {
					//console.log('请求成功',xhr.responseText)
					if (obj.success) {
						obj.success(xhr.responseText)
					}

				} else {
					//console.log(xhr.status,'请求出错')
					if (obj.failure) {
						obj.failure('请求失败')
					}
				}
			}
		}                                                 //now we get object, we test object's usability
		if (obj.method == undefined || obj.method.toLowerCase() == 'get') {
			xhr.send(null);
		} else {
			xhr.send(obj.params);

		}
	}

4. success: xhr从服务器里拿output

//服务器取得数据过程
			ajax({
				url : '/rest/appleyk/question/query?question='+ input.value, //input.value是缓存; xhr取得数据的后端位置
				success : function(res) {	
					console.log(res);//当与url位置成功取得联络时，在页面上显示	
					var newLi = document.createElement('li');
					newLi.innerHTML = res;//将res嵌入开始结束标签之间的html
					newLi.className = 'msgContent left';//即设为机器人的回复
					ul.appendChild(newLi);//添加到当前页面中

					var div = document.createElement('div');
					div.style = 'clear:both';//清除浮动，使得页面上的消息正常显示
					ul.appendChild(div);
					input.value = '';
					newLi.scrollIntoView();//聊天框滑动到可见部分
				}
			})

			input.value = '';
			newLi.scrollIntoView();                     
		}

	}

今天先记录关于前后端如何通信（欢迎大佬批评指正！）。后续加载中…