继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

servlet ajax 主流程解析

Curtis_yang
关注TA
已关注
手记 63
粉丝 62
获赞 1091
  1. html 页面
    1.1. 输入框
    1.2. 按钮
    1.3. 文本框事件 onkeyup=""
  2. 通过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包
  3. servlet配置
  4. Class要继承HttpServlet
  5. 没跟数据库产生交互所以将数据存放在list里面
  6. 客户端传过去的参数,跟list数据进行比对校验后,输出到客户端
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP

热门评论

<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);

}

}


查看全部评论