本节文章笔者将向您详细介绍SiteFactory在AJAX方面的特性及使用方法， SiteFactory针对AJAX提供了专用的函数库，希望通过本文能够让各位读者了解并熟练的在自己的网站中应用这种方法，从而制作出独特的页面效果。
关键字：AJAX
注意：本节内容为针对1.1.0.3版本制作，如果您使用的是以前版本的SiteFactory,有些例子代码将不能工作。
一、AJAX访问原理概述
AJAX，目前网路上普遍应用的无刷新访问技术，具有数据量小，用户体验好等优点，具体细节不再赘述。本文侧重点在SiteFactory是如何实现AJAX访问上，其实 SiteFactory在设计之初，就对AJAX访问做了周到的处理，从系统的设计概念看来，每个标签在前台呈现的方法都可以是多种多样的，直接写在模板里是第一种方法，通过AJAX调用是第二种方法，第三种方法目前还没有实现，就是可以通过应用程序在本地进行生成，今天咱们不谈这种方法。目前我们看一下前两种方法的区别，见下图。
图（1）
从图中可以看出，无论是使用普通方法，还是AJAX方式呈现标签内容，前面阶段的处理都是一致的，只是最后写入页面时有所不同，传统方式是在页面生成时将标签内容写到模板中，是服务器端的操作，而AJAX方法是将模板和标签内容在客户端的机器中生成最终页面。这里就多了一个客户端JavaScript的处理过程，那么我们就来谈一下这个脚本应该如何使用。
二、基础函数库
SiteFactory的AJAX访问函数库，就是位于JS目录下的Common.js文件，这里面包含了进行AJAX访问的所有必要函数，所以使用AJAX功能前，我们必须在页面模板中将这个JS包含进去，标准调用方法为：
<script language="javascript" type="text/javascript" src="/JS/Common.js"></script>
在Common.js文件中最重要的就是ajax对象，其他函数都是登陆辅助或者提供基本函数的，可以不用关心，下面笔者就简单介绍一下ajax内部属性中比较重要的部分：
1 标签设置类属性
ajax.labelname 标签名称
ajax.para 标签参数
ajax.paratype 标签参数类型声明
ajax.recvType 访问类型，默认为XML
ajax.targetId 访问状态容器ID
2 分页设置类属性
ajax.currentpage 当前页
ajax.total 总输出数（标签获取后才有值）
ajax.pagesize 分页显示数
ajax.sourcename 分页标签对应的数据源标签ID
3 访问方法类属性
ajax.get
本属性提供GET方法（也就是只读方法）进行AJAX访问，本方法适用于最基础的AJAX访问，由于不能返回参数等，大部分标签不能通过这个方法进行访问。通常只是使用它进行一些其他方面的AJAX应用，比如读取目标URL提供的XML数据等。本方法只提供唯一一个参数可以设置：targetUrl（目标URL）。
ajax.post
本属性提供POST方法进行AJAX访问，是SiteFactory的最主力的AJAX访问方法，所有标签的调用均通过本方法进行。它提供两个参数可以设置：
参数一：usemethod 访问方法，可指定访问标签的具体形式，有8个主要方法，如下列表：
Updatelabel 标签访问
Updatepage 分页标签访问
Userlogin 处理用户登陆
Userlogout 处理用户退出
Logincheck 登陆用户检查
Usercheck 检查用户是否存在
Addcomment 发表评论
Addpkzone 评论辩论
参数二：targetUrl（目标URL）
注：上面未列出的属性，为内部运算属性，调用时请勿赋值。
三、标签基本访问示例
一个基本的AJAX标签访问流程如下图：
假设我们要访问的标签名为
图（2）
“标签一”，参数为限制显示长度“contentlen”，我们限制长度为字符20，那么它对应的最简化页面模板如下：
<script language="javascript" type="text/javascript" src="/JS/Common.js"></script>
<script language="javascript" type="text/javascript">
function updatelabel()
{
var x = new AjaxRequest(‘XML’,’xmlstat’’);
x.labelname = ‘标签一’；
x.para = [‘contentlen=20’];
x.post(‘updatelabel’, ‘{PE.SiteConfig.applicationpath/}ajax.aspx’, function(s) {
var xml = x.createXmlDom(s);
var plstr = ‘’;
for (var i=0; i<xml.getElementsByTagName("body")[0].childNodes.length; i++)
{
plstr += xml.getElementsByTagName("body")[0].childNodes[i].nodeValue;
}
$("showcontent").innerHTML = plstr;
});
}
}
</script>
<body onload=” updatelabel()”>
显示AJAX访问状态<div id=”xmlstat”></div>
显示访问结果<div id=”showcontent”></div>
</body>
四、标签参数控制
看了上面的例子，大家肯定会问，标签参数怎么是固定写在里面的呀？我需要标签参数随用户需要变化怎么办呢？那么请大家放心，系统对标签参数提供了多种多样的提取方法，下面我们来一一说明，还以上面的内容长度参数为例，我们可以不指定它的长度为20，而是写成这样：
x.para = [‘contentlen’];
下面我们可以增加一个参数类型说明
x.paratype = [‘value’];
这时系统就会自动去页面中寻找ID为contentlen的输入框，并将它的值作为参数contentlen的值返回系统，那么，我们上面的最简化代码就可以另写为如下方式
<script language="javascript" type="text/javascript" src="/JS/Common.js"></script>
<script language="javascript" type="text/javascript">
function updatelabel()
{
var x = new AjaxRequest(‘XML’,’xmlstat’);
x.labelname = ‘标签一’；
x.para = [‘contentlen’];
x.paratype = [‘value’];
x.post(‘updatelabel’, ‘{PE.SiteConfig.applicationpath/}ajax.aspx’, function(s) {
var xml = x.createXmlDom(s);
var plstr = ‘’;
for (var i=0; i<xml.getElementsByTagName("body")[0].childNodes.length; i++)
{
plstr += xml.getElementsByTagName("body")[0].childNodes[i].nodeValue;
}
$("showcontent").innerHTML = plstr;
});
}
}
</script>
<body>
请输入显示长度<input type=”text” id=”contentlen”/>
<input type="submit" value="显示标签" onClick=" updatelabel()" /> <br/>显示AJAX访问状态<div id=”xmlstat”></div>
<br/>显示访问结果<div id=”showcontent”></div>
</body>
通过上面的例子就可以看出，标签参数和参数类型是如何对应工作的，基本对应方式如下
x.para = [‘参数一’,‘参数二’，‘参数三’，…];
x.paratype = [‘参数一类型’,‘参数二类型’，‘参数三类型’,…];
其中参数类型为固定的几个方法：
Value 取input输入框内容。
InnerHtml取页面元素内容。
InnerText取页面元素文本内容。
Text取text文本框内容。
nohtmlValue 取input输入框内容(过滤HTML元素)。
nohtmlinnerHtml取页面元素内容(过滤HTML元素)。
nohtmlText取text文本框内容(过滤HTML元素)。
五、分页标签的AJAX调用
分页标签的调用方法与普通标签的基本一致，但它需要额外给出几个必须的分页参数，而这几个参数，都是在数据源标签查询时进行返回的。这个描述起来很不容易，让我们直接看下面的最简化代码例子：
<script language="javascript" type="text/javascript" src="/JS/Common.js"></script>
<script language="javascript" type="text/javascript">
function updatelabel()
{
var x = new AjaxRequest('XML','xmlstat’);
x.labelname =’标签一’;
x.currentpage = 1;
x.para = [‘contentlen’ ,’page=true’,’pagesize=10’];
x.paratype = [‘value’];
x.post(‘updatelabel’, ‘{PE.SiteConfig.applicationpath/}ajax.aspx’, function(s) {
var xml = x.createXmlDom(s);
var plstr = "";
for (var i=0; i<xml.getElementsByTagName("body")[0].childNodes.length; i++)
{
plstr += xml.getElementsByTagName("body")[0].childNodes[i].nodeValue;
}
$("showcontent").innerHTML = plstr;
updatepage(xml);
});
}
}
function updatepage(xml)
{
var x = new AjaxRequest('XML','pe100_page_' + sourcename);
x.labelname = ‘url_基本风格’;
x.sourcename = ’标签一’;
x.total = xml.getElementsByTagName("total")[0].firstChild.data;
x.currentpage = xml.getElementsByTagName("currentpage")[0].firstChild.data;
x.pagesize = xml.getElementsByTagName("pagesize")[0].firstChild.data;
x.post('updatepage', '{PE.SiteConfig.applicationpath/}ajax.aspx', function(s) {
var xml = x.createXmlDom(s);
var plstr = "";
for (var i=0; i<xml.getElementsByTagName("body")[0].childNodes.length; i++)
{
plstr += xml.getElementsByTagName("body")[0].childNodes[i].nodeValue;
}
$(" showpage ").innerHTML = plstr;
});
}
</script>
<body>
请输入显示长度<input type=”text” id=”contentlen”/>
<input type=”submit” value=”显示标签” onClick=” updatelabel()” /> <br/>显示AJAX访问状态<div id=”xmlstat”></div>
<br/>显示访问结果<div id=”showcontent”></div>
<br/>显示分页结果<div id=”showpage”></div>
</body>
- 上一篇：SiteFactory标签解析大揭秘（五）[ 06-01 ]
- 下一篇：信丰中学校园网站编辑发布文章使用培训[ 12-04 ]
