.$ajax()<\/code>, for both.<\/li>\n<\/ul>\nBefore starting, we need to include the jQuery source in the HTML page:<\/p>\n
<head>\r\n\u00a0\u00a0\u00a0 <script src=\"https:\/\/code.jquery.com\/jquery-1.12.4.min.js\"><\/script>\r\n <!-- ... --->\r\n<\/head><\/pre>\n3.4.1. $.get()<\/h4>\n The following JavaScript code is for sending a GET request with $.get()<\/code> method:<\/p>\najax.js<\/em><\/span><\/p>\n$(document).ready(function() {\r\n\u00a0\u00a0\u00a0 $('#form-submit').click(function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var sendValue = $('#name').val();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.get('greeting.php', { 'name' : sendValue }, function(data, status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (status === 'success') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#ajax-response').html(data);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 })\r\n\u00a0\u00a0\u00a0 });\r\n});<\/pre>\nAs we can see, is very simple:<\/p>\n
\nThe first parameter is the server side page the request will be sent to.<\/li>\n The second parameter is a object literal with the values that we want to send with the request.<\/li>\n Finally, a callback function with the received data from the server, and the status of the request.<\/li>\n<\/ul>\nNote that we should check if the status indicates an error in the request, to act accordingly.<\/p>\n
3.4.2. $.post()<\/h4>\n For POST requests, is exactly the same as with GET, but calling $.get()<\/code> method:<\/p>\najax.js<\/em><\/span><\/p>\n$(document).ready(function() {\r\n\u00a0\u00a0\u00a0 $('#form-submit').click(function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var sendValue = $('#name').val();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.post('greeting.php', { 'name' : sendValue }, function(data, status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (status === 'success') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#ajax-response').html(data);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 })\r\n\u00a0\u00a0\u00a0 });\r\n});<\/pre>\n3.4.3. $.ajax()<\/h4>\n Finally, there’s a third method. The $.ajax()<\/code> method is, probably, the best<\/em> option. Let’s see an example:<\/p>\najax.js<\/em><\/span><\/p>\n$(document).ready(function() {\r\n\u00a0\u00a0\u00a0 $('#form-submit').click(function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var sendValue = $('#name').val();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.ajax({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url: 'greeting.php',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data: {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'name' : sendValue\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: 'GET',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 success: function(data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#ajax-response').html(data);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 error: function(xhr, status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ ...\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 });\r\n});<\/pre>\nAs we can see, this can be considered tidier, more readable and maintainable, since we use a object literal for each element, and because we specify the method with a string, so we could use a variable.<\/p>\n
4. Building a simple chat: a more thorough example<\/h2>\n We have seen pages with a simple AJAX request, just printing a hardcoded message. In this section, we will see a more realistic example, including a database. For this, we will build a simple chat.<\/p>\n
4.1. Directory structure<\/h3>\n Before starting, let’s see the directory structure that we will follow:<\/p>\n
.\r\n\u251c\u2500\u2500 css\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 styles.css\r\n\u251c\u2500\u2500 database.sql\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 js\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 ajax.js\r\n\u2514\u2500\u2500 php\r\n\u00a0\u00a0\u00a0 \u251c\u2500\u2500 db.php\r\n\u00a0\u00a0\u00a0 \u251c\u2500\u2500 readMessages.php\r\n\u00a0\u00a0\u00a0 \u2514\u2500\u2500 saveMessage.php<\/pre>\n4.2. HTML<\/h3>\n The HTML can be extremely simple:<\/p>\n
index.html<\/em><\/span><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\u00a0\u00a0\u00a0 <meta charset=\"UTF-8\">\r\n\u00a0\u00a0\u00a0 <title>AJAX chat<\/title>\r\n\u00a0\u00a0\u00a0 <script src=\"https:\/\/code.jquery.com\/jquery-1.12.4.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0 <script src=\"js\/ajax.js\"><\/script>\r\n\u00a0\u00a0\u00a0 <link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/styles.css\">\r\n<\/head>\r\n<body>\r\n\u00a0\u00a0\u00a0 <div id=\"chat-wrapper\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"chat-messages\"><\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <form id=\"chat-form\" action=\"#\" method=\"POST\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" id=\"chat-input\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/form>\r\n\u00a0\u00a0\u00a0 <\/div>\r\n<\/body>\r\n<\/html><\/pre>\nWe just need a div to display the messages, and an input for sending the messages.<\/p>\n
4.3. Stylesheet<\/h3>\n Just the simplest styling for the chat:<\/p>\n
styles.css<\/em><\/span><\/p>\n#chat-wrapper {\r\n\u00a0\u00a0\u00a0 width: 60%;\r\n\u00a0\u00a0\u00a0 margin: auto;\r\n}\r\n\r\n#chat-messages {\r\n\u00a0\u00a0\u00a0 border: 1px solid gray;\r\n\u00a0\u00a0\u00a0 height: 400px;\r\n}\r\n\r\n#chat-input {\r\n\u00a0\u00a0\u00a0 width: 99%;\r\n\u00a0\u00a0\u00a0 height: 30px;\r\n}\r\n\r\n.chat-message {\r\n\u00a0\u00a0\u00a0 display: block;\r\n}\r\n\r\n.chat-message .ip {\r\n\u00a0\u00a0\u00a0 font-weight: bold;\r\n}<\/pre>\n4.4. Database<\/h3>\n We will have a very simple database, with a single table, with two columns. Apart from the messages, we will save the IP of the sender, to be able to identify each message.<\/p>\n
database.sql<\/em><\/span><\/p>\nCREATE DATABASE IF NOT EXISTS chat;\r\n\r\nGRANT ALL ON `chat`.* TO 'chat'@'localhost' IDENTIFIED BY 'chat'; -- Creates user if it does not exist yet.\r\n\r\nUSE chat;\r\n\r\nCREATE TABLE messages(\r\n\u00a0\u00a0\u00a0 message VARCHAR(1024),\r\n\u00a0\u00a0\u00a0 ip\u00a0\u00a0\u00a0\u00a0\u00a0 VARCHAR(15)\r\n);<\/pre>\nTo apply it, just access the MySQL command line, e.g., with root:<\/p>\n
mysql --user=root --password<\/pre>\nAfter logging in correctly, paste the SQL sentences.<\/p>\n
4.5. PHP<\/h3>\n In this section, we will see the part of the application that communicates with the database.<\/p>\n
We will create a single script for establishing the connection:<\/p>\n
db.php<\/em><\/span><\/p>\n<?php\r\n\r\ndefine('HOST', 'localhost');\r\ndefine('USERNAME', 'chat');\r\ndefine('PASSWORD', 'chat');\r\ndefine('DATABASE', 'chat');\r\ndefine('PORT', 3306);\r\n\r\n\/**\r\n\u00a0* Creates the connection to the database.\r\n\u00a0*\r\n\u00a0* @return Connection object.\r\n\u00a0*\/\r\nfunction connect() {\r\n\u00a0\u00a0\u00a0 $connection = mysqli_connect(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HOST,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 USERNAME,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 PASSWORD,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 DATABASE,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 PORT\r\n\u00a0\u00a0\u00a0 );\r\n\r\n\u00a0\u00a0\u00a0 return $connection;\r\n}<\/pre>\nThen, we will have two scripts, one for saving the messages, and another for retrieving them.<\/p>\n
The following script is for saving the messages, which, as you can see, only makes an insertion of the received message via POST method, and the IP of the client.<\/p>\n
saveMessage.php<\/em><\/span><\/p>\n<?php\r\n\r\nrequire_once('db.php');\r\n\r\n\/**\r\n\u00a0* Creates a row in the messages table.\r\n\u00a0*\r\n\u00a0* @param $connection The connection to the database.\r\n\u00a0* @param string $message The message to save.\r\n\u00a0* @param string $ip The ip of the sender.\r\n\u00a0*\/\r\nfunction insertMessage($connection, $message, $ip) {\r\n\u00a0\u00a0\u00a0 $sql = 'INSERT INTO messages (message, ip) '\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 . 'VALUES (?, ?)';\r\n\r\n\u00a0\u00a0\u00a0 $statement = $connection->prepare($sql);\r\n\u00a0\u00a0\u00a0 $statement->bind_param('ss', $message, $ip);\r\n\r\n\u00a0\u00a0\u00a0 $statement->execute();\r\n}\r\n\r\n\/\/ Flow starts here.\r\n\r\n$message = $_POST['message'];\r\n$ip = $_SERVER['REMOTE_ADDR'];\r\n\r\n$connection = connect();\r\n\r\ninsertMessage($connection, $message, $ip);\r\n\r\nmysqli_close($connection);<\/pre>\nAnd, then, we need to read them. We just have to iterate through the records of the table, constructing the response, like in the following script.<\/p>\n
readMessages.php<\/em><\/span><\/p>\n<?php\r\n\r\nrequire_once('db.php');\r\n\r\n\/**\r\n\u00a0* Reads the messages from the database.\r\n\u00a0*\r\n\u00a0* @param $connection The connection to the database.\r\n\u00a0* @return string The existing messages in HTML format.\r\n\u00a0*\/\r\nfunction readMessages($connection) {\r\n\u00a0\u00a0\u00a0 $sql = 'SELECT message, ip '\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 . 'FROM messages';\r\n\r\n\u00a0\u00a0\u00a0 $result = mysqli_query($connection, $sql);\r\n\r\n\u00a0\u00a0\u00a0 $messages = '';\r\n\r\n\u00a0\u00a0\u00a0 while ($row = mysqli_fetch_array($result, MYSQLI_NUM)) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $message = '<span class=\"chat-message\">';\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $message .= '<span class=\"ip\">' . $row[1] . '<\/span>: ';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $message .= $row[0];\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $message .= '<\/span>';\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $messages .= $message;\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 return $messages;\r\n}\r\n\r\n\/**\r\n\u00a0* Deletes the messages from the database, once read.\r\n\u00a0*\r\n\u00a0* @param $connection Connection to the database.\r\n\u00a0*\/\r\nfunction deleteMessages($connection) {\r\n\u00a0\u00a0\u00a0 $sql = 'DELETE FROM messages';\r\n\r\n\u00a0\u00a0\u00a0 mysqli_query($connection, $sql);\r\n}\r\n\r\n\/\/ Flow starts here.\r\n\r\n$connection = connect();\r\n\r\n$messages = readMessages($connection);\r\ndeleteMessages($connection);\r\nmysqli_close($connection);\r\n\r\necho $messages;<\/pre>\nAfter creating the response, we delete the existing records, not to repeat the response.<\/p>\n
4.6. JavaScript<\/h3>\n Finally, we need the JavaScript code for the AJAX requests. We will see that, actually, is pretty easy:<\/p>\n
ajax.js<\/em><\/span><\/p>\n$(document).ready(function() {\r\n\u00a0\u00a0\u00a0 $('#chat-form').submit(function(event) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 event.preventDefault();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var message = $('#chat-input').val();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sendMessage(message);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#chat-input').val('');\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 \/**\r\n\u00a0\u00a0\u00a0\u00a0 * Sends the message to the server.\r\n\u00a0\u00a0\u00a0\u00a0 *\r\n\u00a0\u00a0\u00a0\u00a0 * @param String message The message introduced by the user.\r\n\u00a0\u00a0\u00a0\u00a0 *\/\r\n\u00a0\u00a0\u00a0 function sendMessage(message) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.ajax({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url: 'php\/saveMessage.php',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data: {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'message' : message\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: 'POST'\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 \/**\r\n\u00a0\u00a0\u00a0\u00a0 * Reads the messages saved in the server, and displays them.\r\n\u00a0\u00a0\u00a0\u00a0 *\/\r\n\u00a0\u00a0\u00a0 function readMessages() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.ajax({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url: 'php\/readMessages.php',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: 'GET',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 success: function(data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 addMessage(data);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 \/**\r\n\u00a0\u00a0\u00a0\u00a0 * Adds a message to the messages div.\r\n\u00a0\u00a0\u00a0\u00a0 *\r\n\u00a0\u00a0\u00a0\u00a0 * @param String message The message to add.\r\n\u00a0\u00a0\u00a0\u00a0 *\/\r\n\u00a0\u00a0\u00a0 function addMessage(message) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 message = '<span class=\"chat-message\">' + message + '<\/span>';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#chat-messages').append(message);\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 setInterval(function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 readMessages();\r\n\u00a0\u00a0\u00a0 }, 100);\r\n});<\/pre>\nWe can see that there’s no difficulty. We just need to make a request for sending the message to the server, which is triggered on form submit; and another to retrieve them, for which we need to set an interval, in order to update the displayed messages automatically.<\/p>\n
As said before, we should take care of failed request, to try them again, notify the user about it, etc.<\/p>\n
An important point in this script is that we prevent the default form behavior (line 3), because, otherwise, the form will submit, and a synchronous communication would start (as said in 3.2. section).<\/p>\n
4.7. Result<\/h3>\n The following is a screenshot of how looks the chat:<\/p>\n1. Chat output example.<\/figcaption><\/figure>\n5. Summary<\/h2>\n This tutorial has shown how to use AJAX technology to establish an asynchronous communication with the server, where we have used PHP. We have started from the lowest level, with pure JavaScript, to see how the AJAX internals work; and then more appropriate solutions, in terms of difficulty, readability and maintainability, with jQuery, seeing every different option. Finally, we have built a simple chat, to look at AJAX in a more realistic scenario.<\/p>\n
6. Download the source code<\/h2>\n This was a tutorial of AJAX and PHP.<\/p>\n
Download<\/strong>AJAXPHPTutorial<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"AJAX is a technology that allows to establish asynchronous communication between the client and the server. That is, to allow a communication between the two points in the background. In this tutorial we will see how to use this technology, that involves JavaScript, which PHP in the server side. …<\/p>\n","protected":false},"author":160,"featured_media":930,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[34,82,122],"class_list":["post-14519","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-ajax","tag-javascript","tag-php"],"yoast_head":"\n
AJAX PHP Tutorial - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"AJAX is a technology that allows to establish asynchronous communication between the client and the server. That is, to allow a communication between the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AJAX PHP Tutorial - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"AJAX is a technology that allows to establish asynchronous communication between the client and the server. That is, to allow a communication between the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-12T13:15:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-09T08:29:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Toni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Toni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/\"},\"author\":{\"name\":\"Toni\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966\"},\"headline\":\"AJAX PHP Tutorial\",\"datePublished\":\"2016-09-12T13:15:26+00:00\",\"dateModified\":\"2018-01-09T08:29:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/\"},\"wordCount\":1683,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg\",\"keywords\":[\"Ajax\",\"javascript\",\"php\"],\"articleSection\":[\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/\",\"name\":\"AJAX PHP Tutorial - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg\",\"datePublished\":\"2016-09-12T13:15:26+00:00\",\"dateModified\":\"2018-01-09T08:29:23+00:00\",\"description\":\"AJAX is a technology that allows to establish asynchronous communication between the client and the server. That is, to allow a communication between the\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PHP\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/php\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"AJAX PHP Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966\",\"name\":\"Toni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g\",\"caption\":\"Toni\"},\"url\":\"https:\/\/www.webcodegeeks.com\/author\/julen-pardo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AJAX PHP Tutorial - Web Code Geeks - 2026","description":"AJAX is a technology that allows to establish asynchronous communication between the client and the server. That is, to allow a communication between the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"AJAX PHP Tutorial - Web Code Geeks - 2026","og_description":"AJAX is a technology that allows to establish asynchronous communication between the client and the server. That is, to allow a communication between the","og_url":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-09-12T13:15:26+00:00","article_modified_time":"2018-01-09T08:29:23+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg","type":"image\/jpeg"}],"author":"Toni","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Toni","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/"},"author":{"name":"Toni","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966"},"headline":"AJAX PHP Tutorial","datePublished":"2016-09-12T13:15:26+00:00","dateModified":"2018-01-09T08:29:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/"},"wordCount":1683,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg","keywords":["Ajax","javascript","php"],"articleSection":["PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/","url":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/","name":"AJAX PHP Tutorial - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg","datePublished":"2016-09-12T13:15:26+00:00","dateModified":"2018-01-09T08:29:23+00:00","description":"AJAX is a technology that allows to establish asynchronous communication between the client and the server. That is, to allow a communication between the","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/php-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/php\/ajax-php-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"PHP","item":"https:\/\/www.webcodegeeks.com\/category\/php\/"},{"@type":"ListItem","position":3,"name":"AJAX PHP Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/54a7be647b0b871cff41cbf3d2a95966","name":"Toni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21c1661474c78b4757355b8beef9ab1d14f490ee3a3e67392f4e618d36643d4c?s=96&d=mm&r=g","caption":"Toni"},"url":"https:\/\/www.webcodegeeks.com\/author\/julen-pardo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/14519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=14519"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/14519\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/930"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=14519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=14519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=14519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/09\/chat.jpg\")