PHP Ajax留言板
本案例代码已经提供下载,点击这里!
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条的时候)。
如果你有神马问题,请留言讨论!

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Alipay Php ...

JWT est une norme ouverte basée sur JSON, utilisée pour transmettre en toute sécurité des informations entre les parties, principalement pour l'authentification de l'identité et l'échange d'informations. 1. JWT se compose de trois parties: en-tête, charge utile et signature. 2. Le principe de travail de JWT comprend trois étapes: la génération de JWT, la vérification de la charge utile JWT et l'analyse. 3. Lorsque vous utilisez JWT pour l'authentification en PHP, JWT peut être généré et vérifié, et les informations sur le rôle et l'autorisation des utilisateurs peuvent être incluses dans l'utilisation avancée. 4. Les erreurs courantes incluent une défaillance de vérification de signature, l'expiration des jetons et la charge utile surdimensionnée. Les compétences de débogage incluent l'utilisation des outils de débogage et de l'exploitation forestière. 5. L'optimisation des performances et les meilleures pratiques incluent l'utilisation des algorithmes de signature appropriés, la définition des périodes de validité raisonnablement,

L'application du principe solide dans le développement de PHP comprend: 1. Principe de responsabilité unique (SRP): Chaque classe n'est responsable d'une seule fonction. 2. Principe ouvert et ferme (OCP): les changements sont réalisés par extension plutôt que par modification. 3. Principe de substitution de Lisch (LSP): les sous-classes peuvent remplacer les classes de base sans affecter la précision du programme. 4. Principe d'isolement d'interface (ISP): utilisez des interfaces à grain fin pour éviter les dépendances et les méthodes inutilisées. 5. Principe d'inversion de dépendance (DIP): les modules élevés et de bas niveau reposent sur l'abstraction et sont mis en œuvre par injection de dépendance.

Comment définir automatiquement les autorisations d'UnixSocket après le redémarrage du système. Chaque fois que le système redémarre, nous devons exécuter la commande suivante pour modifier les autorisations d'UnixSocket: sudo ...

L'article traite de la liaison statique tardive (LSB) dans PHP, introduite dans PHP 5.3, permettant une résolution d'exécution de la méthode statique nécessite un héritage plus flexible. Problème main: LSB vs polymorphisme traditionnel; Applications pratiques de LSB et perfo potentiel

Envoyant des données JSON à l'aide de la bibliothèque Curl de PHP dans le développement de PHP, il est souvent nécessaire d'interagir avec les API externes. L'une des façons courantes consiste à utiliser la bibliothèque Curl pour envoyer le post� ...

L'article traite des fonctionnalités de sécurité essentielles dans les cadres pour se protéger contre les vulnérabilités, notamment la validation des entrées, l'authentification et les mises à jour régulières.

Comment déboguer le mode CLI dans phpstorm? Lors du développement avec PHPStorm, nous devons parfois déboguer PHP en mode interface de ligne de commande (CLI) ...
