Ajax实现局部刷新

[html] view plain copy

1. <span style="font-size:18px;color:#ff6666;">Ajax实现局部刷新</span>  
2.   
3.     <span style="font-size:16px;"><script type="text/javascript">  
4.     var xmlhttp;  
5.     function getData()  
6.     {  
7.       //获取用户填写的名称  
8.       var city=document.getElementByIdx("txt").value;  
9.       //创建异步调用对象  
10.       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
11.       //将对象状态与事件相关联  
12.       xmlhttp.onreadystatechange=statechange;  
13.       //加载要链接的页面  
14.       xmlhttp.Open("POST","datapage.aspx?city=" +city,true);  
15.       //发送请求  
16.       xmlhttp.Send();  
17.     }  
18.     function statechange()  
19.     {  
20.       //判断异步调用是否已经完成  
21.       if(xmlhttp.readystate==4)  
22.       {  
23.         //判断完成的提示代码是否是OK状态  
24.         if(xmlhttp.status==200)  
25.         {  
26.            //将返回数据作为参数，传递给填充方法  
27.            FillData(xmlhttp.responseText);  
28.         }  
29.       }  
30.     }  
31.     function FillData(strcity)  
32.     {  
33.        document.getElementByIdx("DropDownList1").options.length=0;  
34.        var indexofcity;  
35.        var city;  
36.        //切割传递来的字符串  
37.        while(strcity.length>0)  
38.        {  
39.        //判断是否是最后一个字符串  
40.         indexofcity=strcity.indexOf(",");  
41.         if(indexofcity >0)  
42.         {  
43.         city=strcity.substring(0,indexofcity);  
44.         strcity=strcity.substring(indexofcity+1);  
45.         //填充下拉框  
46.         document.getElementByIdx("DropDownList1").add(new Option(city,city));  
47.         }  
48.         else  
49.         {  
50.         // 如果是最后一个字符串  
51.            lastcity=strcity.substring(0,2);  
52.            document.getElementByIdx("DropDownList1").add(new Option(lastcity,lastcity));  
53.            break;  
54.         }  
55.        };  
56.     }  
57.     </script>  
58.   
59. 第二个页面  
60. protected void Page_Load(object sender, EventArgs e)  
61.     {  
62.         //获取传递过来的参数  
63.         string city =Request.QueryString["city"];  
64.         Response.Clear();  
65.         //判断城市名  
66.         switch (city)  
67.         {  
68.             case "beijing":  
69.                 //填充相关的区域  
70.                 Response.Write("朝阳,海淀,东城,西城");  
71.                 break;  
72.             case "shanghai":  
73.                 Response.Write("浦东,静安,虹口,徐汇");  
74.                 break;  
75.             case "jinan":  
76.                 Response.Write("历下,历城,市中,天桥");  
77.                 break;  
78.         }  
79.     }  
80.   
81. </span>   
82.   
83. -------------------------------------------------------------------------------  
84.   
85. <span style="font-size:18px;color:#ff6666;">使用回调技术实现局部刷新</span>  
86.  <span style="font-size:16px;"><script type="text/javascript">  
87.         function FillData()  
88.         {  
89.            var city=document.getElementByIdx("TextBox1").value;  
90.        
91.             <% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null)  %>;  
92.         }  
93.         function FillDll(strcity)  
94.         {  
95.            document.getElementByIdx("DropDownList1").options.length=0;  
96.            var indexofcity;  
97.            var city;  
98.            //切割传递来的字符串  
99.            while(strcity.length>0)  
100.            {  
101.            //判断是否是最后一个字符串  
102.             indexofcity=strcity.indexOf(",");  
103.             if(indexofcity >0)  
104.             {  
105.             city=strcity.substring(0,indexofcity);  
106.             strcity=strcity.substring(indexofcity+1);  
107.             //填充下拉框  
108.             document.getElementByIdx("DropDownList1").add(new Option(city,city));  
109.             }  
110.             else  
111.             {  
112.             // 如果是最后一个字符串  
113.                document.getElementByIdx("DropDownList1").add(new Option(strcity,strcity));  
114.                break;  
115.             }  
116.            };  
117.         }  
118.     </script>  
119.   
120.   
121.     private string _data;  
122.     public string GetCallbackResult()  
123.     {  
124.         //返回处理后的数据  
125.         return _data;  
126.     }  
127.   
128.     public void RaiseCallbackEvent(string eventArgument)  
129.     {  
130.         //判断传递过来的参数  
131.         switch (eventArgument)  
132.         {  
133.             case "北京":  
134.                 _data = "朝阳,海淀,东城,西城";  
135.                 break;  
136.             case "上海":  
137.                 _data = "浦东,静安,徐汇,虹口";  
138.                 break;  
139.             case "济南":  
140.                 _data = "历城,历下,市中,天桥";  
141.                 break;  
142.         }  
143.     }  
144.   
145.   
146. </span>-------------------------------------------------------------------------------------  
147.   
148. <span style="font-size:18px;color:#ff6666;">Iframe实现局部刷新</span>  
149.     <span style="font-size:16px;"><script language="javascript">  
150.        function Search()  
151.        {  
152.             var city=document.getElementByIdx("TextBox1").value;  
153.             if(city !="")  
154.             {  
155.                document.getElementByIdx("iframe1").src="myframe.aspx?city=" +city;  
156.             }  
157.        }  
158.     </script>  
159.  <iframe src="myframe.aspx" style="TEXT-ALIGN: center" id="iframe1" width="100%" height="100%"  frameborder="0" scrolling="no"/>  
160.   
161. 第二页面myframe.aspx  
162.   
163.     <div style="TEXT-ALIGN: center">  
164.         <asp:DropDownList ID="DropDownList1" runat="server" Width="154px">  
165.         </asp:DropDownList></div>  
166.  protected void Page_Load(object sender, EventArgs e)  
167.     {  
168.         //获取传递过来的参数  
169.         string city = Request.QueryString["city"];  
170.         //判断城市名  
171.         switch (city)  
172.         {  
173.             case "北京":  
174.                 //填充相关的区域  
175.                 DropDownList1.Items.Clear();  
176.                 DropDownList1.Items.Add("朝阳");  
177.                 DropDownList1.Items.Add("海淀");  
178.                 DropDownList1.Items.Add("东城");  
179.                 DropDownList1.Items.Add("西城");  
180.                 break;  
181.             case "上海":  
182.                 DropDownList1.Items.Clear();  
183.                 DropDownList1.Items.Add("浦东");  
184.                 DropDownList1.Items.Add("静安");  
185.                 DropDownList1.Items.Add("虹口");  
186.                 DropDownList1.Items.Add("徐汇");  
187.                 break;  
188.             case "济南":  
189.                 DropDownList1.Items.Clear();  
190.                 DropDownList1.Items.Add("历下");  
191.                 DropDownList1.Items.Add("历城");  
192.                 DropDownList1.Items.Add("市中");  
193.                 DropDownList1.Items.Add("天桥");  
194.                 break;  
195.         }  
196.     }  
197.   
198.   
199. ---------------------------------------------------------------------------------  
200.   
201. <span style="color:#ff6666;">使用脚本方法实现局部刷新</span>  
202.         <script   type="text/javascript">  
203.         function FillData(strcity)  
204.         {  
205.            document.getElementByIdx("DropDownList1").options.length=0;  
206.            var indexofcity;  
207.            var city;  
208.            //切割传递来的字符串  
209.            while(strcity.length>0)  
210.            {  
211.            //判断是否是最后一个字符串  
212.             indexofcity=strcity.indexOf(",");  
213.             if(indexofcity >0)  
214.             {  
215.             city=strcity.substring(0,indexofcity);  
216.             strcity=strcity.substring(indexofcity+1);  
217.             //填充下拉框  
218.             document.getElementByIdx("DropDownList1").add(new Option(city,city));  
219.             }  
220.             else  
221.             {  
222.             // 如果是最后一个字符串  
223.                document.getElementByIdx("DropDownList1").add(new Option(strcity,strcity));  
224.                break;  
225.             }  
226.            };  
227.         }  
228.     </script>  
229.   
230.    
231.   
232. using System.Text;  
233. protected void Page_Load(object sender, EventArgs e)  
234.     {  
235.         //创建字符串连接对象  
236.         StringBuilder myscript = new StringBuilder();  
237.         //使用字符串组织一个JavaScript脚本方法  
238.         myscript.Append("function seekCity()    {\n");  
239.         myscript.Append("var city=document.getElementByIdx('TextBox1').value; \n");  
240.         myscript.Append("switch(city)       {\n");  
241.         myscript.Append("case '北京': \n");  
242.         myscript.Append("FillData('" + GetCityStr("北京") +"'); \n");  
243.         myscript.Append("break; \n");  
244.         myscript.Append("case '上海': \n");  
245.         myscript.Append("FillData('" + GetCityStr("上海") + "'); \n");  
246.         myscript.Append("break; \n");  
247.         myscript.Append("case '济南': \n");  
248.         myscript.Append("FillData('" + GetCityStr("济南") + "'); \n");  
249.         myscript.Append("break; }\n");  
250.         myscript.Append(" }\n");  
251.         //使用注册脚本方法在页面的客户端，注册这个字符串编写的脚本方法。  
252.         Page.ClientScript.RegisterClientScriptBlock(typeof(string), "seekCity", myscript.ToString(),true);  
253.   
254.     }  
255.     //通过获取城市名，返回城市的区县字符串  
256.     private string GetCityStr(string INcity)  
257.     {  
258.         string city="";  
259.         switch (INcity)  
260.         {  
261.             case "北京":  
262.                 city = "朝阳,海淀,东城,西城";  
263.                 break;  
264.             case "上海":  
265.                 city = "浦东,静安,徐汇,虹口";  
266.                 break;  
267.             case "济南":  
268.                 city = "历城,历下,市中,天桥";  
269.                 break;  
270.         }  
271.         //返回包含区县的 字符串连接  
272.         return city;  
273.     }  
274. </span>