Discuz!X 源码分析之 ajaxpost() 函数

bacy001

本帖含有隐含内容，如果您看不到相关代码请移步：http://www.bacysoft.cn/thread-88-1-1.html，成功注册为会员后方可访问完整内容！

函数简介：ajaxpost() 函数是 Discuz!X 系统中很重要的一个函数，是 Discuz!X 系统中 实现 Ajax 功能的重要组成部分，在整个源码中有上百次调用，掌握 ajaxpost 的工作原理和使用方法对于理解Discuz!X系统的 Ajax 机制和针对 Discuz!X系统的二次开发都将大有裨益。下面将以论坛帖子页面的下方的快速回复为例，讲解 ajaxpost 的工作原理。

函数原型：function ajaxpost(formid, showid, waitid, showidclass, submitbtn, recall)
所属文件：common.js

参数说明及示例关键代码：
formid：（必填）ajax 提交的表单 id；即代码1中的“fastpostform”
代码1、调用 ajaxpost 的表单，并不是直接调用，而是通过 fastpostvalidate() 间接调用（forum/viewthread）：

1. <form method="post" autocomplete="off" id="fastpostform" action="forum.php?mod=post&action=reply&fid=2&tid=2&extra=page%3D1&replysubmit=yes&infloat=yes&handlekey=fastpost" onsubmit="return fastpostvalidate(this)">

复制代码

showid：（必填）ajax 返回信息显示区域的 id；即代码2中的“fastpostreturn”
代码2、ajaxpost 返回信息的显示区域（forum/viewthread） ：

1. <span id="fastpostreturn"></span>

复制代码

waitid：ajax 请求过程中显示等待信息区域的 id；默认与showid相同
showidclass：表单提交后返回信息显示区域的样式；
submitbtn：表单提交按钮， ajax 请求发出后将会禁用这个按钮；即代码3中的“fastpostsubmit”
代码3、表单提交按钮（forum/viewthread） ：

1. <button type="submit" name="replysubmit" id="fastpostsubmit" class="pn pnc vm" value="replysubmit" tabindex="5"><strong>发表回复</strong></button>

复制代码

recall：信息返回后执行的代码，即回调函数

调用流程：
1、当用户点击“发表回复”按钮后，将触发表单提交，进而触发代码1中的如下代码：

1. onsubmit="return fastpostvalidate(this)"

复制代码

2、进入 fastpostvalidate 函数处理流程，该函数首先检查用户输入，比如是否输入标题，标题是否过长，帖子是否过长等等；然后禁用“发表回复”按钮，最后调用 ajaxpost 函数，调用代码如下：

1. ajaxpost('fastpostform', 'fastpostreturn', 'fastpostreturn', 'onerror', $('fastpostsubmit'));

复制代码

3、进入 ajaxpost 函数处理流程，该函数首先创建一个 div 元素，元素内容为一个 <iframe> 标签，并将其动态的添加到 id 为 “append_parent” 的元素下面！此元素在所有 Discuz 页头模版中均有包含，代码如下：

1. <div id="append_parent">...</div>

复制代码

4、紧接着为上一步中创建的 <iframe> 标签绑定 load 事件，并指定事件处理函数为，代码如下：

1. _attachEvent(ajaxframe, 'load', handleResult);

复制代码

5、随后 ajaxpost 将修改原始表单的 target 属性，使其指向新建的 <iframe> ，并主动触发提交表单，同时重新使能第二步中禁用的“发表回复”按钮。代码如下：

1.         $(formid).action = action.replace(/\&inajax\=1/g, '')+'&inajax=1';
   
2.         $(formid).submit();

复制代码

6、当表单正常提交后，相关数据将返回到新建的 <iframe> 中，当 load 完成后，会触发函数“handleResult”；此函数的主要功能为：获取 <iframe> 中的内容，文本内容，将在“showid”中显示，脚本内容将即时执行。我们看到的无刷新添加回复内容正是由返回的函数动态执行的！返回的内容如下：

1. <root><![CDATA[<script type="text/javascript" reload="1">if(typeof succeedhandle_fastpost=='function') {succeedhandle_fastpost('forum.php?mod=viewthread&tid=2&pid=27&page=1&extra=page%3D1#pid27', '非常感谢，回复发布成功，现在将转入主题页，请稍候……[ 点击这里转入主题列表 ]', {'f]]><![CDATA[id':'2','tid':'2','pid':'27','from':'','sechash':''});}</script>]]></root>

复制代码

可以看到 ajaxpost 并没有使用传统的 XMLHttprequest 对象！而是利用了 iframe 来实现异步存取数据！

了解了这个流程以后，便可以自行使用 ajaxpost 来实现 ajax 功能了！