PHP AJAX 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 an abbreviation, but a noun created by Jesse James Gaiiett, which refers to the creation of an interactive.

The core of Ajax is the JavaScript object XMLHttpRequest. This object was first introduced in Internet Explorer 5, which is a technique that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and handle the response without blocking the user.


In the example of this article, in order to give beginners a more profound understanding of the Ajax implementation principle, without using the framework of jquery, the entire asynchronous request is done by writing JavaScript.

This example consists of 3 files, respectively:
config.php Connection Database
message.php user access to the message interface, when the user sends a message, the message results in the form of an asynchronous request sent to message_ajax.php.
message_ajax.php processing of asynchronous requests from message.php and returning results

Here I follow the actual steps to illustrate:
Creating databases and tables to keep the problem from getting complicated, here I created a table t_message in the test database. The SQL statements are as follows:

CREATE TABLE t_message (ID int auto_increment primary key,email varchar (), content text);

Write User Message interface
Message interface is very concise, is a form, in the message.php add the following HTML code is as follows:

Asynchronous request
The basic steps for sending a request using the XMLHttpRequest object are as follows: Creating a XMLHttpRequest reference tells the XMLHttpRequest object which function handles the change of the XMLHttpRequest object state. To do this, set the onReadyStateChange property to specify the requested property. Open () sends the request to the server. The Send () Xmlhttp.responsetext provides the response as a string

To create a XMLHttpRequest reference

var xmlHttp;  function Createxmlhttprequest () {    if (window. ActiveXObject)      {         xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");      }      else if (window. XMLHttpRequest)      {        xmlHttp = new XMLHttpRequest ();      } else{        Alert ("Browser does not support XMLHttpRequest object");}  }

To create a 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 request as 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);  }

Processing state changes, parsing the results returned by message_ajax.php

function Handlestatechange () {     if (xmlhttp.readystate = = 4) {        if (xmlhttp.status = =) {           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);  }

Service-side processing of asynchronous requests
Then we look at how the server message_ajax.php handles the request.

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

As can be seen from the above code, the server first needs to receive the request sent by the client, in this case the parameters sent is email and content.
The server then saves the data to the database and queries the last 10 messages in the database, constructs the HTML string, and echoes.
So the client can receive, to achieve no refresh display the latest 10 messages (of course, need to leave a message over 10).

If you have a god horse problem, please leave a message to discuss!

