`
conkeyn
  • 浏览: 1524993 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

prototype ajax Updater

prototypeAjaxJavaScriptPHPHTML 
阅读更多

创建reply_updater.php 文件，内容如下：

<span style="color: graytext;">是吗？</span>


创建updater.php 文件，内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../prototype_1_6.js"></script>
<title>prototype 的Updater</title>

</head>
<body>
<script type="text/javascript">
<!--
var url ="reply_updater.php";
new Ajax.Updater("div1",url,{
    method:'get'
    }   
);
//-->
</script>
<br />
<div id="div1"></div>
</body>
</html>


当我们访问update.php时div1标签对象将显示reply_update.php的内容。


===============加入参数=============

updater.php 文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../prototype_1_6.js"></script>
<title>prototype 的Updater</title>

</head>
<body>
<script type="text/javascript">
<!--
var url ="reply_updater.php";
new Ajax.Updater("div1",url,{
    method:'get',
    parameters:'param=1' //加入参数
    }   
);
//-->
</script>
<br />
<div id="div1"></div>
</body>
</html>


reply_updater.php 文件：

<?php
    if($_GET['param']==1){
        echo "<span style=\"color: graytext;\">是吗？</span>";
    }elseif ($_GET['param']==2){
        echo "<span style=\"color: green;\">是的啊！</span>";
    }   
 ?>


===============加入返回处理选项=============

updater.php 文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../prototype_1_6.js"></script>
<title>prototype 的Updater</title>

</head>
<body>
<script type="text/javascript">
<!--
var url ="reply_updater.ph ";  //在这里我们把php扩展名去掉一个p，让ajax执行时出错。
new Ajax.Updater({success:"div1"}, url,{
    method:'get',
    parameters:'param=4',
    onFailure:reportError
    }   
);
function reportError(request){
    alert(request.toString());
    alert("Sorry. there was and error.");
}
//-->
</script>
<br />
<div id="div1"></div>
</body>
</html>


reply_updater.php 文件：

<?php
    if($_GET['param']==1){
        echo "<span style=\"color: graytext;\">是吗？</span>";
    }elseif ($_GET['param']==2){
        echo "<span style=\"color: green;\">是的啊！</span>";
    }   
 ?>


在上头是使用onFailure: reportError 的javascript进行处理的，而接下来下面是用failure:'error'的div进行显示错误提示。


===================================

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../prototype_1_6.js"></script>
<title>prototype 的Updater</title>

</head>
<body>
<script type="text/javascript">
<!--
var url ="reply_updater.ph ";
new Ajax.Updater({success:"div1",failure:'error' },url,{
    method:'get',
    parameters:'param=4'
    }   
);
//-->
</script>
<br />
<div id="div1"></div>
<div id="error"></div>
</body>
</html>


访问updater.php后出现以下结果：

============插入javascript代码==================

reply_updater.php 的内容为：

<?php
    if($_GET['param']==1){
        echo <<<EXCERPT
        <script language="javascript" type="text/javascript">
            sayHi= new function(){
                alert('Hi');
            }
        </script>
        <input type=button value="Click Me" onclick="sayHi()">       
EXCERPT;
    }elseif ($_GET['param']==2){
        echo <<<EXCERPT
        <script language="javascript" type="text/javascript">
            function sayHi(){
                alert('Hi');
            }
        </script>
        <input type=button value="Click Me" onclick="sayHi()">       
EXCERPT;
    }   
 ?>


updater.php 内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../prototype_1_6.js"></script>
<title>prototype 的Updater</title>

</head>
<body>
<script type="text/javascript">
<!--
var url ="reply_updater.php";
new Ajax.Updater({success:"div1",failure:'error'},url,{
    method:'get',
    parameters:'param=1',// javascript定议格式要跟参数1格式相同才可被执行。
    evalScripts:true //要把这个参数设置为true就右以在ajax返回后执行返回javascript。
    }   
);
//-->
</script>
<br />
<div id="div1"></div>
<div id="error"></div>
</body>
</html>



分享到：
| prototype ajax 实例1
评论
发表评论

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

相关推荐

    Ajax.updater

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

    Prototype Ajax学习范例

    Prototype.js是JavaScript库，它为Web开发提供了许多实用的功能，特别是在处理Ajax交互方面。这个"Prototype Ajax学习范例"提供了一系列实例，旨在帮助开发者迅速掌握使用Prototype进行Ajax操作的技巧。 Ajax，即...

    prototype-ajax例子

    在Prototype中，我们通常使用`new Ajax.Request()`或`new Ajax.Updater()`来发起Ajax请求。这些请求会携带HTTP方法（GET或POST）、URL以及回调函数，以便在服务器响应后执行特定的操作。 `Ajax.Request`的典型用法...

    prototype-AJAX案例

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

    prototype Ajax 深度解析

    作为一个Ajax开发框架，Prototype对 Ajax开发提供了有力的支持。在Prototype中，与Ajax... PeriodicalUpdater和Ajax.Updater，图2-3所示为这些类和对象之间的关系及其常用属性和方法，下面分别对这些类和对象进行介绍。

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

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

    使用prototype简化Ajax操作

    Prototype还提供了一些高级特性，如`Ajax.Updater`，它用于更新页面的特定部分。例如，如果你想将服务器返回的HTML内容插入到某个DOM元素中，可以这样做： ```javascript new Ajax.Updater('targetElementId', 'url...

    prototype的ajax应用

    Prototype是JavaScript库，它为浏览器环境提供了许多便利的功能，特别是在处理AJAX（异步JavaScript和XML）方面。AJAX允许Web应用程序在不刷新整个页面的情况下与服务器交换数据并更新部分网页，极大地提升了用户...

    prototype ajax

    Prototype AJAX 框架是JavaScript库Prototype的核心特性之一，它为Web开发提供了强大的异步通信功能。Prototype通过简化XMLHttpRequest对象的使用，使得开发者能够轻松地实现页面与服务器之间的数据交换，无需刷新...

    Prototype对Ajax的支持

    通过上述介绍可以看出，Prototype框架通过内置的`Ajax.Updater`和`Ajax.PeriodicalUpdater`提供了非常方便的Ajax支持功能，大大降低了开发者的编码难度，使得异步数据交互变得更加简单高效。无论是简单的数据更新...

    精通prototype开发Ajax应用

    Prototype提供了一系列Ajax类和对象，如Ajax.Request和Ajax.Updater，它们简化了异步请求的处理。Ajax.Request用于发起HTTP请求，而Ajax.Updater则负责更新页面的部分内容。 2. prototype.js参考 Prototype扩展了...

    prototype笔记(9)----结合Prototype和JSON开发AJAX

    Prototype的Ajax模块提供了多个实用方法，如Ajax.Request、Ajax.Updater、Ajax.PeriodicalUpdater等，它们帮助开发者轻松创建异步请求。Ajax.Request是基础，用于发送一个HTTP请求。它接受两个参数：URL和选项对象...

    prototype开发手册，AJAX学习必备

    5. **Ajax支持**：Prototype提供了强大的Ajax功能，包括`Ajax.Request`和`Ajax.Updater`等，便于实现异步数据交互。 AJAX的核心在于异步数据交换，它允许网页在后台与服务器通信，而无需重新加载整个页面。...

    Ajax实战：Prototype与Scriptaculous篇pdf

    3. **Ajax**：Prototype中的`Ajax`模块包含了一系列用于创建异步请求的函数，如`Ajax.Request`和`Ajax.Updater`，可以轻松发起Ajax请求并处理响应。 4. **Event Handling**：Prototype对事件处理进行了封装，如`...

    prototype一个简单的ajax例子

    在本示例中，我们使用的是一种JavaScript库——Prototype，它为JavaScript提供了许多实用的工具和功能，包括对Ajax的优雅封装。Prototype简化了Ajax操作，使得开发者可以更方便地与服务器进行异步数据交互。 ...

    JS Ajax XML 处理 (prototype)

    在Prototype中，Ajax对象是通过`Ajax`模块提供的，它包含了多种方法来发起不同类型的HTTP请求，如`Ajax.Request`，`Ajax.Updater`和`Ajax.PeriodicalUpdater`。 **1. Ajax.Request** `Ajax.Request`是最基本的Ajax...

    经典ajax.prototype.javascript实例

    在Prototype中，`Ajax`对象提供了多种方法，如`Request`、`Observer`、`Updater`等，它们使得发送Ajax请求变得非常简单。其中，`Ajax.Request`是最常用的方法，用于发起一个HTTP请求。 下面是一个使用`Ajax.Request...

    prototype代码下载，AJAX核心JAVASCRIPT功能

    Prototype提供了`Ajax`模块，包含如`Ajax.Request`和`Ajax.Updater`等类，简化了异步请求的编写。例如，`Ajax.Request`可以方便地发起HTTP请求，并处理响应，而`Ajax.Updater`则能更新指定DOM元素的内容。 此外，...

    Ajax toolkit prototype PPT

    - `Ajax.Updater(elementId, url|{/*options*/})`：异步更新对象，将服务器响应的内容更新到指定元素。 举例： ```javascript new Ajax.Request('/JSON.asp', { onSuccess: function(r) { alert(r.responseText);...

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

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

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