[其它内容] 手把手教你用ajax搭建页面[12/10 添加演示及实例代码下载] [复制链接]
查看:13639 | 回复:19

tonycc · 发表于 2005-12-9 17:54:05

Author: tony tonyhl[at]126.com
转载请著名作者及版权
(那个什么什么狐狸的,堂而皇之的将我的一个小程序改个名字就成了自己的,实在是

)

演示: http://www.goldenleaftool.com.cn/tony/demo/ajax/reg/
实例下载: http://www.goldenleaftool.com.cn/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

<!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>
<title>注册</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="msg"></div>
ID: <input type="text" id="regid" /><br />
Password: <input type="password" id="regpassword" /><br />
<input type="submit" id="regsubmit" />
</body>
</html>

复制代码

Step3:
XmlHTTPrequest调用 javascript ajax.js

//功能: 根据浏览器调用支持的XMLHTTPREQUEST
// IE support
if (window.ActiveXObject && !window.XMLHttpRequest)
{
window.XMLHttpRequest = function()
{
var msxmls = new Array('Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP');
for (var i = 0; i < msxmls.length; i++)
{
try
{
return new ActiveXObject(msxmls[i]);
}
catch (e)
{
}
}
return null;
};
}
// Gecko support
/* ;-) */
// Opera support
if (window.opera && !window.XMLHttpRequest)
{
window.XMLHttpRequest = function()
{
this.readyState = 0; // 0=uninitialized,1=loading,2=loaded,3=interactive,4=complete
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[i].h == header)
{
ret += this._headers[i].h + ': ' + this._headers[i].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[i].h, this._headers[i].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

//获取页面指定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+'&regpassword='+GE('regpassword').value
X.send(SendData)
}
//不支持的话返回错误提示
else{
GE('msg').innerHTML='你的浏览器不支持XMLHttpRequest'
}
}

复制代码

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

<!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>
<title>注册</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="reg.js"></script>
</head>
<body>
<div id="msg"></div>
ID: <input type="text" id="regid" /><br />
Password: <input type="password" id="regpassword" /><br />
<input type="submit" id="regsubmit" onclick="Check()" />
</body>
</html>

复制代码

Step6:
构造服务器端程序 reg.asp

<%
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不就是最好的例子吗?
通彻了解一种语言,一门技术并拿来为我所用,才是我们真正应该花时间做的事情

[ 本帖最后由 tonycc 于 2005-12-10 04:03 编辑 ]

huncent · 发表于 2005-12-9 18:07:07

支持，顶一下

零维 · 发表于 2005-12-9 20:27:05

学习中

gooday · 发表于 2005-12-10 01:45:56

没调试成功

rical · 发表于 2005-12-10 10:27:39

一定要支持！

toutou · 发表于 2005-12-10 13:09:47

原帖由 gooday 于 2005-12-10 01:45 发表
没调试成功

下次详细请教

bagtiger · 发表于 2005-12-14 10:49:44

我顶，收藏+研究！

二少 · 发表于 2005-12-14 11:51:50

asynchronous好象是异步的吧

随风 · 发表于 2005-12-14 12:17:13

强烈支持这种技术贴，虽然还没完全懂。。。。。

今晚在线 · 发表于 2005-12-14 14:37:54

好文章

百独托管7500 紫田网络	超高转化播放器收cps[推荐]	速盾CDN 免实名免备防屏蔽	阿里云爆款特卖9.9元封顶	提升alexa、IP流量7Q5团队
【腾讯云】中小企福利专场	【腾讯云】多款产品1折起	高防随时退换好耶数据	小飞国外网赚带你月入万元	炎黄网络4H4G10M 99每月
香港带宽CN2/美国站群优惠	中客数据中心服务器租用	联盟系统移动广告平台中易	企业专场腾讯云服务器2.5折	九九数据工信部正规资质
腾讯云新用户大礼包代金券	高价收cpa注册量高价展示	【腾讯云】2核2G/9.93起	租服务器找45互联随时退换	阿里云短信服务验证秒达

[其它内容] 手把手教你用ajax搭建页面[12/10 添加演示及实例代码下载] [复制链接]
查看:13639 | 回复:19

落伍热心人

QQ绑定

落伍者

落伍微信绑定

落伍手机绑定

[其它内容] 手把手教你用ajax搭建页面[12/10 添加演示及实例代码下载] [复制链接] 查看:13639 | 回复:19

落伍热心人

QQ绑定

落伍者

落伍微信绑定

落伍手机绑定

[其它内容] 手把手教你用ajax搭建页面[12/10 添加演示及实例代码下载] [复制链接]
查看:13639 | 回复:19