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