`
wangcheng
  • 浏览: 1463531 次
  • 性别: Icon_minigender_1
  • 来自: 青岛人在北京
社区版块
存档分类
最新评论

使用prototype的Ajax.Updater更新带javascript的html

    博客分类：
  • ajax
AjaxJavaScriptHTMLprototypeJSP 
阅读更多

prototype的Ajax.Updater可以用来更新一段html，但在更新带javascript的html时，需要注意几个问题

一. 需要在Ajax.Updater添加参数 evalScripts : true

二. javascript代码块要使用下面的形式
showHi = function() {
    alert('Hi');
}

而不能使用下面的形式
function showHi() {
    alert('Hi');
}

三. 注意javascript代码块中不能使用 <!--  //--> 标记，否则 IE 会出错，firefox没问题。

下面是个例子, 在a1.jsp中加载a2.jsp,

 a1.jsp代码
  1. <html>  
  2. <head>  
  3. <title>Insert title here</title>  
  4. <script type="text/javascript" src="prototype-150.js"></script>  
  5. <script type="text/javascript">  
  6. function ajax() {   
  7.     var url = "/MyWebApp/a2.jsp";   
  8.     var myajax = new Ajax.Updater(   
  9.         {success: 'mydiv'},    
  10.         url,   
  11.         {   
  12.             asynchronous:true,   
  13.             method: 'get',   
  14.             evalScripts:true   
  15.         }   
  16.     );   
  17. }   
  18. </script>  
  19. </head>  
  20. <body>  
  21.     <a href="#" onclick="ajax()">click here1</a>  
  22.   
  23.     <div id="mydiv"></div>  
  24. </body>  
  25. </html>  

 

 a2.jsp代码
  1. <script type="text/javascript">  
  2.     showHi = function() {   
  3.         alert('Hi');   
  4.     }   
  5.     sayHello = function() {   
  6.         alert('Hello');   
  7.     }   
  8. </script>  
  9.   
  10. <a href="#" onclick="showHi();">showHi</a>  
  11.   
  12. <script type="text/javascript">  
  13. sayHello();   
  14. </script>  

 参考

http://www.prototypejs.org/api/ajax/updater

分享到：
| 解决Flash盖住弹出菜单(转)
评论
2 楼 ioveme 2010-12-07  
是支持的，有个元素和method重名了，FF正常，IE报错
1 楼 ioveme 2010-12-07  
IE7对showHi = function() 这种形式不支持？Object doesn't support this property or method
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ajax.updater

    Ajax.updater是Prototype JavaScript库中的一个关键功能，用于实现页面的部分更新，无需刷新整个页面即可获取新数据。这种技术在Web开发中被称为异步JavaScript和XML（Ajax），尽管现在更常见的是与JSON或其他数据...

    经典ajax.prototype.javascript实例

    在JavaScript的世界里，Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不刷新整个页面的情况下，与服务器交换数据并更新部分网页内容。`prototype`是JavaScript的一个库，它为...

    prototype.js开发笔记--让你精通prototype开发

    1.4.2. 使用 Ajax.Updater 类 2. prototype.js参考 2.1. JavaScript 类的扩展 2.2. 对 Object 类的扩展 2.3. 对 Number 类的扩展 2.4. 对 Function 类的扩展 2.5. 对 String 类的扩展 2.6. 对 document DOM 对象的...

    Prototype 1.6.0.3 中文参考手册

    阅读《Prototype 1.6.0.3 中文参考手册》并结合`Prototype.chm`，将有助于读者全面掌握Prototype库的使用，从而在JavaScript开发中更加游刃有余，特别是在处理动态网页和Ajax应用时。最后，`readme.txt`文件通常包含...

    prototype-AJAX案例

    在JavaScript的世界里，Prototype是一个非常著名的库，它扩展了JavaScript的基本对象，并且提供了一系列实用的函数，使得开发者在处理DOM操作、AJAX交互等方面的工作变得更加简单。本案例将重点探讨如何利用...

    prototype_1.7.3.js 最新版本

    除此之外，Prototype_1.7.3.js还提供了丰富的AJAX（异步JavaScript和XML）功能。它简化了与服务器的通信，使得动态更新页面内容变得轻而易举。`Ajax.Request`和`Ajax.Updater`是其中两个关键的类，它们分别用于发起...

    prototype.js开发笔记.pdf

    下面是Prototype.js的开发笔记，涵盖了该库的使用指南、Ajax对象、JavaScript类的扩展、对象的扩展、事件处理等多个方面。 一、Programming Guide Prototype.js是一个强大的JavaScript库，提供了许多有用的函数和...

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    Prototype通过`Ajax`类封装了这一技术，包括`Ajax.Request`、`Ajax.Updater`和`Ajax.PeriodicalUpdater`等方法，使得创建异步请求变得简单直观。 总结来说，这个压缩包是学习和使用Prototype JavaScript库的宝贵...

    prototype.js javaScript插件

    "Prototype.js"是一个针对JavaScript的开源库，旨在增强和扩展JavaScript的基本功能，尤其在处理DOM（文档对象模型）操作、事件处理以及Ajax交互时提供了极大的便利。 ### 1. Prototype.js核心概念 - **原型链**：...

    prototype 1.6.0.2.js+使用DEMO例子

    Prototype JavaScript 框架是早期Web开发中广泛使用的库，它为JavaScript添加了许多实用功能，提高了开发效率。1.6.0.2是Prototype的一个版本，这个版本在2008年发布，提供了许多增强和修复。在这个"prototype 1.6....

    使用prototype简化Ajax操作

    在JavaScript的世界里，Ajax（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术，它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。Prototype是一个强大的JavaScript库，它为...

    .prototype.and.scriptaculous.taking.the.pain.out.of.javascript

    《.prototype.and.scriptaculous.taking.the.pain.out.of.javascript》是一本专注于使用Prototype和Scriptaculous库简化JavaScript开发的资源，对于那些希望通过AJAX技术提升网页交互体验的开发者来说，这本书无疑是...

    prototype.js 1.6

    - **Ajax 请求**：`Ajax.Request` 和 `Ajax.Updater` 可以创建 AJAX 请求，处理响应并更新页面内容。 ### 4. prototypeAPI 文件详解 `prototypeAPI` 文件可能是 Prototype.js 1.6 的 API 文档，包含了详细的函数...

    prototype.js 1.6中文手册、prototype.js 1.6英文手册、

    `Ajax.Request`和`Ajax.Updater`是核心组件，前者用于发送请求，后者用于更新页面的一部分。它们都支持多种HTTP方法（GET、POST等），并能处理JSON、XML等多种数据格式。 ### 4. 动画效果 Prototype.js 提供了强大...

    Ajax(Ajax,jquery,prototype综合).rar

    7. **Prototype的Ajax**：Prototype库提供了一个强大的Ajax模块，包括`Ajax.Request`用于发起请求，`Ajax.Updater`用于更新页面内容。它还提供了一些便利的选项和事件处理，使开发更加灵活。 8. **应用场景**：Ajax...

    prototype.js中文手册

    3. **Ajax组件**：`Ajax.Base` 是所有Ajax操作的基础，`Ajax.Request` 和 `Ajax.Updater` 分别用于发起新的请求和更新页面部分。 4. **Observables**：观察者模式的实现，允许对象发布事件并让其他对象订阅这些事件...

    prototype.js文件使用和讲解

    - **Ajax支持**：`prototype.js`提供了一套完整的Ajax解决方案，包括`Ajax.Request`、`Ajax.Updater`和`Ajax.PeriodicalUpdater`等类，使得异步通信更为简便。 - **事件处理**：它增强了事件处理机制，允许绑定和...

    javascript类库prototype.js

    Prototype.js 提供了强大的Ajax支持，包括`Ajax.Request`和`Ajax.Updater`等，能够轻松实现异步数据交换，实现页面无刷新更新。 4. **事件处理**：通过`Event`模块，Prototype.js 改进了JavaScript的事件处理机制，...

    prototype.js简介

    3. **Ajax** - prototype.js 改进了原始的XMLHttpRequest对象，提供了`Ajax`模块，包含`Ajax.Request`和`Ajax.Updater`等类，使异步数据交换更加简单和灵活。 4. **事件处理** - 库中的`Event.observe()`和`Event....

    prototype1.7.zip

    `Ajax.Request`和`Ajax.Updater`类使得创建请求和更新页面内容变得简单。此外，`Form.Element`和`Form`类提供了表单相关的便捷操作，如发送表单数据到服务器。 4. **Event处理** Prototype改进了事件处理机制，...

Magicbox
Global site tag (gtag.js) - Google Analytics