- html 页面
1.1. 输入框
1.2. 按钮
1.3. 文本框事件 onkeyup="" - 通过javascript 中的function 想服务器端发送请求
2.0. 获取文本框里面的值,找到节点,通过属性
2.1. XMLHttpRequest对象
2.2. 要是用js写要考虑浏览器兼容性问题
2.3. 确认请求方式:GET还是POST
2.4. 请求的地址,请求的参数,第三个参数true
2.5. 回调函数
2.5.1. onreadystatechange
2.5.2. readyState 4表示完成
2.5.3. status 200表示服务器响应成功
2.6. send()
2.7. 在回调函数里面对服务器端返回的数据进行解析json格式的,要导入json相关的jar包 - servlet配置
- Class要继承HttpServlet
- 没跟数据库产生交互所以将数据存放在list里面
- 客户端传过去的参数,跟list数据进行比对校验后,输出到客户端
热门评论
<servlet>
<servlet-name>searchAndReturnData</servlet-name>
<servlet-class>com.curtis.SearchAndReturnData</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>searchAndReturnData</servlet-name>
<url-pattern>/search</url-pattern>
</servlet-mapping>
function clearContent() {
var contentTableBody = document.getElementById("content_table_body");
var size = contentTableBody.childNodes.length;
for (var i = size - 1; i >= 0; i--) {
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
document.getElementById("popDiv").style.border = "none";
}
// 当鼠标
function keywordBlur() {
clearContent();
}
function setLocation() {
var content = document.getElementById("input_msg");
var width = content.offsetWidth;
var left = content["offsetLeft"];
var top = content["offsetTop"] + content.offsetHeight;
var popDiv = document.getElementById("popDiv");
popDiv.style.left = left + "px";
popDiv.style.top = top + "px";
popDiv.style.width = width + "px";
document.getElementById("content_table").style.width = width + "px";
}
function setContent(contents) {
clearContent();// 每次检索之前先清空之前输入项显示的内容
setLocation();// 设置显示的位置
var size = contents.length;
for (var i = 0; i < size; i++) {
var nextNode = contents[i];
var tr = document.createElement("tr");
var td = document.createElement("td");
td.setAttribute("border", "0");
td.setAttribute("bgcolor", "#FFFAFA");
td.onmouseover = function() {
this.className = "mouseOver";
};
td.onmouseout = function() {
this.className = "mouserOut";
};
td.onclick = function() {
};
var text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}