Implementing AJAX in PHP. Asynchronous JavaScript and XML

AJAX in PHP, Implementing AJAX in PHP. Asynchronous JavaScript and XML, AJAX Working Procedure , XMLHttpRequest object

1. AJAX in PHP by Ms.V . SANTHI Dept. of Computer Applications, Bon Secours College for Women, Thanjavur.

2. What is PHP? PHP is an open-source server-side  scripting language .   It is used for a wide range of different tasks, including generating dynamic page content. PHP scripts are executed on the web server. PHP files contain HTML, CSS, JavaScript, and PHP code.  Once PHP code is executed on the server, it returns to the web browser as HTML code. PHP is very popular with web developers because it runs on almost all servers and most operating systems.

3. PHP is used for: Creating and editing files on the server  Collecting data from web forms  Sending and receiving cookies  Adding, deleting, and modifying data in your database  Encrypting data  Controlling user-access  Furthermore, PHP code outputting HTML, XML, Flash movies, PDFs, images, and XHTML. 

4. What is AJAX? AJAX Asynchronous JavaScript and XML. AJAX is not a new programming language, but a new way to use existing standards. AJAX is a technique for creating fast and dynamic web pages. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.

5. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

6. Examples of applications using AJAX Google Maps, Gmail, Youtube , and Facebook tabs.

7. Google Suggest AJAX was made popular in 2005 by Google, with Google Suggest. Google Suggest  is using AJAX to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions. AJAX is browser and  platform-independent . However, as previously mentioned, AJAX is used on the client-side and will still require server-side communication. This is where PHP enters the conversation. 

8. How AJAX Works?

9. AJAX Working Procedure : 1. An event occurs in a web page (the page is loaded, a button is clicked) 2. An XMLHttpRequest object is created by JavaScript 3. The XMLHttpRequest object sends a request to a web server 4. The server processes the request 5. The server sends a response back to the web page 6. The response is read by JavaScript 7. Proper action (like page update) is performed by JavaScript

10. AJAX is Based on Internet Standards AJAX is based on internet standards, and uses a combination of: XMLHttpRequest object (to exchange data asynchronously with a server/to request data from a web server) JavaScript/DOM (to display/interact with the information) CSS (to style the data) XML (often used as the format for transferring data)

11. AJAX - The XMLHttpRequest Object To exchange data with a server behind the scenes.  Create an XMLHttpRequest Object: All modern browsers (Chrome, Firefox, Edge (and IE7+), Safari, Opera) have a built-in XMLHttpRequest object. Syntax for creating an XMLHttpRequest object: variable  = new  XMLHttpRequest (); Example : var   xhttp = new  XMLHttpRequest ();

12. XMLHttpRequest Object Methods Method Description new XMLHttpRequest() Creates a new XMLHttpRequest object abort() Cancels the current request getAllResponseHeaders () Returns header information getResponseHeader() Returns specific header information open( method,url,async,user,psw ) Specifies the request send() Sends the request to the server Used for GET requests send( string ) Sends the request to the server. Used for POST requests setRequestHeader () Adds a label/value pair to the header to be sent

13. AJAX - Send a Request To a Server The XMLHttpRequest object is used to exchange data with a server. Send a Request To a Server To send a request to a server, the open() and send() methods of the XMLHttpRequest object is used: xhttp.open ("GET", "ajax_info.txt", true); xhttp.send ();

14. Methods to Send a Request To a Server Method Description open( method, url , async ) Specifies the type of request method : the type of request: GET or POST url : the server (file) location async : true (asynchronous) or false (synchronous) send() Sends the request to the server (used for GET) send( string ) Sends the request to the server (used for POST)

15. GET Request GET is basically used for just getting (retrieving) some data from the server. Example : xhttp.open ("GET", "demo_get.php", true); xhttp.send (); Note: The GET method may return cached data.

16. POST Request POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request. Example : xhttp.open ("POST", "demo_post.php", true); xhttp.send (); To POST data like an HTML form, add an HTTP header with setRequestHeader (). 

17. How AJAX and PHP Works Together  Example - Google Search bar When you begin typing into an auto-complete bar, AJAX techniques send this information to the web server. This information is then collected and processed on the server-side by PHP code. Once the appropriate data has been collected, edited, etc., it is sent back to the client-side as XML data. Finally, after the information returns from the server, it is dynamically displayed to the user by AJAX standards. 

18. General Break: Conventional web applications transmit information to and from the server using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server. With AJAX, when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

19. 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: https://www.w3schools.com/php/php_ajax_php.asp Start typing a name in the input field below: First name:  Suggestions:

20. <html> <head> <script> 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 ();   } } </script> </head> <body>

21. <p><b>Start typing a name in the input field below:</b></p> <form action="">   <label for=" fname ">First name:</label>   <input type="text" id=" fname " name=" fname "  onkeyup =" showHint ( this.value )"> </form> <p>Suggestions: <span id=" txtHint "></span></p> </body> </html>

22. 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

23. The PHP File - "gethint.php" The PHP file checks an array of names, and returns the corresponding name(s) to the browser: <? php // Array with names $a[] = "Anna"; $a[] = "Brittany"; $a[] = "Cinderella"; $a[] = "Diana"; $a[] = "Eva"; $a[] = "Fiona"; $a[] = " Gunda "; $a[] = " Hege "; $a[] = "Inga"; $a[] = "Johanna"; $a[] = "Kitty"; $a[] = "Linda"; $a[] = "Nina"; $a[] = "Ophelia"; $a[] = "Petunia"; $a[] = "Amanda"; $a[] = "Raquel"; $a[] = "Cindy"; $a[] = "Doris";

24. $a[] = "Eve"; $a[] = " Evita "; $a[] = " Sunniva "; $a[] = " Tove "; $a[] = " Unni "; $a[] = "Violet"; $a[] = "Liza"; $a[] = "Elizabeth"; $a[] = "Ellen"; $a[] = " Wenche "; $a[] = "Vicky"; // get the q parameter from URL $q = $_REQUEST["q"]; $hint = ""; // lookup all hints from array if $q is different from "" if ($q !== "") {   $q = strtolower ($q);   $ len = strlen ($q);    foreach ($a as $name) {

25.  if ( stristr ($q, substr ($name, 0, $ len ))) {       if ($hint === "") {         $hint = $name;       } else {         $hint .= ", $name";       }     }   } } // Output "no suggestion" if no hint was found or output correct values echo $hint === "" ? "no suggestion" : $hint; ?> Start typing a name in the input field below: First name:  Suggestions: Anna, Amanda a

26. Reference: https://www.w3schools.com/php/php_ajax_database.asp

27. Thank You