XMLHttpRequest 对象的Google Suggest 式简单应用

触发：

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