ajax模拟百度搜索

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #container
        {
            400px;
            margin:200px auto;
        }
        #txtSearch
        {
            300px;
        }

        #divwd
        {
            300px;
            border:1px solid gray;
        }

        #divwd ul
        {
            list-style-type:none;
            margin:0px;
            padding:0px;
        }
    </style>

    <script type="text/javascript">
        //eval("alert('abc')");

//        var s = "["ab","abc"]";
//        var array = eval(s);
//        alert(array[0]);

        var xmlhttp = createXHR();
        function createXHR() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }

        window.onload = function () {
            document.getElementById("txtSearch").onkeyup = function () {
                //判断有没有动态生成的div，如果有则删除
                var div = document.getElementById("divwd");
                if (div) {
                    document.getElementById("container").removeChild(div);
                }

                var wd = this.value;
                if (wd.length == 0) {
                    return;
                }

                //2 初始化
                xmlhttp.open("get", "03-baidu.ashx?wd=" + wd, true);
                //3
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4) {
                        if (xmlhttp.status == 200) {
                            //["a","ab"]
                            var s = xmlhttp.responseText;

                            //把数组样子的字符串转化成数组对象
                            var array = eval(s); //exec("")

                            //动态创建div
                            div = document.createElement("div");
                            div.id = "divwd";
                            document.getElementById("container").appendChild(div);
                            //动态创建ul
                            var ul = document.createElement("ul");
                            div.appendChild(ul);

                            //循环生成li
                            for (var i = 0; i < array.length; i++) {
                                var li = document.createElement("li");
                                li.innerHTML = array[i];
                                ul.appendChild(li);

                                li.onmouseover = function () {
                                    this.style.backgroundColor = "red";
                                }

                                li.onmouseout = function () {
                                    this.style.backgroundColor = "";
                                }
                            }
                        }
                    }
                }
                //4
                xmlhttp.send();

            };
        }

    </script>
</head>
<body>
    <div id="container">
        <input type="text" id="txtSearch" /><input type="button" value="search" id="btnSearch" />

    </div>
</body>
</html>
-----------------------------------------------------------------

请求页

<%@ WebHandler Language="C#" class="_03_baidu" %>

using System;
using System.Web;
using System.Collections.Generic;
public class _03_baidu : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";

        string wd = context.Request.QueryString["wd"];
        string s = GetWd(wd);
        context.Response.Write(s);

    }
    private string GetWd(string wd)
    {
        //所有数据
        List<string> list = new List<string>() { ""abc"", ""abb"", ""阿宝"", ""abcc式的词语"", ""阿碧"", ""abac式的"", ""acfun"", ""angelababy"", ""akb48"", ""a67"", ""apple"", ""a67手机电影mp4下载"", ""app"", ""adobe reader"", ""all star"", ""adobe flash player"" };

        wd = wd.Replace(""", "");
        //查找以wd开头的字符串
        List<string> newList = new List<string>();
        foreach (string item in list)
        {
            string ss = item.Replace(""", "");
            if (ss.Length > wd.Length)
            {

                string s = ss.Substring(0, wd.Length);
                if (s.ToLower() == wd.ToLower())
                {
                    newList.Add(item);
                }
            }
        }
        //拼成 ["a","b","c"]的样子
        string result = "[";
        foreach (string item in newList)
        {
            result = result + item + ",";
        }
        //去掉最后一个,
        result = result.TrimEnd(',');
        result += "]";
        return result;
    }
    public bool IsReusable {
        get {
            return false;
        }
    }

}