mootools 选择器_DWRequest：MooTools 1.2 AJAX侦听器和消息显示

最新推荐文章于 2024-07-13 15:29:04 发布

culuo8053

最新推荐文章于 2024-07-13 15:29:04 发布

阅读量96

点赞数

文章标签： java python js javascript vue ViewUI

原文链接：https://davidwalsh.name/dwrequest-mootools-12-ajax-listener-message

版权

mootools 选择器

Though MooTools 1.2 is in its second beta stage, its basic syntax and theory changes have been hashed out. The JavaScript library continues to improve and become more flexible.

尽管MooTools 1.2处于第二个beta阶段，但其基本语法和理论更改已被淘汰。 JavaScript库不断改进并变得更加灵活。

Fellow DZone Zone Leader Boyan Kostadinov wrote a very useful article detailing how you can add a Gmail-like AJAX display to your website using the Prototype JavaScript library. The article got me to thinking: could it be helpful to always display an AJAX notification message upon every request's initial request, success event, and failure event? Maybe even only for debugging purposes?

DZone区域负责人Boyan Kostadinov撰写了一篇非常有用的文章，详细介绍了如何使用原型JavaScript库将类似Gmail的AJAX显示添加到您的网站。这篇文章让我思考：始终在每个请求的初始请求，成功事件和失败事件上显示AJAX通知消息是否有帮助？也许甚至仅用于调试目的？

Whatever your reason may be, I've created the DWRequest MooTools class to inform the user or developer of each AJAX request and subsequent result.

无论您是出于什么原因，我都创建了DWRequest MooTools类，以将每个AJAX请求和后续结果通知用户或开发人员。

View Demo 观看演示

CSS代码 (The CSS Code)

#message	{ display:none; width:150px; text-align:center; padding:5px 8px; font-weight:bold; position:absolute; right:2%; font:12px arial; }

XHTML代码 (The XHTML Code)

The following code is an example of two XHTML links that make AJAX calls. Note the message DIV.

以下代码是两个进行AJAX调用的XHTML链接的示例。注意消息DIV。

<body>

	<div id="message">Performing Request...</div>
	<a href="inputs.php" class="ajax">Succeed</a><br />
	<a href="sug.php" class="ajax">Fail</a>

</body>

MooTools JavaScript代码 (The MooTools JavaScript Code)

var DWRequest = new Class({
	Extends: Request,
	options: {
		onRequest: function() {
			show_ajax_message('request');
		},
		onSuccess: function() {
			show_ajax_message('success');
		},
		onFailure: function() {
			show_ajax_message('failure');
		},
		onCancel: function() {
			show_ajax_message('cancel');
		}
	}
});

//adds initial events
window.addEvent('domready',function() {

	//for every action class
	$$('.ajax').each(function(el) {

		//add an event..
		el.addEvent('click', function(e) {
			e = new Event(e).stop();

			//make ajax request
			var req = new DWRequest({
				url: el.get('href'),
				method: 'get',
				data: 'something'
			}).send();
		});
	});
});

//shows the block
function show_ajax_message(state)
{
	//set position
	$('message').setStyle('top',window.getScrollTop() + 10);

	//on request...
	if(state == 'request')
	{
		//show the box
		$('message').addClass('onrequest').setText('Performing Request...').setStyles({'background-color':'#fffea1','display':'block','opacity':'100'});
	}
	//on success
	else if(state == 'success')
	{
		//take care of box
		$('message').set('text','Request Complete!');

		//do effect
		var myMorph = new Fx.Morph('message',{'duration':1000});
		myMorph.start({'opacity': 0,'background-color': '#90ee90'});
	}
	else if(state == 'failure')
	{
		//take care of box
		$('message').set('text','Request Failed!');

		//do effect
		var myMorph = new Fx.Morph('message',{'duration':1000});
		myMorph.start({'opacity': 0,'background-color': '#ff0000'});
	}
	else if(state == 'cancel')
	{
		//take care of box
		$('message').set('text','Request Cancelled!');

		//do effect
		var myMorph = new Fx.Morph('message',{'duration':1000});
		myMorph.start({'opacity': 0,'background-color': '#fffea1'});
	}
}

说明 (The Explanation)

Once the DOM is ready, any link with the class ajax is listened to -- upon click, a DWRequest class instance is created.
DOM准备就绪后，将侦听与ajax类的任何链接-单击后，将创建一个DWRequest类实例。
I've extended the MooTools Request class, adding default actions for the onRequest, onFailure, onCancel, and onComplete events. (Calls the show_ajax_message() function.)
我扩展了MooTools Request类，为onRequest ， onFailure ， onCancel和onComplete事件添加了默认操作。 (调用show_ajax_message()函数。)
The function displays and manipulates the message DIV as needed: color morphing, message changes, and positioning.
该功能根据需要显示和操作消息DIV：颜色变形，消息更改和定位。

View Demo 观看演示

Do you have any suggestions for my class? Please share!

您对我的课程有什么建议吗？请分享！

翻译自: https://davidwalsh.name/dwrequest-mootools-12-ajax-listener-message

mootools 选择器

culuo8053

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mootools 选择器_DWRequest：MooTools 1.2 AJAX侦听器和消息显示

mootools 选择器Though MooTools 1.2 is in its second beta stage, its basic syntax and theory changes have been hashed out. The JavaScript library continues to improve and become more flexible. 尽管MooToo...
复制链接

扫一扫