Ajax之prototype应用

最新推荐文章于 2024-09-14 18:52:56 发布

abu168

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量1.1k

点赞数

分类专栏： AJAX 文章标签： ajax prototype xmlhttprequest javascript parameters function

AJAX 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

prototype.js 是由 Sam Stephenson 写的一个 javascript 类库，通过引用prototype能够在你的web中轻松是实现你的ajax的功能。本文主要介绍Ajax.Request 和Ajax.Updater() 的用法。

prototype的一些实用函数：

$(): 根据 id 获取元素
$F(): 返回表单输入控件的值
$A(): 转化成数组对象
$H(): 转换成可枚举的 Hash 对象（与联合数组类似）
$R(): 构造 ObjectRange 对象

Try.these(): 尝试……直到成功返回

使用 Ajax.Request 类

如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建 XMLHttpRequest 对象并且异步的跟踪它的进程，然后解析响应并处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如你有一个应用程序可以通过 http://yoursever/app/get_sales?empID=1234&year=1998 与服务器通信。它返回下面这样的 XML 响应：

  
  
   
   
    
    
    
    <?
    
    xml version="1.0" encoding="utf-8" 
    
    ?>
    
     

    
    <
    
    ajax-response
    
    >
    
    
    
    
    <
    
    response 
    
    type
    
    ="object"
    
     id
    
    ="productDetails"
    
    >
    
    
        
    
    <
    
    monthly-sales
    
    >
    
    
            
    
    <
    
    employee-sales
    
    >
    
    
                
    
    <
    
    employee-id
    
    >
    
    1234
    
    </
    
    employee-id
    
    >
    
     
                
    
    <
    
    year-month
    
    >
    
    1998-01
    
    </
    
    year-month
    
    >
    
     
                
    
    <
    
    sales
    
    >
    
    $8,115.36
    
    </
    
    sales
    
    >
    
     
            
    
    </
    
    employee-sales
    
    >
    
    
            
    
    <
    
    employee-sales
    
    >
    
    
                
    
    <
    
    employee-id
    
    >
    
    1234
    
    </
    
    employee-id
    
    >
    
     
                
    
    <
    
    year-month
    
    >
    
    1998-02
    
    </
    
    year-month
    
    >
    
     
                
    
    <
    
    sales
    
    >
    
    $11,147.51
    
    </
    
    sales
    
    >
    
     
            
    
    </
    
    employee-sales
    
    >
    
    
        
    
    </
    
    monthly-sales
    
    >
    
    
    
    
    </
    
    response
    
    >
    
    

    
    </
    
    ajax-response
    
    >

用 Ajax.Request 对象和服务器通信并且得到这段 XML 是非常简单的。下面的例子演示了它是如何完成的：

