鱼有所思,鱼有所悟
做个不错的人，微笑面对人生
PHP博客
首页
新随笔
联系
聚合
管理
随笔-103 评论-37 文章-0 trackbacks-0
PHP Ajax实现页面无刷新
转载自
http://hi.baidu.com/isnono/blog/item/6a9791828bd3bebf6c8119b1.html
大家都有在网站发表评论的经历，传统的发表过程无非是：发表－>提交页面表单－>等待刷新页面，这样在网络比较拥挤的时候，往往需要漫长的等待，今天介绍用PHP+Ajax实现页面无刷新发表评论，希望对初学ajax的PHPer有所帮助。 那么首先，我们需要一个基本的ajax开发框架，文件ajax.js就包含了这个框架，代码如下：
var
http_request
=
false
;
function
send_request(url)
//
初始化，指定处理函数，发送请求的函数
{
http_request
=
false
;
//
开始初始化XMLHttpRequest对象
if
(window.XMLHttpRequest)
//
Mozilla浏览器
{
http_request
=
new
XMLHttpRequest();
if
(http_request.overrideMimeType)
//
设置MIME类别
{
http_request.overrideMimeType(
"
text/xml
"
);
}
}
else
if
(window.ActiveXObject)
//
IE浏览器
{
try
{
http_request
=
new
ActiveXObject(
"
Msxml2.XMLHttp
"
);
}
catch
(e)
{
try
{
http_request
=
new
ActiveXobject(
"
Microsoft.XMLHttp
"
);
}
catch
(e)
{
}
}
}
if
(
!
http_request)
//
异常，创建对象实例失败
{
window.alert(
"
创建XMLHttp对象失败！
"
);
return
false
;
}
http_request.onreadystatechange
=
processrequest;
//
确定发送请求方式，URL，及是否同步执行下段代码
http_request.open(
"
GET
"
,url,
true
);
http_request.send(
null
);
}
//
处理返回信息的函数
function
processrequest()
{
if
(http_request.readyState
==
4
)
//
判断对象状态
{
if
(http_request.status
==
200
)
//
信息已成功返回，开始处理信息
{
document.getElementById(reobj).innerHTML
=
http_request.responseText;
}
else
//
页面不正常
{
alert(
"
您所请求的页面不正常！
"
);
}
}
}
function
checkfourm(obj)
{
var
f
=
document.fourm;
var
newfourm
=
f.newfourm.value;
var
username
=
f.username.value;
var
id
=
f.id.value;
if
(username
==
""
)
{
document.getElementById(obj).innerHTML
=
"
<img src=images/false.gif> <font color=red>您必须先登录！</font>
"
;
return
false
;
}
else
if
(newfourm
==
""
)
{
document.getElementById(obj).innerHTML
=
"
<img src=images/false.gif> <font color=red>您还没填写评论内容！</font>
"
;
return
false
;
}
else
{
document.getElementById(obj).innerHTML
=
"
正在发送数据
"
;
send_request('sendnewfourm.php
?
username
=
'
+
username
+
'
&
newfourm
=
'
+
newfourm
+
'
&
id
=
'
+
id);
reobj
=
obj;
}
}
有一点ajax基础的通过注释，应该都可以看懂这段代码，我们可以看出，当我们开始发表评论的时候，在一个特定位置先显示：正在发送数据...。接着调用回调函数处理数据。那么请看服务器端的代码：
<?
php
header('Content
-
Type:text
/
html;charset
=
GB2312');
//
避免输出中文乱码，linux下不需要
$username
=
trim($_GET['username']);
$newfourm
=
trim($_GET['newfourm']);
$id
=
$_GET['id'];
$time
=
date(
"
Y-m-d
"
);
include('inc
/
config.inc.php');
include('inc
/
dbclass.php');
$db
=
new
db;
//
从数据库操作类生成实例
$db
->
mysql($dbhost,$dbuser,$dbpassword,$dbname);
//
调用连接参数函数
$db
->
createcon();
//
调用创建连接函数
$addsql
=
"
insert into cr_fourm values(0,'$newfourm','$username','$time',$id)
"
;
$db
->
query($addsql);
echo
"
<img src=images/pass.gif> <font color=red>评论已成功发表！</font>
"
;
//
echo $addsql;
$db
->
close();
//
关闭数据库连接
?>
由于jsvascript采用UTF8编码，在windows下采用ajax回送服务器的返回信息就会出现乱码，因此在win下应用开头第一句是非常必要的。中间那段两个包含文件是数据库操作类和数据库配置信息，我个人习惯将基本的数据库操作写成一个类，方便调用。到这里相信大家已经基本明白这个程序的工作原理了，在给出页面的HTML代码：
<
table
width
="100%"
border
="0"
cellspacing
="0"
cellpadding
="0"
>
<
tr
>
<
td
align
="center"
>
<?
php echo $rows_p[p_info];
?>
</
td
>
</
tr
>
<
tr
>
<
td
align
="center"
><
br
><
br
>
<
iframe
frameborder
="0"
scrolling
="auto"
src
="showfourm.php?picid=<?=$id;?>"
style
=HEIGHT:250px;VISIBILITY:inherit;WIDTH:
98%;Z-INDEX:2
></
iframe
>
</
td
>
</
tr
>
<
tr
>
<
td
align
="center"
><
br
><
br
>
<
div
align
="center"
id
="result"
></
div
>
<
form
name
="fourm"
>
<
table
width
="100%"
border
="0"
cellspacing
="0"
cellpadding
="0"
>
<
tr
>
<
td
height
="25"
>
快速发表评论
<
span
class
="STYLE1"
>
（必须先登陆）用户名：
<
input
name
="username"
type
="text"
value
="<?=$username?>"
readonly
>
</
span
>
</
td
>
</
tr
>
<
tr
>
<
td
height
="32"
align
="center"
valign
="middle"
><
textarea
name
="newfourm"
class
="f"
id
="newfourm"
></
textarea
></
td
>
</
tr
>
<
tr
>
<
td
height
="32"
>
<
input
name
="submit"
type
="button"
value
="发表评论"
onClick
="checkfourm('result')"
>
<
input
name
="reset"
type
="reset"
id
="reset"
value
="重新填写"
>
<
input
name
="id"
type
="hidden"
id
="id"
value
="<?php echo"
$id";?
>
">
</
td
>
</
tr
>
</
table
>
</
form
>
</
td
>
</
tr
>
</
table
>
这是我网页的一部分，也就是实现这一功能的框架代码，显示评论的页面用IFRAME（隐藏帧）调用，待信息发送完之后，只刷新IFRAME那一块就可以看到自己发的评论，从发送到查看，整个过程都不需要刷新整个页面。好了，最后看看效果图吧！^_^
1.点击“提交”，开始发送数据
2. 数据发送成功
3. 刷新评论列表
posted on 2007-03-16 18:02
鱼有所思
阅读(1258)
评论(0)
编辑
收藏
引用
网摘
所属分类:
AJAX
只有注册用户
登录
后才能发表评论。
网站导航:
IT新闻
博客园
BlogJava
博客生活
IT博客网
C++博客
程序员招聘
<
2007年3月
>
日
一
二
三
四
五
六
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
留言簿
(79)
给我留言
查看公开留言
查看私人留言
随笔分类
AJAX(30)
css
Document(2)
HTML(15)
java(2)
jsp(2)
LINUX(4)
MySQL(20)
PHP(34)
随笔档案
2015年4月 (1)
2014年12月 (1)
2014年11月 (1)
2014年9月 (1)
2014年8月 (1)
2014年7月 (2)
2014年4月 (1)
2014年1月 (1)
2013年8月 (2)
2013年7月 (1)
2013年4月 (3)
2013年3月 (2)
2012年5月 (1)
2012年4月 (1)
2012年2月 (2)
2012年1月 (1)
2011年11月 (2)
2011年8月 (1)
2011年5月 (2)
2010年6月 (1)
2010年4月 (2)
2010年3月 (1)
2010年2月 (1)
2009年12月 (1)
2009年11月 (5)
2009年10月 (2)
2009年9月 (2)
2009年8月 (1)
2009年3月 (2)
2009年2月 (1)
2009年1月 (1)
2008年12月 (1)
2008年11月 (8)
2008年10月 (2)
2008年9月 (5)
2008年8月 (2)
2008年7月 (3)
2008年6月 (2)
2008年5月 (2)
2008年4月 (4)
2008年2月 (1)
2008年1月 (1)
2007年11月 (2)
2007年10月 (1)
2007年7月 (2)
2007年5月 (5)
2007年4月 (5)
2007年3月 (10)
相册
鱼有所思
php
【孟子E章】
fengyun的个人空间 mysql优化
isno relax world的PHP技术博客
http://www.isnono.com/index.php?mode=1&page=1
阿赖的个性空间
寒松的博客
http://expectforever.bokee.com/index.html
好东西
今晚好梦博客－很多好收藏
流水孟春
易中求
php linux
搜索
最新评论
1. re: 需求分析文档都包括哪些内容
评论内容较长,点击标题查看
--鱼有所思
2. re: js获取本机ip地址、mac地址、机器名
评论内容较长,点击标题查看
--鱼有所思
3. re: Eclipse跑通第一个已有的jsp项目
突然想起来一件事,有一次用Eclipse写php代码，结果用浏览器浏览的时候，汉字全为乱码，当时知道是编码的问题，但是最后也没弄好．．．．．．
--卢中阳
4. re: 如何学习JSP
评论内容较长,点击标题查看
--鱼有所思
5. re: 表格隔行变色，鼠标放上变不同颜色。兼容IE,FF firefox
评论内容较长,点击标题查看
--鱼有所思
阅读排行榜
1. js中innerHTML与innerText的用法与区别(109276)
2. Keycode对照表(54517)
3. JS转义 escape()、encodeURI()、encodeURIComponent()区别详解(35120)
4. Js字符串操作函数大全(26837)
5. mysql insert的几点操作(DELAYED 、IGNORE、ON DUPLICATE KEY UPDATE )(21180)