今天在学习ajax的时候,按照课本上的步骤,但是最后没有任何效果
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>search Suggest</title>
<script type="text/javascript" src="/js/ajax.js"></script>
<script type="text/javascript">
var trSrc;
//设置下拉提示框的位置
function setDivPosition() {
alert("error");
var input = document.getElementById("inputWord");
var listdiv = document.getElementById("wordsListDiv");
listdiv.style.left = (input.offsetLeft)+"px";
listdiv.style.border = "blue 1px solid";
listdiv.style.top = (input.offsetTop+input.offsetHeight)+"px";
listdiv.style.width = (input.offsetWidth)+"px";
}
function search() {
alert("search?");
var inputWord = document.getElementById("inputWord").value;
var url = "SearchSuggest";
var params = "inputWord="+inputWord;
sendRequest(url,params,"POST",display);
}
function display() {
alert("display?");
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
var xmlDoc = httpRequest.responseXML;
clearDivData();
changeDivData(xmlDoc);
}else{
alert("您请求的界面有异常!");
}
}
}
// 清除下拉框中的数据
function clearDivData(){
alert("clearDiv");
var tbody = document.getElementById("wordsListTbody");
vat trs = tbody.getElementsByTagName("tr");
for(var i=trs.length-1;i>0;i--){
tbody.removeChild(trs[i]);
}
}
// 设置用户选中条目的背景色
function setBgColor() {
if(trSrc){
trSrc.style.backgroundColor = "white";
}
trSrc = event.srcElement;
trSrc.style.backgroundColor = "gray";
}
// 将用户选中的条目显示在文本框中
function setText(){
alert("setText");
document.getElementById("inputWorld").value = trSrc.firstChild.data;
document.getElementById("wordsListDiv").style.visibility = "hidden";
}
// 实际将数据加入下拉提示框
function changeDivData(xmlDoc) {
alert("changeDiv");
var words = xmlDoc.getElementsByTagName("word");
var tbody = document.getElementById("wordsListTbody");
for(i=0;i<words.length;i++){
var newTr = document.createElement("tr");
var newCell = document.createElement("td");
var wordText = words[i].firstChild.data;
var textNode = document.createTextNode(wordText);
newCell.onmouseover = setBgColor;
newCell.onclick = setText;
newCell.appendChild(textNode);
newTr.append(newCell);
tbody.appendChild(newTr);
}
if(words.length>0){
document.getElementById("wordsListDiv").style.visibility = 'visible';
}else{
document.getElementById("wordsListDiv").style.visibility = 'hidden';
}
}
</script>
</head>
<body onload="setDivPosition()">
<p>搜索字符串:<input type="text" id="inputWord" onkeyup="search()"></p>
<div id="wordsListDiv" style="position:absolute;visibility:hidden">
<table id="worksListTable">
<tbody id="wordsListTbody"><tr><td>test</td></tr></tbody>
</table>
</div>
</body>
</html>
其中就是body标签调用的onload,然后文本框调用了onKeyUp,在两个函数里面都加了一条alert语句,然后运行的时候还是什么反应都没有,求大佬给看一下是什么原因