how to send and receive data using ajax in php

simple ajax example in PHP jquery

  • AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript.
  • 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.

 

The following examples will demonstrate how a  web page can communicate with a web server  is user type characters in an input field,

 

Explanation

In the example above, when a user types a character in the input field, a function called “showing()” is executed.

The monkey’s event triggers the function.

Here is the HTML code:

script  code

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 off

HTML code

<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=”txt Hint”></span></p>  

 

 

Code explanation:

Firsts, checks the input field is empty (str.length == 0). If, clears the content of the txtHint placeholders and exit the functions.

Do the following, if  inputs fields are not empty:

  • 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 the q parameter is added to the URL (gethint.php?q=”+str)
  • And the str variable holds the content of the input field

 

The PHP Files – gethint.php.

The PHP files check array of name and returns the correspond name to browser:

PHP code

$a[] = “Anna”;  

$a[] = “Gunda”;  

$a[] = “Hege”;  

$a[] = “Inga”;  

$a[] = “Johanna”;  

$a[] = “Kitty”;  

$a[] = “Linda”;  

$a[] = “Amanda”;  

$a[] = “Raquel”;  

$a[] = “Cindy”;  

$a[] = “Doris”;  

$a[] = “Eve”;  

$a[] = “Evita”;  

$a[] = “Sunniva”;  

$a[] = “Tove”;  

$a[] = “Liza”;  

$a[] = “Elizabeth”;  

$a[] = “Ellen”;  

$a[] = “Wenche”;  

$a[] = “Vicky”;  

 

// fetch 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) {  

    if (stristr($q, substr($name, 0, $len))) {  

      if ($hint === “”) {  

        $hint = $name;  

      } else {  

        $hint .= “, $name”;  

      }      }    }  }  

  // It results in “no suggestion” if no hint was found or output correct values  

echo $hint === “” ? “no suggestion” : $hint;  

Output

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)
  • JavaScript/DOM (to display/interact with the information)
  • CSS (to style the data)
  • XML (often used as the format for transferring data)
  • AJAX applications are browser- and platform-independent!

 

Google Suggest

AJAX was popular in 2005 by Google, with is Google Suggest.

Google Suggest is using the AJAX to create a dynamic web interface: When you start typing in Google’s search box, JavaScript sends the letters off to a server and the server returns a list of suggestions.

 

Start Using AJAX Today

In our PHP tutorial, we will demonstrate how AJAX can update parts of a web page, without reloading the whole page. The server script will be written in PHP.

If you want to learn more about AJAX, visit the AJAX tutorial.

simple ajax example in PHP,

simple ajax example in PHP, jquery ajax in PHPs, advanced ajax in PHP

ajax in PHP – stack overflow,

how to call API using ajax in PHP,

advantages of ajax in PHP,

insert data using ajax in PHP w3schools,

how to get data in ajax in PHP.

Related searches

 

People also ask

how to get data from jquery ajax in php

how to get value from ajax response in php

how to pass data to another page using jquery ajax

jquery ajax call php function with parameters.

Tags:,

Add a Comment

Your email address will not be published.