prototype大家都知道了，是一个优秀的js库，rico也不例外，两者绑定使用效果更强大，具体两者之间的关系，我没有太关注，现在将RICO的innerhtml例子贴出来大家学习，后端使用jsp技术，当然使用asp，php亦可。
inner.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<link href="css/rico.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/openrico.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/rico_header.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/ricoTests.css" media="all" rel="Stylesheet" type="text/css" />
<head>
<title>lnner numberOne</title>
<script src="script/prototype.js"></script>
<script src="script/rico.js"></script>
</head>
<body>
<br>
<div class="accordionTabContentBox">
</div>
<div id="rolodexTabContent" class="accordionTabContentBox">
<table cellspacing="5" cellpadding="5">
<tr>
<td valign="top">
<select id="listBox" size="10" οnchange="getPersonInfo(this)" style="font-family:arial;font-size:11px;display:inline;border:1px solid red">
<option value="aa">
aa
</option>
<option value="bb">
bb
</option>
<option value="cc">
cc
</option>
</select>
</td>
<td>
<div class="accordionTabContentBox">
</div>
<div class="accordionTabContentBox" id="personInfo">
Select a name to the left to see the AJAX rolodex entry for the selected person.
</div>
</td>
</tr>
</table>
</div>
<script>
ajaxEngine.registerRequest('getPersonInfo','getPerson.jsp');
ajaxEngine.registerAjaxElement('personInfo');
function getPersonInfo(selectBox){
var firstName = selectBox.value;
ajaxEngine.sendRequest('getPersonInfo',
"firstName=" + firstName);
}
</script>
</body>
</html>
getPerson.jsp
<%@ page language="java" import="java.util.*" contentType="text/xml; charset=ISO-8859-1"%>
<% String firstName = request.getParameter("firstName");
%>
<ajax-response>
<response type="element" id="personInfo">
<div class="person">
<span class="personName"> <%=firstName%></span><span class="personAddress">1743 1st Avenue Boston,Boston 71204-2345</span><span class="personOccupation">Executive Vice President</span>
<span calss="personPhoneNuember">
Phone #: (972) 555-0293</span><span class="personMobile">Mobile #: (972) 555-0295</span><span class="personNotes">Notes: Spouse playes tennis at the country club with John.</span>
</div>
</response>
</ajax-response>
inner.html 中select标签的onChange动作调用 getPersonInfo方法，该方法发送请求到已经注册到RICO提供的引擎种的getPerson.jsp，用于调用服务端JSP页面，出现显示效果，当然innerhtml效果是因为jsp中的
<ajax-response>标签，大家慢慢看吧，我要开始热身了，英格兰 VS 巴拉圭，哈哈...
对了还要下载rico和 prototype库，和相应的一些CSS文件，css文件只是为了美化布局和美观，可以取掉！
inner.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<link href="css/rico.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/openrico.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/rico_header.css" media="all" rel="Stylesheet" type="text/css" />
<link href="css/ricoTests.css" media="all" rel="Stylesheet" type="text/css" />
<head>
<title>lnner numberOne</title>
<script src="script/prototype.js"></script>
<script src="script/rico.js"></script>
</head>
<body>
<br>
<div class="accordionTabContentBox">
</div>
<div id="rolodexTabContent" class="accordionTabContentBox">
<table cellspacing="5" cellpadding="5">
<tr>
<td valign="top">
<select id="listBox" size="10" οnchange="getPersonInfo(this)" style="font-family:arial;font-size:11px;display:inline;border:1px solid red">
<option value="aa">
aa
</option>
<option value="bb">
bb
</option>
<option value="cc">
cc
</option>
</select>
</td>
<td>
<div class="accordionTabContentBox">
</div>
<div class="accordionTabContentBox" id="personInfo">
Select a name to the left to see the AJAX rolodex entry for the selected person.
</div>
</td>
</tr>
</table>
</div>
<script>
ajaxEngine.registerRequest('getPersonInfo','getPerson.jsp');
ajaxEngine.registerAjaxElement('personInfo');
function getPersonInfo(selectBox){
var firstName = selectBox.value;
ajaxEngine.sendRequest('getPersonInfo',
"firstName=" + firstName);
}
</script>
</body>
</html>
getPerson.jsp
<%@ page language="java" import="java.util.*" contentType="text/xml; charset=ISO-8859-1"%>
<% String firstName = request.getParameter("firstName");
%>
<ajax-response>
<response type="element" id="personInfo">
<div class="person">
<span class="personName"> <%=firstName%></span><span class="personAddress">1743 1st Avenue Boston,Boston 71204-2345</span><span class="personOccupation">Executive Vice President</span>
<span calss="personPhoneNuember">
Phone #: (972) 555-0293</span><span class="personMobile">Mobile #: (972) 555-0295</span><span class="personNotes">Notes: Spouse playes tennis at the country club with John.</span>
</div>
</response>
</ajax-response>
inner.html 中select标签的onChange动作调用 getPersonInfo方法，该方法发送请求到已经注册到RICO提供的引擎种的getPerson.jsp，用于调用服务端JSP页面，出现显示效果，当然innerhtml效果是因为jsp中的
<ajax-response>标签，大家慢慢看吧，我要开始热身了，英格兰 VS 巴拉圭，哈哈...
对了还要下载rico和 prototype库，和相应的一些CSS文件，css文件只是为了美化布局和美观，可以取掉！
扫一扫
1319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
