浅谈使用jQuery中ajax实现无刷新留言板的功能实现机理

最近在开发公司网站的留言板，因为没有会员系统的支撑，只能设置留言限制以及无刷新页面隐藏后台处理程序；结果在开发过程中遇到了一系列的问题，但最终还是在我花费大量时间的基础上硬生生的给搞定了。

无刷新页面化实际上靠得就是浏览器内置的xhr对象与服务器进行数据交换，而各个浏览器对xhr对象的支持各异，所以从底层开发代码难免有些兼容性考虑，所以鄙人偷懒的情况下果断使用jQuery的js库来开发该功能。

以下谈谈开发这个留言板过程中的一些心得，依据此次开发使用POST方式提交数据，顺便浅谈一下其实现机理：

jQuery的ajax方法使用如下：

$.ajax({
 type: "POST",
 url: 'Ajax_message.php',
 data: 'name=' + name + '&email=' + email + '&qq=' + qq + '&code=' + code + '&content=' + content + '&do=message',
 beforeSend: function() {
 jQuery("#layer").empty();
 addnotice("留言数据提交中...", "layercontinue");
 /显示提示信息的处理方法/
 },
 success: function(msg) {
 
 }
);

函数说明：在jQuery对象下的ajax方法，其传递数据方法为POST，默认的text方式，连接的服务器脚本未Ajax_message.php，传递的POST数据跟普通HTMl页面传递GET方式数据一致，即data属性，beforeSend、success为状态码，即成功连接服务器之前、之后；还有一个error、dataFilter、complete等均可作为ajax交换数据的一个状态判定，而对于js提示用户方面是非常有用的，就正如setinterval()函数一样；更多的请参考jQuery手册，在线版地址：https://jquery.org.cn/manual/ 离线版下载地址：晶晶博客提供jQuery参考手册。

具体实现的过程上来说，如下：

1.判定用户输入的数据是否合乎网站留言要求，不符合则不提交数据并提示用户，这个提示过程可以做的漂亮点，可以使用浮动层div来个漂亮的提示；

2.用户数据合格后则执行ajax方法，其中状态码beforeSend可以用以提示用户以及完成浏览器脚本的数据合法性验证，这个状态码以上很明确，在发送数据之前，也就是还未连接服务器脚本之前，这个过程跟网络速度是有关的，如果用户网络拥堵，则可以来个友好的提示，不必让用户觉得浏览器没有反应。

3.服务器返回码进行服务器端用户数据合法性验证，比如code验证码验证，这个使用msg函数就派上用处了，应为在success函数中默认参数为服务器返回字符串（注意，此种模式返回类型为字符串！）；比如我的success函数中的msg就是用来作为客户端js脚本的留言状态表示。

4.用户提交的数据经过了服务器端的合法性验证，就必须返回成功标识码，但这个还未完，因为涉及到无刷新，所以还得再次调用ajax方法请求html内容，使用js的append方法载入刚添加的留言l内容到当前html页面的某个位置。ps：如若对用户数据合法性验证要求不严，可以直接读取本地用户输入的数据载入到html页面中，这样可以减轻服务器的一些负担，从个人角度来说，验证数据合法性是一个程序员所必须注重的问题，所以不建议这么做！

至此，使用jQuery中ajax制作留言板的机理阐述完毕，具体的实现方法还得配合PHP来做。当然无关乎服务器脚本的类型，只要能够与浏览器端js交换数据就可以实现，具体实现方法各异。

休一段：