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

2024-10-31 291 阅读 建站问题 字号小中大

赞0 踩 0 评论 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代码如下：

<div style="width:800px;margin:0 auto;">
    <form action="#" >
     <fieldset>
    <legend>Leave Message Here</legend>
    <table>
        <tr>
            <td>Email:</td>
            <td><input name="email"  id="email" type="email" /></td>
        </tr>
        <tr>
            <td>Content:</td>
            <td><textarea name="content" id="content" cols="80" rows="6" ></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input name="button1" type="button" value="Post" onclick="doRequestUsingPOST()" /></td>
        </tr>
    </table>
  </fieldset>
 </form>
</div>

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

<?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 = "<table>";
      while(￥message = mysql_fetch_array(￥result)){
        ￥onemessage = "
                <tr>
                    <th style='background-color:gray;'>Email:</th>
                    <td>".￥message['email']."</td>
                </tr>
                <tr style='border-bottom:1px gray dashed;'>
                    <th style='background-color:gray;'>Content:</th>
                    <td>".￥message['content']."</td>
                </tr>";
                ￥responseText = ￥responseText.￥onemessage;
            }
            ￥responseText = ￥responseText."</table>";
            echo ￥responseText;
 
?>

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