梦想家asp服务器

Author: tony tonyhl[at]126.com

转载请著名作者及版权

(那个什么什么狐狸的,堂而皇之的将我的一个小程序改个名字就成了自己的,实在是)

演示: /tony/demo/ajax/reg/

实例下载: /tony/demo/ajax/reg/reg.rar

上次随手写了个结合ajax的alexa查询

很多落伍的朋友PM我怎样使用ajax搭建无刷新页面,很不好意思,直到今天才有空写一些我使用ajax的心得

一.什么是ajax? (我说了N次,不是那个阿贾克斯足球俱乐部)

本人表达能力有限,大家可以自己google一下,在这里我只说下ajax的概况

ajax = asynchronous + javascript + xml = 同步传输数据 + javascrip处理返回XML数据

实际上,几年前ajax这个技术就应用于互联网上,但因思维的禁锢,一直在ajax的"X", 即处理返回XML数据上打转.

只至伟大的梦想家GOOGLE将其应用于GMAIL及GMAP上,告知世人AJAX也可以玩的这么COOL, 这种老技术才被大家重新所重视.

二.为什么要用ajax

富客户端已经成为网站以及基于网站的程序发展的必然(什么是富客户端?自己google),要构建一个富客户端的程序,必须满足以下条件:

1. 用户定制服务(实例: www.live.com)

2.无需等待(实例:Gmail)

3.桌面化界面(实例:www.backbase.com)

OK,再来讲讲ajax能实现的功能:

1.采用XMLHttpRequest实现后台数据提交,客户端无刷新(此功能满足富客户端要求2)

2.返回数据能完美与CSS结合,实现丰富界面(此功能满足富客户端要求3)

3.采用javascript脚本实时控制当前浏览界面(此功能满足富客户端要求1)

4.兼容绝大部分浏览器,只要你的浏览器支持JAVASCRIP,支持XMLHttpRequest

5.丰富的自定义扩展(请允许我叫他API吧),能用于FLASH,能用于ASP,能用于PHP.能用于......

综上,ajax的使用无疑能大大完善客户端与服务器端的交流与沟通,较完美处理客户端指令,试想,当你跟客户沟通已经达致完美,还有什么生意谈不成呢?

三. ajax原理

请允许我采用这张已经广为流传的图片作为ajax原理的展示,虽然他还不够完全表达,但已经是目前最直观最完美的展示了<附件>

四.实例告诉你怎么用ajax

精彩部分开始了!

实例1: 注册模块

假如我要构造一个会员注册页面,传统的方法是客户端填写注册内容,然后交给服务器端处理,然后返回注册结果

假设我注册一个ID为 tony的会员,而数据库中已经存在这个ID,整个流程将是这样的:

1. 客户填写注册表单(当然,你可以加入javascript已检测客户端填写表单是否正确),并表明要求注册的ID为tony

2.发送表单至处理页面(客户端刷新一次,并等待)

3.服务器端处理表单,检测tony这一ID已经注册,返回"ID已注册信息"(视程序而定,客户端刷新一次或不刷新)

4.重新跳转至注册页面(客户端再刷新一次)

OMG, 这最少要刷新2次,还得要我等上半分钟,如果不是很重要,我情愿不注册了!

不刷新? 不等待? 让ajax来帮你吧

Step1:

已存在数据库

会员表单 member

列

ID 登陆ID

Password 登陆密码

其中已经有一行 ID为 tony 的数据

Step2:

构造注册表单 reg.html

CODE:[Copy to clipboard]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "plete

this.status = 0; // HTTP status codes

this.statusText = '';

this._headers = [];

this._aborted = false;

this._async = true;

this._defaultCharset = 'ISO-8859-1';

this._getCharset = function()

{

var charset = _defaultCharset;

var contentType = this.getResponseHeader('Content-type').toUpperCase();

val = contentType.indexOf('CHARSET=');

if (val != -1)

{

charset = contentType.substring(val);

}

val = charset.indexOf(';');

if (val != -1)

{

charset = charset.substring(0, val);

}

val = charset.indexOf(',');

if (val != -1)

{

charset = charset.substring(0, val);

}

return charset;

};

this.abort = function()

{

this._aborted = true;

};

this.getAllResponseHeaders = function()

{

return this.getAllResponseHeader('*');

};

this.getAllResponseHeader = function(header)

