关键字：AJAX
注意：本节内容为针对1.1.0.3版本制作，如果您使用的是以前版本的SiteFactory,有些例子代码将不能工作。
一、AJAX访问原理概述
AJAX，目前网路上普遍应用的无刷新访问技术，具有数据量小，用户体验好等优点，具体细节不再赘述。本文侧重点在SiteFactory是如何实现AJAX访问上，其实SiteFactory在设计之初，就对AJAX访问做了周到的处理，从系统的设计概念看来，每个标签在前台呈现的方法都可以是多种多样的，直接写在模板里是第一种方法，通过AJAX调用是第二种方法，第三种方法目前还没有实现，就是可以通过应用程序在本地进行生成，今天咱们不谈这种方法。目前我们看一下前两种方法的区别，见下图。
此主题相关图片如下：
从图中可以看出，无论是使用普通方法，还是AJAX方式呈现标签内容，前面阶段的处理都是一致的，只是最后写入页面时有所不同，传统方式是在页面生成时将标签内容写到模板中，是服务器端的操作，而AJAX方法是将模板和标签内容在客户端的机器中生成最终页面。这里就多了一个客户端JavaScript的处理过程，那么我们就来谈一下这个脚本应该如何使用。
二、基础函数库
SiteFactory的AJAX访问函数库，就是位于JS目录下的Common.js文件，这里面包含了进行AJAX访问的所有必要函数，所以使用AJAX功能前，我们必须在页面模板中将这个JS包含进去，标准调用方法为：
<script language="javascript" type="text/javascript" src="{PE.SiteConfig.ApplicationPath/}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标签访问流程如下图：
此主题相关图片如下：
假设我们要访问的标签名为“标签一”，参数为限制显示长度“contentlen”，我们限制长度为字符20，那么它对应的最简化页面模板如下：
<script language="javascript" type="text/javascript" src="{PE.SiteConfig.ApplicationPath/}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="{PE.SiteConfig.ApplicationPath/}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="{PE.SiteConfig.ApplicationPath/}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>
注意：如果要实验分页效果，必须将“标签一”制作为支持分页的标签才行哟。
技术中心首页
安全与更新
动易产品知识库
动易产品用户手册
动易开发文档
模板设计教程