php 留言板项目 ajax,PHP Ajax留言板

本案例代码已经提供下载,点击这里!

AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

在本文的例子中,为了让初学者对ajax的实现原理有一个更加深刻的认识,没有使用jquery等框架,整个异步请求都是通过编写javascript来完成。

本例共包括3个文件,分别为:

config.php 连接数据库

message.php 用户访问的留言界面,当用户发送留言时,将留言结果以异步请求的方式发送到message_ajax.php。

message_ajax.php 处理来自message.php中的异步请求并返回结果

下面我按实际编写的步骤来说明:

创建数据库和表 为了让问题不至于变得复杂,这里我是在test数据库中创建了一个表t_message。SQL语句如下:

create table t_message(id int auto_increment primary key,email varchar(100),content text);

编写用户留言界面

留言界面非常简洁,就是一个表单,在message.php中添加以下html代码如下:

Leave Message Here Email:

Content:

异步请求

使用XMLHttpRequest对象发送请求的基本步骤如下: 创建一个XMLHttpRequest的引用 告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变,为此要设置onreadystatechange属性 指定请求的属性。open() 将请求发送给服务器。send() xmlHttp.responseText将响应提供为一个串

创建一个XMLHttpRequest的引用

var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }else{ alert("浏览器不支持XMLHttpRequest对象"); } }

创建查询字符串

function createQueryString(){ var email = document.getElementById("email").value; var content = document.getElementById("content").value; var queryString = "email="+ email + "&content="+ content ; //alert(queryString); return queryString; }

以POST方式发送异步请求

function doRequestUsingPOST(){ createXMLHttpRequest(); var url = "message_ajax.php?timeStamp=" + new Date().getTime(); var queryString = createQueryString(); xmlHttp.open("POST",url,true); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); xmlHttp.send(queryString); }

处理状态变更,解析message_ajax.php返回的结果

