Hướng dẫn dùng ajax w3schools trong PHP

AJAX is used to create more interactive applications.

AJAX PHP Example

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:

Example

Start typing a name in the input field below:

Suggestions:

Example Explained

In the example above, when a user types a character in the input field, a function called "showHint[]" is executed.

The function is triggered by the onkeyup event.

Here is the HTML code:

Example

function showHint[str] {
  if [str.length == 0] {
    document.getElementById["txtHint"].innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest[];
    xmlhttp.onreadystatechange = function[] {
      if [this.readyState == 4 && this.status == 200] {
        document.getElementById["txtHint"].innerHTML = this.responseText;
      }
    };
    xmlhttp.open["GET", "gethint.php?q=" + str, true];
    xmlhttp.send[];
  }
}

Start typing a name in the input field below:

Suggestions:

Run example »

Code explanation:

First, check if the input field is empty [str.length == 0]. If it is, clear the content of the txtHint placeholder and exit the function.

However, if the input field is not empty, do the following:

• Create an XMLHttpRequest object
• Create the function to be executed when the server response is ready
• Send the request off to a PHP file [gethint.php] on the server
• Notice that q parameter is added to the url [gethint.php?q="+str]
• And the str variable holds the content of the input field

The PHP File - "gethint.php"

The PHP file checks an array of names, and returns the corresponding name[s] to the browser:

AJAX can be used for interactive communication with a database.

AJAX Database Example

The following example will demonstrate how a web page can fetch information from a database with AJAX:

Example

Person info will be listed here...

Example Explained - The MySQL Database

The database table we use in the example above looks like this:

Example Explained

In the example above, when a user selects a person in the dropdown list above, a function called "showUser[]" is executed.

The function is triggered by the onchange event.

Here is the HTML code:

Example

function showUser[str] {
  if [str == ""] {
    document.getElementById["txtHint"].innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest[];
    xmlhttp.onreadystatechange = function[] {
      if [this.readyState == 4 && this.status == 200] {
        document.getElementById["txtHint"].innerHTML = this.responseText;
      }
    };
    xmlhttp.open["GET","getuser.php?q="+str,true];
    xmlhttp.send[];
  }
}

  Select a person:
  Peter Griffin
  Lois Griffin
  Joseph Swanson
  Glenn Quagmire
 

Run example »

Code explanation:

First, check if person is selected. If no person is selected [str == ""], clear the content of txtHint and exit the function. If a person is selected, do the following:

• Create an XMLHttpRequest object
• Create the function to be executed when the server response is ready
• Send the request off to a file on the server
• Notice that a parameter [q] is added to the URL [with the content of the dropdown list]

The PHP File

The page on the server called by the JavaScript above is a PHP file called "getuser.php".

The source code in "getuser.php" runs a query against a MySQL database, and returns the result in an HTML table:

table {
  width: 100%;
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid black;
  padding: 5px;
}

th {text-align: left;}

Explanation: When the query is sent from the JavaScript to the PHP file, the following happens:

1. PHP opens a connection to a MySQL server
2. The correct person is found
3. An HTML table is created, filled with data, and sent back to the "txtHint" placeholder