您的位置:首页 > 理论基础 > 计算机网络

XMLHttpRequest 对象的Google Suggest 式简单应用

2010-03-06 00:11 447 查看
触发:

onkeyup="getNames(this.value);


前端Js主体:

//声明对象名称
xmlhttp = false;
//定义请求路径
var requestURL = "dataFetch.aspx?term=";
function getNames(currentTerm)
{
if (currentTerm.length > 0)
{
var url = requestURL + currentTerm;
getHTTPRequestObject();//产生XMLHttpRequest一个对象实例
if(xmlhttp)
{
xmlhttp.open("GET", url, true); //异步请求
xmlhttp.onreadystatechange = callback; //异步回调处理
xmlhttp.send(null);
}
}
else
{
var findDIV = document.getElementById("divResults") //获取显示容器
findDIV.className = 'hide';
}
}

function callback(response)
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status ==200)
{
eval("var objResults = " + xmlhttp.responseText); //Json数据转换成javascript可处理的对象
var displaytext = "";
//迭代出显示内容
for (var i=0; i < objResults.Results.shops.length; i++)
{
displaytext += objResults.Results.shops[i].Name + "<br>";
}
if(displaytext.length > 0)
{
var findDIV = document.getElementById("divResults"); //寻找显示容器
findDIV.className = 'show';     //附加CSS样式
findDIV.innerHTML = displaytext; //显示结果
}

}
}
}

function getHTTPRequestObject()
{
//具体见该系列前几篇文章
}


服务器端数据返回:

//组合成Json格式数据内容
StringBuilder sb = new StringBuilder();
sb.Append("{\"Results\": { \"shops\": [");
for (int i = 0; i < dtReturn.Rows.Count; i++)
{
sb.Append("{\"Name\":\"" + (string)dtReturn.Rows[i]["Name"] + "\"}");
if (i <= (dtReturn.Rows.Count - 2))
{
sb.Append(",");
}
}
sb.Append("]}}");
Response.Write(sb.ToString());
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: