php实现博客留言板功能,Ajax 三种方法实现留言板功能之 源生方法

303 阅读 字号小中大

赞94 踩 0 分享

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代码如下：



异步请求
使用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是怎样处理请求的

include_once(config.php);
￥email = strip_tags(￥_POST['email']);
￥content = strip_tags(￥_POST['content']);
￥sql1 = insert into t_message values(NULL, ' . ￥email . ' ,'.￥content.');

mysql_query(￥sql1);

￥sql = SELECT * FROM “t_message“ order by id desc LIMIT 10;
￥result = mysql_query(￥sql);
￥responseText = ;
while(￥message = mysql_fetch_array(￥result)){
￥onemessage =







;
￥responseText = ￥responseText.￥onemessage;
}
￥responseText = ￥responseText.

Email:	.￥message['email'].
Content:	.￥message['content'].

;
echo ￥responseText;

?>

从上面代码可以看到，服务端首先需要接收客户端发送过来的请求，在本例中发送的参数就是email和content。
然后，服务端将这些数据保存到数据库中，并查询出数据库中最近的10条留言信息，构造成HTML字符串，并echo。
于是客户端便可接收到，实现无刷新显示最近的10条留言(当然需要留言超过10条的时候)。