prototype.js的Ajax对象

2016-02-19 12:01 6 1 收藏

今天图老师小编给大家精心推荐个prototype.js的Ajax对象教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

我想prototype.js里的ajax对象肯定吸引了不少人,大量封装好的ajax逻辑的类,对于我们这些初学者使用ajax有很大的帮助。
以下用一个我的具体使用例子来解释:效果看这里
1. Ajax.Request
你可以这样创建它
代码如下:

var url = 'http://yoursever/your/your';
var pars = 'id=xxx';
var myAjax = new Ajax.Request(
                    url,
                    {method: 'get', parameters: pars, onComplete: yourfunction}
                    );

parameters表示你要传递的参数,比如id=xxx这些。
XMLHttpRequest在HTTP请求期间的阶段分为:Loading, Loaded, Interactive, Complete。
Ajax.Request对象在任何一个阶段都可以调用你自定义的方法,形式如onxxxxxxx:yourfunction,比如我们上面提到的onComplete,是最常用的。
例子中实际使用的代码
代码如下:

function sends(id)
{
    c = $('content');
    o = $('old-content');
    c.innerHTML = "div id='loading'载入中.../div";
    o.innerHTML = c.innerHTML;
    c.style.display = 'none';
    o.style.display = 'block';
    var myAjax = new Ajax.Request('content_'+ id + '.html', {method: 'get', onComplete:updates});
}
function updates(response)
{
    new Effect.Fade($('old-content'));
    new Effect.Appear($('content'));
    $('content').innerHTML = response.responseText;
}

来源:https://www.tulaoshi.com/n/20160219/1599509.html

延伸阅读
标签: Web开发
如下是其中关于 prototype 的说明: ===== constructor 属性 应用于: Array 对象 | Boolean 对象 | Date 对象 | Function 对象 | Number 对象 | Object 对象 | String 对象 要求 版本 2 返回对象类型...
标签: Web开发
该版本在性能上有着不少的提升,同时引入一个新的元素元数据的存储系统、新的鼠标事件,兼容最新版的浏览器。同时这也是第一个基于 Sprockets 的发行版,Sprockets 是  Prototype 一个 JavaScript 的打包工具。同时文档也做了改进。 值得关注的特性有: 1. 兼容最新浏览器,包括 Chrome 和 IE 8 2. 元数据存储系统,详情请看这里。 3...
标签: Web开发
From: JavaEye.com prototype提供了一套JavaScript面向对象基础设施,我们可以使用它来进行面向对象编程,定义对象类型方式如下:  var Person = Class.create(); Person.prototype = {  initialize : function(name, age) {  this.name = na...
标签: Web开发
Prototype中的ajax.js提供了一个非常好用的ajax框架,一般应用中简单的调用以下代码就可以了 new Ajax.Request(     url, {method: “get”,     onSuccess: showFilter,     onFailure: function(request){alert(”Server error!”)},     onException: showErr...
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html head titleAjax/title script type="text/javascript" language="javascript" src="prototype.js" /script script type=&...

经验教程

663

收藏

49
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部