PHPAjax message board

PHPAjax message board this case code has been provided for download. click here!

AJAX is "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML). AJAX is not a acronym, but a term created by Jesse James Gaiiett. it is a kind of interactive creation.

The core of Ajax is the JavaScript Object XmlHttpRequest. This object was first introduced in Internet Explorer 5. it is a technology that supports asynchronous requests. In short, XmlHttpRequest allows you to use JavaScript to request and process responses to the server without blocking users.


In this example, in order to give beginners a deeper understanding of the implementation principles of ajax, without using jquery and other frameworks, the entire asynchronous request is completed by writing javascript.

This example contains three files:
Config. php connect to the database
The message. php user accesses the message Interface. when a user sends a message, the message result is sent to message_ajax.php asynchronously.
Message_ajax.php processes asynchronous requests from message. php and returns results

The following describes the actual steps:
Create a database and a table so that the problem does not become complex. here I create a table t_message in the test database. The SQL statement is as follows:

create table t_message(id int auto_increment primary key,email varchar(100),content text);

Compile user Message Interface
The message interface is a simple form. add the following html code to message. php:

Asynchronous request
The basic steps for sending a request using the XMLHttpRequest object are as follows: Creating an XMLHttpRequest reference tells the XMLHttpRequest object which function will handle the status change of the XMLHttpRequest object. to do this, you must set the onreadystatechange attribute to specify the request attribute. Open () sends the request to the server. Send () xmlHttp. responseText provides the response as a string

Create an XMLHttpRequest reference

Var xmlHttp; function createXMLHttpRequest () {if (window. activeXObject) {xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");} else if (window. XMLHttpRequest) {xmlHttp = new XMLHttpRequest ();} else {alert ("The browser does not support XMLHttpRequest objects ");}}

Create query string

function createQueryString(){    var email = document.getElementById("email").value;    var content = document.getElementById("content").value;    var queryString = "email="+ email + "&content="+ content ;    //alert(queryString);    return queryString;  }

Send asynchronous requests in POST mode

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);  }

Process status changes and parse the results returned by 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);  }

The server processes asynchronous requests.
Then let's take a look at how message_ajax.php processes the request.

 ";      while($message = mysql_fetch_array($result)){      $onemessage = "Email:".$message['email']."Content:".$message['content']."";$responseText = $responseText.$onemessage;}$responseText = $responseText."";echo $responseText;?>

From the code above, we can see that the server first needs to receive requests sent from the client. In this example, the parameters sent are email and content.
Then, the server saves the data to the database, queries the latest 10 messages in the database, constructs the HTML string, and returns the echo.
Therefore, the client can receive the latest 10 messages without refreshing them (of course, when there are more than 10 messages ).

If you have any questions, please leave a message to discuss them!