本文介绍了 Ajax Blog 项目中使用的核心 JavaScript 函数库。重点解析了自定义 AJAX 类的实现,包括 XMLHttpRequest 的跨浏览器兼容处理、POST/GET 请求封装及回调机制。同时详细说明了博客前端交互功能,如侧栏切换、评论管理、日志加载及留言提交等模块的代码逻辑与应用方式。
AJAX 类封装与实现
代码示例如下:
/*类名:AJAX
实例化方式:var ajaxobj=new AJAX;,若实例化失败则返回false
属性:method - 指定请求方法,字符串类型,支持POST或GET,默认值为POST
属性:url - 指定请求URL,字符串类型,默认值为空字符串
属性:async - 控制异步行为,true表示异步,false表示同步,默认值为true
属性:content - 指定请求主体内容,当请求方法为POST时必须设置此属性,默认值为空
属性:backtext - 控制返回数据类型,默认为true,此时返回XMLHttp.responseText;若为false则返回XMLHttp.responseXML
属性:gettext - 用于获取最终返回值
属性:callback - 定义响应完成时的回调函数,默认行为为直接返回。回调函数接收一个参数即XMLHttpRequest对象,定义示例:function mycallback(xmlobj)
方法:send() - 用于发送HTTP请求,无参数
*/
function AJAX() {
var XMLHttp = false;
var ObjSelf;
ObjSelf=this;
try { XMLHttp=new XMLHttpRequest; }
catch(e) {
try { XMLHttp=new ActiveXObject("MSXML2.XMLHttp"); }
catch(e2) {
try { XMLHttp=new ActiveXObject("Microsoft.XMLHttp"); }
catch(e3) { XMLHttp=false; }
}
}
if (!XMLHttp) return false;
this.method="POST";
this.url=""
this.url += (this.url.indexOf("?") >= 0) ? "&nowtime=" + new Date().getTime():"?nowtime=" + new Date().getTime();
this.async=true;
this.data="";
ObjSelf.loadid=""
this.backtext=true
this.callback=function() {return;}
this.send=function() {
if(!this.method||!this.url||!this.async) return false;
XMLHttp.open (this.method, this.url, this.async);
if(this.method=="POST"){
XMLHttp.setRequestHeader("Content-Length",(this.data).length);
XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
XMLHttp.onreadystatechange=function() {
if(XMLHttp.readyState==4) {
//alert(ObjSelf.loadid);
if (ObjSelf.loadid!="") $CS(ObjSelf.loadid,"none");
//window.status="";
if(XMLHttp.status==200) {
ObjSelf.callback();
}
}
else {
if (ObjSelf.loadid!="") $CS(ObjSelf.loadid,"block");
//window.status="状态:["+XMLHttp.readyState+"]正在加载......";
}
}
if(this.method=="POST") XMLHttp.send(this.data);
else XMLHttp.send(null);
}
this.gettext=function(){
if(XMLHttp.readyState==4) {
if(XMLHttp.status==200) {
if (this.backtext==true){
return XMLHttp.responseText;
}else{
return XMLHttp.responseXML;
}
}
}
}
} blog.js
博客前端交互功能函数
代码示例如下:
//左侧栏展开与折叠功能
function $SHleft(id){
if($(id).style.display=='none'){
$(id).style.display='block';
"content").style.width='550px';
$F("sh","隐藏左栏");
}
else{
$(id).style.display='none';
"content").style.width='750px';
$F("sh","打开左栏");
}
}
//评论区域展开与折叠功能
function $PL(id,plid){
if($("rp"+id).style.display=='none'){
$("rp"+id).style.display='block';
$F("pl"+id,"隐藏评论");
replycon(id,"rp"+id);
}
else{
$("rp"+id).style.display='none';
$F("pl"+id,"查看评论");
}
}
//日志内容显示逻辑
function show(id,pageid,rq){
var ajaxobj=new AJAX();
ajaxobj.method="GET";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=show&sid="+id+"&rq="+escape(rq)+"&page="+pageid;
ajaxobj.callback=function(){
$F("bkcon",ajaxobj.gettext());
}
ajaxobj.send();
}
//日志分类列表显示逻辑
function board(){
var ajaxobj=new AJAX();
ajaxobj.method="GET";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=board";
ajaxobj.callback=function(){
$F("blogcon",ajaxobj.gettext());
}
ajaxobj.send();
}
//获取评论内容逻辑
function replycon(rid,rpid){
var ajaxobj=new AJAX();
ajaxobj.method="GET";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=replycon&rid="+rid;
ajaxobj.callback=function(){
$F(rpid,ajaxobj.gettext());
}
ajaxobj.send();
}
//获取评论数量逻辑
function plnum(rid){
var ajaxobj=new AJAX();
ajaxobj.method="GET";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=plnum&rid="+rid;
ajaxobj.callback=function(){
$F("plnum"+rid,ajaxobj.gettext());
}
ajaxobj.send();
}
//加载发表评论表单逻辑
function rform(rid){
var ajaxobj=new AJAX();
ajaxobj.method="GET";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=rform&rid="+rid;
ajaxobj.callback=function(){
$F("plform"+rid,ajaxobj.gettext());
}
ajaxobj.send();
}
//提交评论内容逻辑
function savepl(rid){
var ajaxobj=new AJAX();
ajaxobj.method="POST";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=savepl&";
ajaxobj.data="rid="+rid+"&username="+escape($("username"+rid).value)+"&con="+escape($("con"+rid).value);
ajaxobj.callback=function(){
$F("tjpl"+rid,ajaxobj.gettext());
if (ajaxobj.gettext().indexOf("评论已提交成功")>=0) {
//若评论提交成功则关闭表单、重新获取评论数量并关闭成功提示信息
$CS("rform"+rid,"none");
plnum(rid);
pltjid="pltjsuc"+rid;
setTimeout('$CS(pltjid,"none")',1000);
}
}
ajaxobj.send();
}
//日历显示逻辑
function rl(ReqDate){
var ajaxobj=new AJAX();
ajaxobj.method="GET";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=rl&ReqDate="+ReqDate;
ajaxobj.callback=function(){
$F("calendarcon",ajaxobj.gettext());
}
ajaxobj.send();
}
//留言表单显示逻辑
function gb(){
var ajaxobj=new AJAX();
ajaxobj.method="GET";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=gb";
ajaxobj.callback=function(){
$F("gbform",ajaxobj.gettext());
}
ajaxobj.send();
}
//提交留言逻辑
function savegb(){
var gbusername=$("gbusername").value;
var gbemail=$("gbemail").value;
var gbcon=$("gbcon").value;
//alert($("gbusername").value);
//alert($("gbemail").value);
//alert($("gbcon").value);
//return false;
if (gbusername==""){
$CS("gberr","block");
$F("gberr","请署上你的大名");
setTimeout('$CS("gberr","none")',2000);
return false;
}
if (gbemail==""){
$CS("gberr","block");
$F("gberr","请写上你的邮箱");
setTimeout('$CS("gberr","none")',2000);
return false;
}
if (gbcon==""){
$CS("gberr","block");
$F("gberr","请发表你的意见");
setTimeout('$CS("gberr","none")',2000);
return false;
}
var ajaxobj=new AJAX();
ajaxobj.method="POST";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=addgb&";
ajaxobj.data="username="+escape(gbusername)+"&email="+escape(gbemail)+"&con="+escape(gbcon);
ajaxobj.send();
ajaxobj.callback=function(){
if (ajaxobj.gettext().indexOf("成功")>=0) {
$SHwin("gb");
showgb(1);
}
}
}
//留言内容显示逻辑
function showgb(pageid){
var ajaxobj=new AJAX();
ajaxobj.method="GET";
ajaxobj.loadid="loadnews";
ajaxobj.url="lib.asp?action=showgb&page="+pageid;
ajaxobj.callback=function(){
$F("bkcon",ajaxobj.gettext());
}
ajaxobj.send();
}1
23下一页阅读全文