Php File Ajax Requests

In this article, you will learn PHP file Ajax requests and how to handle them in modern, interactive, and efficient web application. we’ll cover the technical aspects of AJAX and PHP including their syntax, how they interact with each other, and what the benefits are of using them as a pair.

Real-world examples will be shown to demonstrate how you can create dynamic and responsive user interfaces through AJAX and PHP.

Using AJAX, you can communicate with servers asynchronously, without the need for the page to be refreshed. This enables you to create dynamic and responsive user interfaces that communicate with servers asynchronously. Meanwhile, PHP is one of the most widely used server-side scripting languages that allows you to create robust, scalable, and flexible web applications.



AJAX & PHP Example

In the below example, a user can type characters into an input field on a web page, and the web page can communicate with a web server while the user is typing those characters:

Example Explanation

As shown in the example above, a function called showNameHint() is executed in the background when a user types a character in the input field.

An event called onkeyup is what triggers the function to run.

Here is the HTML code for the page:

Example: 

<html><head> <style> span { color: green; } </style> <script> function showNameHint(str) { if (str.length == 0) { document.getElementById("nameHint").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ((this.readyState == 4) & (this.status == 200)) { document.getElementById("nameHint").innerHTML = this.responseText; } }; xmlhttp.open("GET", "getHintName.php?n=" + str, true); xmlhttp.send(); } } </script> </head><body> <p><b>Start typing a name in the input field below:</b></p> <form action=""> <label for="name">Name:</label> <input type="text" id="name" name="fname" onkeyup="showNameHint(this.value)" /> </form> <p>Suggestions: <span id="nameHint"></span></p> </body></html>

Example Explanation

The first thing you should do is to make sure that your input field is empty (str.length == 0).

When this is true, you should clear the placeholder nameHint content and exit this function if it exists.

If the input field is not empty, however, you will have to take the following steps:

  • Create a new instance of XMLHttpRequest
  • You will need to create a function that will be executed when the response from the server is ready
  • The request should be sent to the server through a PHP file called getHintName.php
  • You may have noticed that the n parameter has been added to the URL gethint.php?n=”+str
  • As well, a variable called str holds the content of the input field that was entered

PHP File getHintName.php

There is a PHP file that checks an array of names, and returns to the browser the name(s) that correspond to those names.

Example: 

<?php $nameList = array( 'Abbott', 'Adams', 'Adkins', 'Barnes', 'Barnett', 'Barrett', 'Dennis', 'Diaz', 'Eaton', 'Ellison', 'Ferguson', 'Fernandez', 'Garza', 'Henry', 'Joseph', 'Keller', 'Lloyd', 'Logan', 'Mathews', 'Mathis', 'Washington', 'Young', 'Zamora', 'Zimmerman' ); // get the n parameter from URL $n = $_REQUEST["n"];$hint = "";// lookup all hints from array if $n is different from "" if ($n !== "") { $n = strtolower($n); $length = strlen($n); foreach ($nameList as $name) { if (stristr($n, substr($name, 0, $length))) { if ($hint === "") { $hint = $name; } else { $hint .= ", $name"; } } } }// This output "no suggestion" if no hint was found or output correct values echo $hint === "" ? "no suggestion" : $hint; ?>

Example Explanation

In above example, we have an array of names called $nameList. We are then getting the value of a parameter called “n” from the URL using the $_REQUEST superglobal variable.

If the value of “n” is not empty, we convert it to lowercase using strtolower(), get its length using strlen(), and then loop through the $nameList array using a foreach loop.

Within the loop, we check if the first length characters of the current name match the value of “n” using stristr(). If there is a match, we add the current name to the $hint string.

If no matches are found, the $hint string remains empty. Finally, we check if the $hint string is empty and print either “no suggestion” or the list of matching names.

So, if a user enters a value for “n” in the URL, the code searches for names that match the input value and returns a list of suggestions. If there are no matches, it returns “no suggestion”.

Here is a second example, For a more detailed understanding of how to use AJAX and PHP together to create a programming language course search:

Example: 

<html> <head> <style> span { color: green; } </style> <script> function showCourseHint(str) { if (str.length == 0) { document.getElementById("courseHint").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 & xmlhttp.status == 200) { document.getElementById("courseHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "getCourseName.php?c=" + str, true); xmlhttp.send(); } } </script> </head> <body><p><b>Search your favorite programming language course:</b></p> <form> <input type="text" onkeyup="showCourseHint(this.value)"> </form> <p>Entered Course name: <span id="courseHint"></span></p> </body> </html>
Below is a PHP file named “getCourseName.php“:

Example: 

<?php $progCourses = array( "Python", "JavaScript (JS)", "Java", "HTML", "CSS", "SQL", "C#", "C", "C++", "TypeScript", "PHP", "R", "Bash/Shell", "Go", "Swift", "React JS", "React native", "Vue JS", "Angular JS", "Kotlin", "Scala", "Dart", "Assembly", "FORTRAN", "Rust", "Ruby", "COBOL", "Julia", "Perl", "BASIC", "Groovy", "MATLAB", "Objective C" );$c = $_REQUEST["c"]; $hint = "";if ($c !== "") { $c = strtolower($c); $len = strlen($c);foreach ($progCourses as $courseName) {if (stristr($c, substr($courseName, 0, $len))) { if ($hint === "") { $hint = $courseName; } else { $hint .= ", $courseName"; } } } } echo $hint === "" ? "Please enter a valid programming language" : $hint; ?>

Conclusion

Php File Ajax requests provide a convenient way to interact with the server without the need for page refreshes. With the help of Ajax, you can create dynamic web applications that respond quickly to user actions. By following the steps outlined in this article, you can easily incorporate Php File Ajax requests into your own web application. With the ability to handle file uploads and downloads seamlessly, Php File Ajax can be a powerful tool in your web development arsenal. So, start experimenting with Php File Ajax requests in your next web project and see how it can enhance the user experience.

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *