Use AJAX and PHP to Build your Mailing List
By Aarron Walter
November 1st 2006
Reader Rating: Not rated yet
一个设计优雅，内容充实的网站，没有用户的参与，也是没有生命力的。选择邮件列表作为你的用户与网站之前交互的工具，是一个不错的选择。如果访问者喜欢并且相信您的网站，他们会很信任地把他们的邮件地址告诉佻，毕竟，他们也希望能够 得关于新产品，文章或其他有关信息的通知。这是一个在您的访问者之间建立关系网的不错的方法，并且还能让他一次又一次地访问您的网站，成为您网站的回头客。
在这篇文章中，我们将会用AJAX来接受用户提交的邮件订阅地址，这样就不用刷新页面。用这样一种方法，您的提交过程序会轻松许多。同时，我们的AJAX的提交表格也能接纳那些并不使用支持AJAX技术的浏览器的用户.
这篇文章假定您的mailing list 是储存在Mysql数据库中的。但是只要加上合适的代码，文章中的代码就能很好地适合您自己的应用。
在开始之前，请
href="http://www.sitepoint.com/examples/mailinglist/code-archive.zip">下载代码，看
一看我们要在这篇教程中讲的程序。
[概要]
(奶奶的，这个不好翻译，原文是The Big Picture)
我们的mailing list 登记过程有三个要素：
在php脚本中的一段HTML 表单代码，用来接受用户的邮件地址.
一段javascript代码，监听用户提交表单的事件，并调用AJAX过程，发送Email地址。
一个简单的PHP代码，以接受邮件地址。他会检查邮件地址是否出错，并储存到Mysql数据库中。一个告诉用户操作是成功还是失败的信息会返回给HTML页。
我们同时需要保证登记过程对所有用户是正常可用的，因此写了一个php储存的过程，这样那些浏览器不支持Javascript的用户也能正常使用。
为了简化我们的AJAX编程，我们将用一个通用的javascript库(Prototype)来监听表单提交事件，并处理Ajax消息。如果您是一个Prototype的初学者，建议您看看Dan Webb的文章
href="http://www.sitepoint.com/article/painless-javascript-prototype">Painless
JavaScript Using Prototype and
href="http://www.sitepoint.com/article/javascript-library">The JavaScript
Library World Cup.
表单提交过程
我们的第一步是建立表单以接受邮件地址。然后我们调用javascript来发送消息。这就是表单代码：
- <form id="addressForm" action="index.php" method="get">
- <fieldset>
- <legend>Join our mailing list!</legend>
- <p>
- <input type="text" name="address" id="address" />
- <input type="submit" value="Sign Up" />
- </p>
- <p id="response"><?php echo(storeAddress()); ?></p>
- </fieldset>
- </form>
表单是相当地简单。我们只弄了一个text类型的输入框，用来接受用户的邮件地址，然后放了一个submit按钮，用来激发Ajax事件。表单的ID必须确定，因为要靠它来激活javascript对提交事件的监听。
注意表单文字中有一个PHP函数:storeAddress.这是我们实现登记过程的可用性的核心。当这个页面第一次载入时，storeAddress返回一个空格，这样整段文字显示空。稍后，当Ajax过程被用户的提交事件激发后，Javascript会往这一段中加入消息，以让用户知道我们做了什么事。另外，如果用户客户端并没有开启对javascript的支持，那这个页面会被再次调入。这会导致storeAddress被再次调用。这一次，会显示一段消息。
在页面的头部，我们需要用<script> 标记链入Prototype库.我们也需要链入mailingList.js，这样代码将会是这样了:
- <script type="text/javascript" src="js/prototype.js"></script>
- <script type="text/javascript" src="js/mailingList.js"></script>
这种架构的优雅之处就在于，不同的功能之间完全分开了，使得开发和维护更方便了。
用AJAX来发送邮件地址
在js目录中，除开progotype.js文件之外，另外一个是mailinglist.js.这个文件是特别征对我们的html页面的AJAX应用的。这个文件的第一个应用就是往表单中添加一个事件监听器，由这个事件监听器来调用AJAX过程。当然，我们不能直接这么干，得等页面加载完成之后。而页面加载完成这个事件是是window这个对象的load事件来通知的。
为了添加这个事件监听器，我们需要用到Prototype的一个叫observe的很方便的方法。我们首先添加页面的load的事件的监听。
在这个监听器中，我们可以为表单的提交事件也加上我们的监听器
- // Attach handler to window load event
- Event.observe(window, 'load', init, false);
- function init() {
- // Attach handler to form's submit event
- Event.observe('addressForm', 'submit', storeAddress);
- }
注意，当表单被提交时，监听器会调用一个叫storeAddress的Javascript方法。这个方法包含了一个到PHP脚本的Ajax调用。脚本是这样的:
- function storeAddress(e) {
- // Update user interface
- $('response').innerHTML = 'Adding email address...';
- // Prepare query string and send AJAX request
- var pars = 'address=' + escape($F('address'));
- var myAjax = new Ajax.Updater('response', 'ajaxServer.php', {method: 'get', parameters: pars});
- // Stop form from submitting when JavaScript is enabled
- Event.stop(e);
- }
这个方法（函数）是非常简单的。它先显示”Adding email address…”以告知用户我们在做什么。接着，我们收集表单的信息，以便于发送AJAX请求。注意我们通过一个叫$F的函数来访问文本框的内容。这个函数接受的参数是HTML元素的ID,返回这个元素的值。我们使用javascript的escape函数来将用户的输入换成Unicode格式。这样，要发送给PHP script的url就已经准备好了。
接下来，就是最重要的部分了:Ajax.Updater对象的创建。当我们创建好Ajax.Updater对象时，我们把这些参数传给他:
我们希望在它的里面显示服务器端返回的内容的那个元素的ID
php 脚本的地址
您希望发送给服务器端的内容，以及发送方法。（POST还是GET）
Ajax.Updater会发送邮件地址，然后会很老实地等着服务器端的返回。当它收到回信儿，它就会在”Adding email address…” 那个地方显示出来。最后，我们调用 Event.stop(Prototype上提供的另一个方法)来停止表音的提交过程。（事实上，这个表单还正在往服务器上提交数据呢。）
设置Mailinglist数据库
在我们写任任PHP脚本之前，我们需要一个地方来储存他们。这段sql脚本会创建一个叫mailinglist的表。
- CREATE TABLE `mailinglist` (
- `id` INT NOT NULL AUTO_INCREMENT ,
- `email` TEXT NOT NULL ,
- PRIMARY KEY ( `id` )
- );
后面的老子懒得翻了，老外的技术也就这德性。后面的会php的都会。没技术含量。需要的，自个儿下代码慢慢看吧。
