接触AJAX

 

1<a onClick="getData(this,'A')">测试</a>

在应用页使用以下javaScript，用一个ID为DivContent的层显示结果

构建XML内容（从数据库读取记录）
 1        DataTable dt = new DataTable();
 2
 3        protected void Page_Load(object sender, EventArgs e)
 4        {
 5            string xml = string.Empty;
 6            xml = "<?xml version='1.0' encoding='UTF-8' ?><xml><Author>";
 7            if (this.Request["p"] != null)
 8            {
 9
10
11                string pinyin = Request["p"].ToString();
12
13
14
15
16                dt = Kuqu.Applications.Resources.Resources.Resource_GetRecommendSingerOrderByPinYinTopNum(27, pinyin).Tables[0];
17
18                if (dt.Rows.Count > 0)
19                {
20                    for (int i = 0; i < dt.Rows.Count; i++)
21                    {
22                        xml += @"<Table>";
23                        xml += @"<AuthorName AuthorId='" + dt.Rows[i]["AuthorId"] + "'>" + dt.Rows[i]["AuthorName"] + "</AuthorName>";
24                        //xml += @"<AuthorId>" + dt.Rows[i]["AuthorId"] + "</AuthorId>";
25                        xml += @"</Table>";
26                    }
27                }
28
29
30            }
31            xml += "</Author></xml>";
32            Response.ContentType = "text/xml";
33            Response.Write(xml);
34            Response.End();
35        }

GETSingerByPinyin.aspx内容（构建XML内容）

在应用页调用JAVASCRIPT
 1<script type="text/javascript">
 2getData(document.getElementById("spanA"),'A');
 3var theObj;
 4        function getData(myObj,pinyin)
 5        {          
 6            if(theObj!=null){theObj.style.backgroundColor="white";}
 7            myObj.style.backgroundColor="lightblue";
 8            theObj=myObj;
 9            var divContent= document.getElementById("divContent");
10
11            divContent.innerHTML="";
12            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
13
14            // 异步调用 
15            xmlhttp.onreadystatechange = function()
16            {
17                if (xmlhttp.readyState == 4)    // 调用完毕
18                {
19                    if (xmlhttp.status == 200)    // 加载成功
20                    {
21                        
22                        var xmldoc = xmlhttp.responseXML;
23                        var root = xmldoc.documentElement;
24                         
25                       //var objNodesname = xmldoc.getElementsByTagName("Author"); 
26                        var objNodesid = xmldoc.getElementsByTagName("AuthorName");
27 
28                        var theNodename;
29                        var theNodeid;
30                        
31                        for(var i=0;i<objNodesid.length;i++)
32　　                    {
33　　                        var theNode=objNodesid.item(i);
34　　                        theNodename  =theNode.text;   
35　　                        var theId= theNode.getAttribute("AuthorId");     
36　　                                                     
37　　                        divContent.innerHTML+='<A href="' + theId + '" style="margin:5px;">' + theNodename + '</A>&nbsp;&nbsp;';
38　　                                      
39                            
40　　                    }
41
42                    }
43                    else
44                    {
45                    alert("no");
46                    }
47                }
48            }        
49
50            var url =  "GetSingerByPinyin.aspx?p=" + pinyin ;
51             
52            xmlhttp.open("get", url, true);
53            xmlhttp.send();
54        }
55　　</script>