Ajax 技术三种实现方式之xmlhttp+webform篇 (二)

View Code
01.一、 最传统的方式:XmlHttp+Web Form
02.
03.应用举例:
04.
05.1、Ajax.js(这部分三种方式共用)
06.
07.function newXmlHttpRequest()
08.
09.{
10.
11. var xmlreq=false;
12.
13. if(window.XMLHttpRequest)
14.
15. {
16.
17. xmlreq=new XMLHttpRequest();
18.
19. }
20.
21. else if(window.ActiveXObject)
22.
23. {
24.
25. try
26.
27. {
28.
29. xmlreq=new ActiveXObject("Msxml2.XMLHTTP");
30.
31. }
32.
33. catch(e)
34.
35. {
36.
37. try
38.
39. {
40.
41. xmlreq=new ActiveXObject("Microsoft.XMLHTTP");
42.
43. }
44.
45. catch(e)
46.
47. { }
48.
49. }
50.
51. }
52.
53. return xmlreq;
54.
55.}
56.
57.
58.
59.function callTheServer(url)
60.
61.{
62.
63. var req=newXmlHttpRequest();
64.
65. var callbackhandler=getReadyStateHandler(req);
66.
67. req.onreadystatechange=callbackhandler;
68.
69.// req.open("POST",url,false);
70.
71. req.open("POST",url,true);
72.
73. req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
74.
75. var sendmsg=document.getElementById("txtMsg").value;
76.
77. req.send("msg="+sendmsg);
78.
79.
80.
81.// var showmsg = document.getElementById("showmsg");
82.
83.// showmsg.innerHTML = req.responseText;//服务器返回的信息显示在页面上
84.
85.
86.
87.}
88.
89.
90.
91.function getReadyStateHandler(req)
92.
93.{
94.
95. return function()
96.
97. {
98.
99. if (req.readyState == 4)
100.
101. {//已经加载
102.
103. if (req.status == 200)
104.
105. {//返回成功
106.
107. var showmsg = document.getElementById("showmsg");
108.
109. showmsg.innerHTML = req.responseText;//服务器返回的信息显示在页面上
110.
111. }
112.
113. else
114.
115. {//出现错误,显示错误状态
116.
117. var showmsg = document.getElementById("showmsg");
118.
119. showmsg.innerHTML = "ERROR: "+ req.status;
120.
121. }
122.
123. }
124.
125. }
126.
127.}
128.
129.2、XmlhttpWebForm.aspx表单
130.
131.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XmlhttpWebForm.aspx.cs" Inherits="AJAX.XmlhttpWebForm" %>
132.
133.
134.
135.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
136.
137.
138.
139.<html xmlns="http://www.w3.org/1999/xhtml" >
140.
141.<head runat="server">
142.
143. <title>xmlhttp+webform</title>
144.
145. <mce:script src="ajax.js" mce_src="ajax.js" type="text/javascript"></mce:script>
146.
147.</head>
148.
149.<body>
150.
151. <form id="form1" runat="server">
152.
153. <div>
154.
155.
156.
157. <input id="txtMsg" type="text" value="hello,world!"/><input id="Button1" type="button"
158.
159. value="提交给Ajax页面处理" onclick="callTheServer('Ajax.aspx')" /><br />
160.
161. <br />
162.
163. <br />
164.
165. <br />
166.
167. 服务器返回的信息如下:
168.
169. <div id="showmsg" style="background-color:Yellow" mce_style="background-color:Yellow">
170.
171.
172.
173. </div>
174.
175.
176.
177. </div>
178.
179.
180.
181. </form>
182.
183.<p>
184.
185. </p>
186.
187.</body>
188.
189.</html>
190.
191.3、Ajax.aspx.cs
192.
193.public partial class Ajax : System.Web.UI.Page
194.
195. {
196.
197. protected void Page_Load(object sender, EventArgs e)
198.
199. {
200.
201. StringBuilder str = new StringBuilder();
202.
203. str.Append("服务器ajax.aspx得到了您输入的信息:" + Request["msg"].ToString() + "<br/>您的IP地址是:");
204.
205. str.Append( Request.UserHostAddress);
206.
207. str.Append("<br/>当前服务器的时间:");
208.
209. str.Append(DateTime.Now.ToLocalTime());
210.
211. Response.Write(str.ToString());
212.
213. Response.End();
214.
215. }
216.
217. }


本文来自CSDN博客,转载请标明出处:http:
//blog.csdn.net/liaolian9948/archive/2010/05/12/5581015.aspx
原文地址:https://www.cnblogs.com/mahaisong/p/2016953.html