我们知道,传统的Web应用是request - response形式的,即浏览器向服务器发送请求,服务器进行处理,然后再对浏览器响应。
这种形式最大的缺点就是:客户端需要等服务器处理完之后,向它响应才能看到结果,在此期间,用户只能等待。
如果在网速很差的网络环境中,这是很很难忍受的。因此,AJAX技术应运而生。
AJAX允许客户端和服务器能进行异步的交互。
谈及AJAX,有个对象我们不得不提,那就是XMLHttpRequest,我们简称它为XHR。
该对象用来发起一个异步的请求。
在最老式的AJAX程序中,我们最标准的做法便是:通过JavaScript的XHR对象来发起一个异步的请求。
那么,传统的AJAX应用需要怎么做呢?
我的总结是5步法,如下:
1)创建XMLHttpRequest对象
2)注册回调函数
3)设置连接信息
4)发送数据
5)在回调函数中处理数据
下面我们来举个实际的例子,验证名字。
逻辑:名字不能为空,如果是david,则报存在,其余正确。
首先,我们建立一个aspx页面,如下:
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeBehind
=
"
simpleAjax.aspx.cs
"
Inherits
=
"
BlogNet.AJAXDemo.simpleAjax
"
%>
<!
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
runat
="server"
>
<
title
>
AJAX的简单例子
</
title
>
<
script
type
="text/javascript"
src
="../JS/simpleAjax.js"
></
script
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
Please input user name to verify:
<
br
/>
<
input
type
="text"
id
="userName"
/>
<
input
type
="button"
value
="Verify"
onclick
="verify()"
/>
<
div
id
="result"
></
div
>
</
div
>
</
form
>
</
body
>
</
html
>
然后,我们定制我们自己的处理AJAX逻辑的js文件,simpleAjax.js,如下:
var
xhr
=
null
;
var
READY_STATE_UNINTIALIZED
=
0
;
var
READY_STATE_LOADING
=
1
;
var
READY_STATE_LOADED
=
2
;
var
READY_STATE_INTERACTIVE
=
3
;
var
READY_STATE_COMPLETE
=
4
;
function
getXmlHttpRequest() {
var
req
=
null
;
if
(window.XMLHttpRequest) {
req
=
new
XMLHttpRequest();
//
Correct some browser's bugs
if
(req.overrideMimeType) {
req.overrideMimeType(
"
text/xml
"
);
}
}
else
if
(window.ActiveXObject) {
//
IE 5.5 & IE6
var
activexName
=
[
"
MSXML2.XMLHTTP
"
,
"
Microsoft.XMLHTTP
"
];
for
(
var
i
=
0
; i
<
activexName.length; i
++
) {
try
{
req
=
new
ActiveXObject(activexName[i]);
break
;
}
catch
(e) {
}
}
}
return
req;
}
function
verify() {
//
*** 1. Create XMLHttpRequest Object ***
xhr
=
getXmlHttpRequest();
if
(
!
xhr) {
alert(
"
Creating XMLHttpRequest Object Failed!!
"
);
return
;
}
else
{
//
alert(xmlhttp.readyState);
}
//
*** 2. Register Callback Function ***
xhr.onreadystatechange
=
callback;
//
*** 3. Set Connection Information ************
//
*** 1st param: http request type: get/post
//
*** 2nd param: url
//
*** 3rd param: true - asynchronoous
//
**********************************************
var
userName
=
document.getElementById(
"
userName
"
).value;
var
url
=
"
simpleServer.ashx?name=
"
+
userName;
xhr.open(
"
GET
"
,url,
true
);
//
*** 4. Send Data ***
xhr.send(
null
);
}
//
Callback Function
function
callback() {
//
*** 5. Receive Response Data ***
if
(xhr.readyState
==
READY_STATE_COMPLETE) {
//
Judge Successful
if
(xhr.status
==
200
) {
//
Get Data Back From Server
var
responseText
=
xhr.responseText;
//
Show Data On Page
var
divNode
=
document.getElementById(
"
result
"
);
divNode.innerHTML
=
responseText;
}
else
{
alert(
"
AJAX Error!
"
);
}
}
}
接下来,便是服务端处理逻辑,以前ASP时候便是写在asp文件中,但是在ASP.NET中,如果你使用了aspx文件,
界面默认的HTML的UI会干扰我们的返回数据,导致结果不正确。因此,我们需要的是一个没有UI的服务端处理,
在ASP.NET中唯有HttpHandler才能胜任,其实学过J2EE的朋友一定知道,HttpHandler相当于J2EE中的Servlet。
下面我们建立一个ashx文件用以处理请求逻辑,如下:
using
System;
using
System.Web;
namespace
BlogNet.AJAXDemo
{
public
class
simpleServer : IHttpHandler
{
public
void
ProcessRequest(HttpContext context)
{
context.Response.ContentType
=
"
text/plain
"
;
string
name
=
context.Request[
"
name
"
].ToString();
if
(name
==
""
)
{
context.Response.Write(
"
姓名不能为空!
"
);
}
else
if
(name
==
"
david
"
)
{
context.Response.Write(
"
该姓名已存在!
"
);
}
else
{
context.Response.Write(
"
恭喜:合法用户.
"
);
}
}
public
bool
IsReusable
{
get
{
return
false
;
}
}
}
}
至此,整个逻辑就已经全部完成了!
转载于:https://www.cnblogs.com/davidgu/archive/2009/07/06/1517204.html
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)