你注意到传入 Ajax.Request 构造方法的第二个对象了吗？参数 {method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get' 的属性，另一个属性名为 parameters 包含 HTTP 请求的查询字符串，和一个 onComplete 属性/方法包含函数 showResponse。

还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为 true 或 false 来决定 AJAX 对服务器的调用是否是异步的（默认值是 true）。

这个参数定义 AJAX 调用的选项。在我们的例子中，在第一个参数通过 HTTP GET 命令请求那个 url，传入了变量 pars 包含的查询字符串，Ajax.Request 对象在它完成接收响应的时候将调用 showResponse 方法。

也许你知道，XMLHttpRequest 在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。就像我们例子中的 onComplete。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP 结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。我们可以在 onSuccess 选项处传入一个方法，当 AJAX 无误的执行完后调用，相反的，也可以在 onFailure 选项处传入一个方法，当服务器端出现错误时调用。正如 onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有 AJAX 请求的 XMLHttpRequest 对象。

我们的例子没有用任何有趣的方式处理这个 XML 响应，我们只是把这段 XML 放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素，或者甚至可能做某些 XSLT 转换而在页面中产生一些 HTML。

在 1.4.0 版本中，一种新的事件回传外理被引入。如果你有一段代码总是要为一个特殊的事件执行，而不管是哪个 AJAX 调用引发它，那么你可以使用新的 Ajax.Responders 对象。

假设你想要在一个 AJAX 调用正在运行时，显示一些提示效果，像一个不断转动的图标之类的，你可以使用两个全局事件句柄来做到，其中一个在第一个调用开始时显示图标，另一个在最后一个调用完成时隐藏图标。看下面的例子。
```
  
  
   
   
    
    
    
    
    
    <
    
    script
    
    >
    
    ...
    
    
    var myGlobalHandlers = ...{
        onCreate: function()...{
            Element.show('systemWorking');
        },

        onComplete: function() ...{
            if(Ajax.activeRequestCount == 0)...{
                Element.hide('systemWorking');
            }
        }
    };

    Ajax.Responders.register(myGlobalHandlers);

    
    </
    
    script
    
    >
    
    


    
    <
    
    div 
    
    id
    
    ='systemWorking'
    
    ><
    
    img 
    
    src
    
    ='spinner.gif'
    
    >
    
    Loading...
    
    </
    
    div
    
    >
    
    

   
   
  
  
```
更完全的解释，请参阅 Ajax.Request 参考和options 参考。

使用 Ajax.Updater() 类

如果你的服务器的另一端返回的信息已经是 HTML 了，那么使用这个程序包中 Ajax.Updater 类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被 AJAX 请求返回的 HTML 填充就可以了，例子比我写说明的更清楚：
```
  
  
   
   
    
    
    
    
    
    <
    
    script
    
    >
    
    ...
    
    
    function getHTML()
    ...{
        var url = 'http://yourserver/app/getSomeHTML';
        var pars = 'someParameter=ABC';
        
        var myAjax = new Ajax.Updater(
            'placeholder', 
            url, 
            ...{
                method: 'get', 
                parameters: pars
            });
        
    }

    
    </
    
    script
    
    >
    
    

   
   
  
  
<input type=button value=GetHtml οnclick="getHTML()">
<div id="placeholder"></div>
```
你可以看到，这段代码比前面的例子更加简洁，不包括 onComplete 方法，但是在构造方法中传入了一个元素 id。我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。

我们将加入更多的选项，指定处理错误的一个方法。这个是用 onFailure 选项来完成的。我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素 id 到一个带有两个属性的对象，success (一切 OK 的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到 failure 属性，而仅仅在 onFailure 处使用了 reportError 方法。

< script > ...
    function getHTML()
    ...{
        var url = 'http://yourserver/app/getSomeHTML';
        var pars = 'someParameter=ABC';

        var myAjax = new Ajax.Updater(
                    ...{success: 'placeholder'},
                    url,
                    ...{
                        method: 'get',
                        parameters: pars,
                        onFailure: reportError
                    });

    }

    function reportError(request)
    ...{
        alert('对不起，出错了。');
    }
</ script >

< input type =button value =GetHtml onclick ="getHTML()" >
< div id ="placeholder" ></ div >

如果你的服务器逻辑是连同 HTML 标记返回 JavaScript 代码，Ajax.Updater 对象可以执行那段 JavaScript 代码。为了使这个对象对待响应为 JavaScript，你只需在最后参数的对象构造方法中简单加入 evalScripts:true 属性。但是值得提醒的是，像这个选项名 evalScripts 暗示的，这些脚本会被执行，但是它们不会被加入到 Page 的脚本中。“有什么区别？”，可能你会这样问。我们假定请求地址返回的东东像这样：
```
<script language="javascript" type="text/javascript">
	function sayHi(){
		alert('Hi');
	}
</script>

<input type=button value="Click Me" οnclick="sayHi()">
```
如果你以前这样尝试过，你知道这些脚本不会如你所期望的那样工作，原因是这段脚本会被执行，但像上面这样的脚本执行并不会创建一个名叫 sayHi 的函数，它什么也不做。如果要创建一个函数，我们应当把代码改成下面这个样子：
```
  
  
   
   
    
    
    
    
    
    <
    
    script 
    
    language
    
    ="javascript"
    
     type
    
    ="text/javascript"
    
    >
    
    ...
    
    
    sayHi = function()...{
        alert('Hi');
    };

    
    </
    
    script
    
    >
    
    


    
    <
    
    input 
    
    type
    
    =button 
    
    value
    
    ="Click Me"
    
     onclick
    
    ="sayHi()"
    
    >
    
    

   
   
  
  
```
为什么我们在上面的代码中不使用 var 关键字来声明这个变量呢（指 sayHi），因为那样做创建出来的函数将只是当前脚本块的一个局部变量（至少在 IE 中是这样）。不写 var 关键字，创建出来的对象的作用域就是我们所期望的 window。

更多相关知识，请参看 Ajax.Updater 参考和 options 参考。