AJax技术

ajax prototype.js 学习手册(3)

字号+ 作者:H5之家 来源:H5之家 2017-07-19 17:00 我要评论( )

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

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

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

更完全的解释,请参照 Ajax.Request 参考 和 Ajax选项参考。
1.4.2. 使用 Ajax.Updater 类

如果你的服务器的另一端返回的信息已经是HTML了,那么使用这个程序包中 Ajax.Updater 类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了,例子比我写说明的更清楚。

<script>
function getHTML()
{
var url = &apos;&apos;;
var pars = &apos;someParameter=ABC&apos;;

var myAjax = new Ajax.Updater(&apos;placeholder&apos;, url, {method: &apos;get&apos;, parameters: pars});

}
</script>

<input type=button value=GetHtml>
<div></div>

你可以看到,这段代码比前面的例子更加简洁,不包括 onComplete 方法,但是在构造方法中传入了一个元素id。 我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。

我们将加入更多的选项, 指定处理错误的一个方法。这个是用 onFailure 选项来完成的。

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

<script>
function getHTML()
{
var url = &apos;&apos;;
var pars = &apos;someParameter=ABC&apos;;
var myAjax = new Ajax.Updater(
{success: &apos;placeholder&apos;},
url,
{method: &apos;get&apos;, parameters: pars, onFailure: reportError});

}

function reportError(request)
{
alert(&apos;Sorry. There was an error.&apos;);
}
</script>

<input type=button value=GetHtml>
<div></div>

如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记, Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript,你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。

更完全的解释,请参照 Ajax.Updater 参考 和 Ajax选项参考 。
Chapter 2. prototype.js参考
2.1. JavaScript 类的扩展

prototype.js 包中加入功能的一种途径就是扩展已有的JavaScript 类。
2.2. 对 Object 类的扩展

Table 2.1. Object 类的扩展
方法 类别 参数 描述
extend(destination, source) static destination: 任何对象, source: 任何对象 用从 source 到 destination复制所有属性和方法的方式 来提供一种继承机制。
extend(object) instance 任何对象 用从传入的 object 中复制所有属性和方法的方式 来提供一种继承机制。
2.3. 对 Number 类的扩展

Table 2.2. Number 类的扩展
方法 类别 参数 描述
toColorPart() instance (none) 返回数字的十六进制描述, 当在HTML中转换为RGB颜色组件到HTML中使用的颜色。

2.4. 对 Function 类的扩展

Table 2.3. 对 Function 类的扩展
方法 类别 参数 描述
bind(object) instance object: 拥有这个方法的对象 返回预先绑定在拥有该函数(=方法)的对象上的函数实例, 返回的方法将和原来的方法具有相同的参数。
bindAsEventListener(object) instance object: 拥有这个方法的对象 返回预先绑定在拥有该函数(=方法)的对象上的函数实例, 返回的方法将把当前的事件对象作为它的参数。

让我们看看这些扩展的具体例子。

<input type=checkbox id=myChk value=1> Test?
<script>
//declaring the class
var CheckboxWatcher = Class.create();

//defining the rest of the class implmentation
CheckboxWatcher.prototype = {

initialize: function(chkBox, message) {
this.chkBox = $(chkBox);
this.message = message;
//assigning our method to the event
this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
},

showMessage: function(evt) {
alert(this.message + &apos; (&apos; + evt.type + &apos;)&apos;);
}
};

var watcher = new CheckboxWatcher(&apos;myChk&apos;, &apos;Changed&apos;);
</script>

2.5. 对 String 类的扩展

Table 2.4. String 类的扩展
方法 类别 参数 描述
stripTags() instance (none) 返回一个把所有的HTML或XML标记都移除的字符串。
escapeHTML() instance (none) 返回一个把所有的HTML标记回避掉的字符串。
unescapeHTML() instance (none) 和 escapeHTML()相反。

2.6. 对 document DOM 对象的扩展

Table 2.5. document DOM 对象的扩展
方法 类别 参数 描述
getElementsByClassName(className) instance className: 关联在元素上的CSS类名 返回给定的具有相同的CSS类名的所有元素。

2.7. 对 Event 对象的扩展

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • ajax 大量PHP+ +MySQL结合的例子,学习最新Web 2.0 想选择! WEB

    ajax 大量PHP+ +MySQL结合的例子,学习最新Web 2.0 想选择! WEB

    2017-07-19 17:01

  • ajax教程pdf下载

    ajax教程pdf下载

    2017-07-19 13:00

  • 创建高性能AJAX网站的5条技巧和经验

    创建高性能AJAX网站的5条技巧和经验

    2017-07-19 09:00

  • 了解AJAX使用技巧:如何处理书签和翻页按扭

    了解AJAX使用技巧:如何处理书签和翻页按扭

    2017-07-17 18:00

网友点评
<