function handleStateChange(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ parseResult(); //alert("OK"); } } } function parseResult(){ var responseDiv = document.getElementById("newmessage"); if(responseDiv.hasChildNodes()){ responseDiv.removeChild(responseDiv.childNodes[0]); } var responseText = xmlHttp.responseText;//document.createTextNode(xmlHttp.responseText); responseDiv.innerHTML = responseText; //responseDiv.appendChild(responseText); }

服务端处理异步请求

然后我们看下服务端message_ajax.php是怎样处理请求的

"; while($message = mysql_fetch_array($result)){ $onemessage = "

Email:".$message['email']."

Content:".$message['content']."";$responseText = $responseText.$onemessage;}$responseText = $responseText."";echo $responseText;?>

从上面代码可以看到,服务端首先需要接收客户端发送过来的请求,在本例中发送的参数就是email和content。

然后,服务端将这些数据保存到数据库中,并查询出数据库中最近的10条留言信息,构造成HTML字符串,并echo。

于是客户端便可接收到,实现无刷新显示最近的10条留言(当然需要留言超过10条的时候)。

如果你有神马问题,请留言讨论!

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/552635.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php如何设计自定义模型,php – Kohana ORM模型中的自定义方法

我有这两个模型:class Model_user extends ORM {protected $_has_many array(credits, array(model>credit, foreign_key>user));}class Model_credit extends ORM {protected $_belongs_to array(user, array(model>user, foreign_key>user));protec…

php过滤掉不乱码json,PHP JSON编码后,中文乱码的解决方式

1,有些时候,需要写接口,传递一些中文值,那么JSON编码,会出现目前以下两种情况!a.输出乱码$testJSONarray(name>中文字符串,value>test);echo json_encode($testJSON);?>输出结果:{“n…

php 遮罩层,Jquery实现遮罩层的方法

本文实例讲述了Jquery实现遮罩层的方法。分享给大家供大家参考。具体如下:1、假设#main为页面body中的最外层Div标签2、背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就不贴了):xAttention!3、在script.js中定义遮罩…

php中append,插入节点append()、insertAfter()的特殊用法:对原有DOM元素进行移动

插入节点的方法: append()/appendTo()、prepend()/prependTo()、after()/insertAfter()、before/insertBefore()这些插入节点的方法不仅能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动(若对已在文档中存在的元素使用插入节点的方法则相当于执行“移动…

nhinx php 调优,高流量站点NGINX与PHP-fpm配置优化

本文由LinuxProbe.Com团队成员岳国帅整理发布,原文来自:黑白。导读使用Nginx搭配PHP已有7年的经历,这份经历让我们学会如何为高流量站点优化NGINX和PHP-fpm配置。以下正是这方面的一些提示和建议:1. 将TCP切换为UNIX域套接字1. 将…

python怎么导入apscheduler,如何强制apscheduler将作业添加到作业存储?

我正在使用apscheduler使用脚本向调度程序添加作业。不幸的是,由于我没有启动调度程序,所以在使用脚本时没有正确安排作业。在scheduler self.getscheduler() # initializes and returns schedulerscheduler.add_job(triggertrigger, func function, j…

php rinit,PHP执行原理

一:PHP简介:PHP:Hypertext Preprocessor 也就是“超文本预处理器”,是一种通用的开源脚本语言。语法吸收了C语言,Java和Perl的特点,使用广泛,主要适用于Web开发领域。二:PHP的设计理…

php 放大镜,图片放大镜效果实战总结

摘要:本次实战主要完成了图片放大镜的效果,通过定义原始图片,放大镜,放大后的图片,然后设置放大后的图片为原始图片的3倍,通过鼠标移上显示放大后的图片,并通过位移计算当前放大镜的位置&#x…

oracle未授权sql查询,【oracle使用笔记3】sql查询遇到的若干问题总结

在整个开发过程当中,sql查询操做的频率比较高,在不一样的业务场景下会出现不一样的查询需求,如下是我在项目中遇到的查询需求,总结一下。sql【查询一】:取查询出的第一条数据oracleselect * from (select * from [ta…

linux内核mtd分区,linux-kernel – 在运行时调整MTD分区大小

我正在使用嵌入式设备,并希望能够通过Linux调整其MTD分区大小而无需重新启动.问题是我的Linux映像大小已经增加,它所在的当前MTD分区(mtd0)现在太小了.但是,它之后的分区(mtd1)是用于存储配置信息的JFFS2部分,因此重新调整大小不是一个选项,因为配置可能会丢失.我的目标是&…

linux 查看握手时间,实战:tcpdump抓包分析三次握手四次挥手

本文档以实战的形式介绍tcpdump抓包分析三次握手四次挥手的过程。执行tcpdump命令tcpdump -n -i ens32 host 192.168.10.10 and 42.186.113.26 >> /tmp/tcpdump.txtping game.campus.163.comcurl http://game.campus.163.comcurl http://game.campus.163.com结束后&#…

linux 高级i o函数,高级I/O函数

对于socket,最基本的输入输出函数就是,read和write。它们最基本,同样功能也是最少的。Unix中有几个函数是read/write的变种,在基本的输入输出功能上,还增加了一些非常使用的功能和特性,它们是:r…

调整linux块大小,Linux系统之更改默认块大小

查看操作系统块大小:#tune2fs -l /dev/sda1 |grep Block size ( tune2fs -l /dev/sda1可以查看更多相关文件系统的详细信息 )查看os系统页的大小: #getconf PAGESIZE查看某分区的block和inode的数量和大小,通常block比inode多tune2fs …

安装linux必不可少的一个分区,安装linux系统对硬盘分区时,必须有的两种分区类型是什么?...

安装Linux系统对硬盘分区时,必须有两种分区类型: 根分区和交换分区。根分区就是root分区,所有的东西都在这个分区内。 /swap分区是交换分区,是一定磁盘空间(分区或文件),用于将部分内存中的数据换下来,以腾…

ubuntu和linux服务器,Linux服务器系统CentOS和Ubuntu Server如何选择? | 偶乃秋辰

在秋辰看来,目前最优秀的服务器系统就是Linux,但是Linux并不能说是一套完整的操作系统,准确的说它只是系统的内核,否则也不会有那么多的发行版如:Red Hat、CentOS、Debian、Ubuntu、Fedora等。其实Linux发行版系统很多…

linux查看tcp络连接日志,Linux监控TCP连接数并触发日志记录

场景由于服务器经常半夜出现TCP连接数暴增,没办法及时查看处理,回头看记录又看不到现象,不好排查,故编写此脚本用于记录日志。脚本内容#!/bin/bash#任务计划设置此脚本每分钟执行一次即可,* * * * * sh /shell/tcp_sta…

linux cmake变量,linux – CMake错误:此项目中使用了以下变量,但它们设置为NOTFOUND...

我正在尝试使用tar文件whalebot-0.02.00.tar.gz配置whalebot爬虫.我已正确提取它:rootAdmin1:~/dls# tar xvzf whalebot-0.02.00.tar.gz之后我想配置它:rootAdmin1:~/dls/whalebot# ./configure它给了我错误:bash: ./configure: No such file…

linux命令history作用,Linux命令:history命令历史的管理及用法

bash可以保存的过去曾经执行过的命令。当某个用户登录到shell中,会读取该用户家目录中的~/.bash_history文件,并将历史命令列表保存到内存中。当用户退出当前shell时,会将内存中的历史命令列表覆盖至~/.bash_history文件。我们可以通过# hist…

aux 参数 linux,Linux下ps aux命令中STAT的参数含义(转)

$ ps auxUSER PID %CPU %MEM VSZ RSS TT STAT STARTED TIME COMMANDroot 11 100.0 0.0 0 16 ?? RL 4Dec09 98403:03.48 [idle: cpuroot 12 100.0 0.0 0 16 ?? RL 4Dec09 98430:12.35 [idle: cpust00…

linux系统nginx启动不了,nginx启动不了,求大神帮助!

服务器挂了,折腾半天Nginx都起不来,不知道咋回事,本人小白用户,求大神帮帮忙!# nginx -tnginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is oknginx: configuration file /usr/local/nginx/c…