PHP Ajax留言板

Jun 23, 2016 pm 02:30 PM

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


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);
Copier après la connexion

编写用户留言界面
留言界面非常简洁,就是一个表单,在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>
Copier après la connexion

异步请求
使用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对象");      }  }
Copier après la connexion


创建查询字符串
function createQueryString(){    var email = document.getElementById("email").value;    var content = document.getElementById("content").value;    var queryString = "email="+ email + "&content="+ content ;    //alert(queryString);    return queryString;  }
Copier après la connexion

以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);  }
Copier après la connexion

处理状态变更,解析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);  }
Copier après la connexion

服务端处理异步请求
然后我们看下服务端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;?>
Copier après la connexion

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

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

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

11 meilleurs scripts de raccourcissement d'URL PHP (gratuit et premium) 11 meilleurs scripts de raccourcissement d'URL PHP (gratuit et premium) Mar 03, 2025 am 10:49 AM

Les longues URL, souvent encombrées de mots clés et de paramètres de suivi, peuvent dissuader les visiteurs. Un script de raccourcissement d'URL offre une solution, créant des liens concis idéaux pour les médias sociaux et d'autres plateformes. Ces scripts sont utiles pour les sites Web individuels

Introduction à l'API Instagram Introduction à l'API Instagram Mar 02, 2025 am 09:32 AM

À la suite de son acquisition de haut niveau par Facebook en 2012, Instagram a adopté deux ensembles d'API pour une utilisation tierce. Ce sont l'API graphique Instagram et l'API d'affichage de base Instagram. En tant que développeur créant une application qui nécessite des informations à partir d'un

Travailler avec les données de session Flash dans Laravel Travailler avec les données de session Flash dans Laravel Mar 12, 2025 pm 05:08 PM

Laravel simplifie la gestion des données de session temporaires à l'aide de ses méthodes de flash intuitives. Ceci est parfait pour afficher de brefs messages, alertes ou notifications dans votre application. Les données ne persistent que pour la demande ultérieure par défaut: $ demande-

Construisez une application React avec un Laravel Back End: Partie 2, React Construisez une application React avec un Laravel Back End: Partie 2, React Mar 04, 2025 am 09:33 AM

Il s'agit de la deuxième et dernière partie de la série sur la construction d'une application React avec un back-end Laravel. Dans la première partie de la série, nous avons créé une API RESTful utilisant Laravel pour une application de liste de base sur le produit. Dans ce tutoriel, nous serons Dev

Misque de réponse HTTP simplifié dans les tests Laravel Misque de réponse HTTP simplifié dans les tests Laravel Mar 12, 2025 pm 05:09 PM

Laravel fournit une syntaxe de simulation de réponse HTTP concise, simplifiant les tests d'interaction HTTP. Cette approche réduit considérablement la redondance du code tout en rendant votre simulation de test plus intuitive. L'implémentation de base fournit une variété de raccourcis de type de réponse: Utiliser illuminate \ support \ faades \ http; Http :: faux ([[ 'google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>

Curl dans PHP: Comment utiliser l'extension PHP Curl dans les API REST Curl dans PHP: Comment utiliser l'extension PHP Curl dans les API REST Mar 14, 2025 am 11:42 AM

L'extension PHP Client URL (CURL) est un outil puissant pour les développeurs, permettant une interaction transparente avec des serveurs distants et des API REST. En tirant parti de Libcurl, une bibliothèque de transfert de fichiers multi-protocol très respectée, PHP Curl facilite Efficient Execu

12 meilleurs scripts de chat PHP sur Codecanyon 12 meilleurs scripts de chat PHP sur Codecanyon Mar 13, 2025 pm 12:08 PM

Voulez-vous fournir des solutions instantanées en temps réel aux problèmes les plus pressants de vos clients? Le chat en direct vous permet d'avoir des conversations en temps réel avec les clients et de résoudre leurs problèmes instantanément. Il vous permet de fournir un service plus rapide à votre personnalité

Annonce de l'enquête sur la situation en 2025 PHP Annonce de l'enquête sur la situation en 2025 PHP Mar 03, 2025 pm 04:20 PM

L'enquête sur le paysage PHP 2025 étudie les tendances actuelles de développement du PHP. Il explore l'utilisation du cadre, les méthodes de déploiement et les défis, visant à fournir des informations aux développeurs et aux entreprises. L'enquête prévoit la croissance de la PHP moderne versio

See all articles