> 백엔드 개발 > PHP 튜토리얼 > PHP Ajax留言板

PHP Ajax留言板

WBOY
풀어 주다: 2016-06-23 14:30:31
원래의
1134명이 탐색했습니다.

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


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条的时候)。

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