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文件只是为了美化布局和美观,可以取掉!

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

相关文章推荐

JS学习(1)----innerHTML

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

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

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

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

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

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

innerHTML、innerText和outerHTML、outerText的区别

原文链接:1、区别描述如下:  innerHTML 设置或获取位于对象起始和结束标签内的 HTMLouterHTML 设置或获取对象及其内容的 HTML 形式innerText 设置或获取位...

innerHTML、innerText和outerHTML、outerText的区别

1、区别描述如下:  innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于...
  • myinc
  • myinc
  • 2014-08-06 09:21
  • 301

JavaScript学习笔记之document和innerText、innerHTML

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

innerHTML

DOM操作中的innerHTML可以说是使用频率比较高的了,在使用的时候有一些要点需要注意: 1. innerHTML与outerHTML的区别 2. 通过innerHTML插入脚本 3....

innerHTML用法

转自:http://blog.csdn.net/l_courser/article/details/2156057 用法: 比如在中写了如下的代码: 现在用top.i...
  • ltx06
  • ltx06
  • 2015-02-24 17:08
  • 284

Ionic2 "WARNING: sanitizing HTML stripped some content" when no content stripped

Web应用程序的安全涉及到很多方面。针对常见的漏洞和攻击,比如跨站脚本攻击,Angular提供了一些内置的保护措施。为了系统性的防范XSS问题,Angular默认把所有值都当做不可信任的。 当值从模板...

css和javascript的一些笔记(三) 几个简单案例

7、案例2:动态显示时间* 得到当前的时间 var date = new Date(); var d1 = date.toLocaleString(); * 需要让页面每一秒获取时间 ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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