87,910
社区成员
发帖
与我相关
我的任务
分享
<script type="text/javascript">
function getMoreContents() {
var xmlHttp;
//获取用户输入的内容
var content = document.getElementById("keyword");
if (content.value == "") {
return;
}
//要把输入的内容发送给服务器,因为采用ajax异步发送数据,要使用一个对象,定义为全局变量 xmlHttp
xmlHttp = createXMLHttp();
//要想服务器发送内容
var url = "search?keyword=" + escape(content.value);
//true:解释 表示 javascript 脚本在send()方法之后继续执行,而不会等待服务器的响应
xmlHttp.open("GET", url, true);
//xmlHttp绑定回调函数 ,这个回调函数方法会在xmlHttp的状态改变的时候才被调用;
//状态有0-4 只关注4(complete)这个状态
//当数据传输的过程完成后再调用回调函数才有意义
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
//获取xmlHttp对象
function createXMLHttp () {
var xmlHttp;
//大多浏览器都适用
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
//要考虑浏览器的兼容性
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlHttp) {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
function callback() {
//4 代表完成
if (xmlHttp.readyState == 4) {
//200 代表服务器响应的状态成功
//404 代表资源未找到,500代表服务器内部错误;
if (xmlHttp.status == 200) {
//交互成功,获得相应的文本格式
var result = xmlHttp.responseText;
//解析数据
var json = eval("(" + result + ")");
//获得的数据之后,就可以动态的显示这些数据了,把这些数据展示到
//输入框的下面
alert(json);
}
}
}
//设置关联数据的展示,参数是服务器传递过来的数据+*
function setContent(contents) {
//首先获的关联的数据的长度,以确定生产多少<tr><tr/>
var size = contents.length;
//设置内容
for ( var i = 0; i < size; i++) {
//代表json 格式数据的第一个元素
var nextNode = contents[i];
var tr = document.creatElement("tr");
var td = document.creatElement("td");
td.setAttribute("border", "0");
td.setAttribute("bgColor", "#FFFAFA");
//当鼠标 滑过,《td》 获得焦点,和失去焦点的时候的样式
td.onmouseover = function() {
this.className = 'mouseOver';
};
td.onmouseout = function() {
this.className = 'mouseOut';
};
//该方法实现 当鼠标选中该关联数据,该关联数据显示到搜索输入框内
td.onclik = function() {
//暂放
};
//内容展示
var text = document.creatElement(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}