{

var ret = '';

for (var i = 0; i < this._headers.length; i++)

{

if (header == '*' || this._headers.h == header)

{

ret += this._headers.h + ': ' + this._headers.v + '\n';

}

return ret;

};

this.getResponseHeader = function(header)

{

var ret = getAllResponseHeader(header);

var i = ret.indexOf('\n');

if (i != -1)

{

ret = ret.substring(0, i);

}

return ret;

};

this.setRequestHeader = function(header, value)

{

this._headers[this._headers.length] = {h:header, v:value};

};

this.open = function(method, url, async, user, password)

{

this.method = method;

this.url = url;

this._async = true;

this._aborted = false;

this._headers = [];

if (arguments.length >= 3)

{

this._async = async;

}

if (arguments.length > 3)

{

opera.postError('XMLHttpRequest.open() - user/password not supported');

}

this.readyState = 1;

if (this.onreadystatechange)

{

this.onreadystatechange();

}

};

this.send = function(data)

{

if (!navigator.javaEnabled())

{

alert("XMLHttpRequest.send() - Java must be installed and enabled.");

return;

}

if (this._async)

{

setTimeout(this._sendasync, 0, this, data);

}

else

{

this._sendsync(data);

}

};

this._sendasync = function(req, data)

{

if (!req._aborted)

{

req._sendsync(data);

}

};

this._sendsync = function(data)

{

this.readyState = 2;

if (this.onreadystatechange)

{

this.onreadystatechange();

}

var url = new java.net.URL(new java.net.URL(window.location.href), this.url);

var conn = url.openConnection();

for (var i = 0; i < this._headers.length; i++)

{

conn.setRequestProperty(this._headers.h, this._headers.v);

}

this._headers = [];

if (this.method == 'POST')

{

// POST data

conn.setDoOutput(true);

var wr = new java.io.OutputStreamWriter(conn.getOutputStream(), this._getCharset());

wr.write(data);

wr.flush();

wr.close();

}

// read response headers

// NOTE: the getHeaderField() methods always return nulls for me :(

var gotContentEncoding = false;

var gotContentLength = false;

var gotContentType = false;

var gotDate = false;

var gotExpiration = false;

var gotLastModified = false;

for (var i = 0; ; i++)

{

var hdrName = conn.getHeaderFieldKey(i);

var hdrValue = conn.getHeaderField(i);

if (hdrName == null && hdrValue == null)

{

break;

}

if (hdrName != null)

{

this._headers[this._headers.length] = {h:hdrName, v:hdrValue};

switch (hdrName.toLowerCase())

{

case 'content-encoding': gotContentEncoding = true; break;

case 'content-length' : gotContentLength = true; break;

case 'content-type' : gotContentType = true; break;

case 'date' : gotDate = true; break;

case 'expires' : gotExpiration = true; break;

case 'last-modified' : gotLastModified = true; break;

}

// try to fill in any missing header information

var val;

val = conn.getContentEncoding();

if (val != null && !gotContentEncoding) this._headers[this._headers.length] = {h:'Content-encoding', v:val};

val = conn.getContentLength();

if (val != -1 && !gotContentLength) this._headers[this._headers.length] = {h:'Content-length', v:val};

val = conn.getContentType();

if (val != null && !gotContentType) this._headers[this._headers.length] = {h:'Content-type', v:val};

val = conn.getDate();

if (val != 0 && !gotDate) this._headers[this._headers.length] = {h:'Date', v:(new Date(val)).toUTCString()};

val = conn.getExpiration();

if (val != 0 && !gotExpiration) this._headers[this._headers.length] = {h:'Expires', v:(new Date(val)).toUTCString()};

val = conn.getLastModified();

if (val != 0 && !gotLastModified) this._headers[this._headers.length] = {h:'Last-modified', v:(new Date(val)).toUTCString()};

// read response data

var reqdata = '';

var stream = conn.getInputStream();

if (stream)

{

var reader = new java.io.BufferedReader(new java.io.InputStreamReader(stream, this._getCharset()));

var line;

while ((line = reader.readLine()) != null)

{

if (this.readyState == 2)

{

this.readyState = 3;

if (this.onreadystatechange)

{

this.onreadystatechange();

}

reqdata += line + '\n';

}

reader.close();

this.status = 200;

this.statusText = 'OK';

this.responseText = reqdata;

this.readyState = 4;

if (this.onreadystatechange)

{

this.onreadystatechange();

}

if (this.onload)

{

this.onload();

}

else

{

// error

this.status = 404;

this.statusText = 'Not Found';

this.responseText = '';

this.readyState = 4;

if (this.onreadystatechange)

{

this.onreadystatechange();

}

if (this.onerror)

{

this.onerror();

}

};

}

// ActiveXObject emulation

if (!window.ActiveXObject && window.XMLHttpRequest)

{

window.ActiveXObject = function(type)

{

switch (type.toLowerCase())

{

case 'microsoft.xmlhttp':

case 'msxml2.xmlhttp':

case 'msxml2.xmlhttp.3.0':

case 'msxml2.xmlhttp.4.0':

case 'msxml2.xmlhttp.5.0':

return new XMLHttpRequest();

}

return null;

};

}

//上述代码也是网上广为流传的,请允许我调用,虽然我不知道原作者是谁:P

Step4:

构造表单处理及提交javascript脚本 reg.js

CODE:[Copy to clipboard]//获取页面指定ID公用函数

function GE(a){return document.getElementById(a);}

//表单检测

function Check(){

//检测ID是否为空

if(GE('regid').value==''){GE('msg').innerHTML='ID不能为空';return false}

//检测PASSWORD是否为空

if(GE('regpassword').value==''){GE('msg').innerHTML='password 不能为空';return false}

//检测OK后提交数据

//建立XMLHttpRequest对象

var X=new XMLHttpRequest();

//检测浏览器是否支持XMLHttpRequest

if(X){

//禁止客户端再次提交表单

GE('regsubmit').disabled=true;

//onreadystatechange为XMLHttpRequest的状态改变的事件触发器

X.onreadystatechange=function(){

//readyState 对象状态

//0 = 未初始化

//1 = 读取中

//2 = 已读取

//3 = 交互中

//4 = 完成

if(X.readyState==4){

//交互完成的处理

//status,服务器返回的状态码, 200为成功

if(X.status==200){

//运行服务器返回的脚本

eval(X.responseText)

}

//服务器端程序运行失败,返回错误代码

else{GE('msg').innerHTML=X.statusText}

}

};

//获取服务器端数据

//open("method","URL"[,asyncFlag])

//请求的目标 URL, 方法

//采用POST为提交数据

//采用true为异步传输, false为同步传输

X.open('POST','reg.asp',true);

X.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

var SendData = 'regid='+GE('regid').value+'?password='+GE('regpassword').value

X.send(SendData)

}

//不支持的话返回错误提示

else{

GE('msg').innerHTML='你的浏览器不支持XMLHttpRequest'

}

Step5:

OK,客户端页面全部完成, 重新调整下reg.html

CODE:[Copy to clipboard]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

ID: <input type="text" id="regid" /><br />

Password: <input type="password" id="regpassword" /><br />

</body>

</html>

Step6:

构造服务器端程序 reg.asp

CODE:[Copy to clipboard]<%

dim regid, regpassword, str

regid=Request.Form("regid")

regpassword=Request.Form("regpassword")

if regid="" or regpassword="" then

str = "ID和PASSWORD必须填写"

else

'查询数据库是否存在该ID

'代码略

if rs.EOF then

'不存在则添加数据

'代码略

str = "注册成功,ID为" & regid & " , 密码为" & regpassword

else

str = "注册失败,ID已经存在"

end if

Set rs = nothing

End if

Response.Write "GE('msg').innerHTML='" & str & "';GE('regsubmit').disabled=false"

Response.End

至此,一个简单的注册页面已经打造成功. 当然,你可以添加更多的代码(比如添加表单内容,扩充表单检测脚本,提高后台程序安全性等)以提高程序实用性

上述代码及实例实现了一个简单的ajax过程.

或许,这不能叫ajax,只能叫aja, 因为它没有实现xml数据处理. 但是,能实现ajax的特色功能,能使客户端更满意,更人性化,这样用法又何尝不可? Google不就是这么用的吗

后续:

这篇文章只是介绍了ajax这个古老而新潮的技术的一点皮毛.更多的认识和运用,还需要自己在编写程序中不断去学习和体会. 下次有时间,我会再写一篇较复杂,涉及到xml数据处理的关于ajax应用的文章跟大家分享

P.S.

所谓的语言,所谓的技术,不过是我们用来实现程序功能,改善程序性能和实用性的工具.

所以,频繁的谈论甚至争论哪种语言,哪种技术更好,更新是很肤浅的一件事情. AJAX不就是最好的例子吗?

通彻了解一种语言,一门技术并拿来为我所用,才是我们真正应该花时间做的事情

标签: ajax