mootools_使用MooTools 1.2的基本AJAX请求

mootools

AJAX has become a huge part of the modern web and that wont change in the foreseeable future. MooTools has made AJAX so simple that a rookie developer can get their dynamic pages working in no time.

AJAX已成为现代Web的重要组成部分，并且在可预见的将来不会改变。 MooTools使AJAX变得如此简单，以使新秀开发人员可以立即使用其动态页面。

View Demo 观看演示

步骤1：XHTML (Step 1: The XHTML)

<p>
	<a href="https://davidwalsh.name/demo/moo-basic-ajax-example.php" id="ajax-alert">Click here</a> to receive a special message from a PHP script via a JavaScript alert.
</p>
<p>
	<a href="https://davidwalsh.name/demo/moo-basic-ajax-example.php" id="ajax-replace">Click here</a> to populate the element below with the special message.
</p>
<div id="message-here">
	Special message will appear here.
</div>

Here we define two links and a message box. Both links will trigger AJAX calls but there's a difference in how the result is handled. The first will take the response and output the response in a JavaScript alert box. The second link makes an AJAX call but returns the result into the message box.

在这里，我们定义了两个链接和一个消息框。 这两个链接都将触发AJAX调用，但是结果的处理方式有所不同。 第一个将获取响应并将响应输出到JavaScript警报框中。 第二个链接进行AJAX调用，但将结果返回到消息框中。

步骤2：PHP (Step 2: The PHP)

echo 'Hello from PHP!!';

There's very little PHP involved. In this case, we do no "real" programming -- just a simple echo statement.

涉及PHP很少。 在这种情况下，我们不执行“真正的”编程-只是简单的echo语句。

Ste 3：MooTools JavaScript (Ste 3: The MooTools JavaScript)

//on dom ready...
window.addEvent('domready', function() {

	/* ajax alert */
	$('ajax-alert').addEvent('click', function(event) {
		//prevent the page from changing
		event.stop();
		//make the ajax call
		var req = new Request({
			method: 'get',
			url: $('ajax-alert').get('href'),
			data: { 'do' : '1' },
			onRequest: function() { alert('Request made. Please wait...'); },
			onComplete: function(response) { alert('Response: ' + response); }
		}).send();
	});

	/* ajax replace element text */
	$('ajax-replace').addEvent('click', function(event) {
		//prevent the page from changing
		event.stop();
		//make the ajax call, replace text
		var req = new Request.HTML({
			method: 'get',
			url: $('ajax-replace').get('href'),
			data: { 'do' : '1' },
			onRequest: function() { alert('Request made. Please wait...'); },
			update: $('message-here'),
			onComplete: function(response) { alert('Request completed successfully.'); $('message-here').setStyle('background','#fffea1');
			}
		}).send();
	});
});

To create an AJAX request, you must create an instance of the Request class. We provide our request with the method (either get or post), the URL to ping, optional data information, and optional onRequest and onComplete event handlers.

要创建AJAX请求，您必须创建Request类的实例。 我们为请求提供方法( get或post )，ping的URL，可选数据信息以及可选的onRequest和onComplete事件处理程序。

In the first block, we accept the response in the onComplete event handler and alert it out to the screen. The second MooTools block uses the Request.HTML class instead of the Request class. Use the Request.HTML class when you intend to replace a specified element's innerHTML with the AJAX request's response.

在第一个块中，我们在onComplete事件处理程序中接受响应并将其警告到屏幕上。 第二个MooTools块使用Request.HTML类而不是Request类。 当您打算用AJAX请求的响应替换指定元素的innerHTML时，请使用Request.HTML类。

View Demo 观看演示

翻译自: https://davidwalsh.name/basic-ajax-requests-mootools

mootools