RICO学习,innerhtml

原创 2006年06月10日 20:29:00
         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" onchange="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文件只是为了美化布局和美观,可以取掉!

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

[Boolan]第一周学习笔记——rico风

1.参数传递与返回值: const member functions 常量成员函数 e.g: double real () const { return re; } double imag () ...

[Boolan]第二周学习笔记——rico风

1.三大函数:拷贝构造、拷贝复制、析构 Class with point members: String 拷贝构造函数,拷贝赋值函数 class String { public:     ...

JavaScript学习笔记之document和innerText、innerHTML

Javascript中我们最常用的对象就是document对象 Document对象: 每个载入浏览器的html文档都会成为document对象。我们可以利用document对象访问HTML中的元...

从零开始前端学习[46]:在标签中添加内容,关于innerHTML和innerText的一点解析

从零开始前端学习[46]:在标签中添加内容,关于innerHTML和innerText的一点解析 innerHTML innerText 提示 博主:章飞_906285288 博客地址:...

黑马程序员_学习日记60_706Dom2(事件冒泡、this、动态创建Dom、innerHTML、动态设置样式)

一、 事件冒泡 (一) window.event.cancelBubble 取消事件冒泡 aaaa ...

JavaScript 学习笔记(八).innerHTML、onblur="……"、密码强度

function check() { var email = document.myform.email.value; var at = email.indexOf("@"); var d...

JS学习(1)----innerHTML

(一)javascript和html联系起来(1)可以直接将Javascript写在html中 (2)一般采用将js独立为一个文件,上面这行代码可以放在head中或者是body中。(二)用js打印数...

【ARM-Linux开发】Rico Board DIY系列实验教程 Day 2——搭建Boa服务器

一:BOA WebServer简介        BOA WebServer是一款单任务的HTTP服务器,与其他网页服务器不同之处,是当有连接请求到来是,它既不是为每个连接都单独创建进程,也不是采用...

最简单的视频网站(JavaEE+FFmpeg) 转载自: Mr.Rico

视频播放

AM437X开发板 Rico Board

  • 2015年02月13日 16:27
  • 1.13MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:RICO学习,innerhtml
举报原因:
原因补充:

(最多只允许输入30个字)