PHP Example – AJAX Poll

Example – The HTML Page

When a user chooses an option above, a function called “getVote()” is executed. The function is triggered by the “onclick” event:

<html>
<head>
<script>
function getVote(int) {
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("poll").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","poll_vote.php?vote="+int,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"><br>
No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>

</body>
</html>

The getVote() function does 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 (vote) is added to the URL (with the value of the yes or no option)

Continue reading PHP Example – AJAX Poll

PHP Example – AJAX Live Search

AJAX can be used to create more user-friendly and interactive searches.

AJAX Live Search

The following example will demonstrate a live search, where you get search results while you type.

Live search has many benefits compared to traditional searching:

  • Results are shown as you type
  • Results narrow as you continue typing
  • If results become too narrow, remove characters to see a broader result

Continue reading PHP Example – AJAX Live Search

PHP Example – AJAX and XML

AJAX can be used for interactive communication with an XML file.

Example Explained – The HTML Page

When a user selects a CD in the dropdown list above, a function called “showCD()” is executed. The function is triggered by the “onchange” event :

<html>
<head>
<script>
function showCD(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","getcd.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
  <option value="">Select a CD:</option>
  <option value="Bob Dylan">Bob Dylan</option>
  <option value="Bee Gees">Bee Gees</option>
  <option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>

</body>
</html>

The showCD() function does the following :

  • Check if a CD is selected
  • 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)

Continue reading PHP Example – AJAX and XML

PHP – AJAX and MySQL

AJAX can be used for interactive communication with a database.

AJAX Database Example – The MySQL Database

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

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

 


Continue reading PHP – AJAX and MySQL

PHP – AJAX and 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 Continue reading PHP – AJAX and PHP

PHP – AJAX Introduction

AJAX is about updating parts of a web page, without reloading the whole page.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

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.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs. Continue reading PHP – AJAX Introduction

PHP XML DOM Parser

The built-in DOM parser makes it possible to process XML documents in PHP.

The XML DOM Parser

The DOM parser is a tree-based parser.

Look at the following XML document fraction:

<?xml version="1.0" encoding="UTF-8"?>
<from>Jani</from>

The DOM sees the XML above as a tree structure:

  • Level 1: XML Document
  • Level 2: Root element: <from>
  • Level 3: Text element: “Jani”

Continue reading PHP XML DOM Parser

PHP XML Expat Parser

The built-in XML Expat Parser makes it possible to process XML documents in PHP.

The XML Expat Parser

The Expat parser is an event-based parser.

Look at the following XML fraction:

<from>Jani</from>

An event-based parser reports the XML above as a series of three events :

  • Start element: from
  • Start CDATA section, value: Jani
  • Close element: from

Continue reading PHP XML Expat Parser

PHP SimpleXML – Get Node/Attribute Values

SimpleXML is a PHP extension that allows us to easily manipulate and get XML data.

PHP SimpleXML – Get Node Values

Get the node values from the “note.xml” file:

Example

<?php
$xml=simplexml_load_file("note.xml") or die("Error: Cannot create object");
echo $xml->to . "<br>";
echo $xml->from . "<br>";
echo $xml->heading . "<br>";
echo $xml->body;
?>

The output of the code above will be :

Tove
Jani
Reminder
Don’t forget me this weekend!

Continue reading PHP SimpleXML – Get Node/Attribute Values

PHP SimpleXML Parser

SimpleXML is a PHP extension that allows us to easily manipulate and get XML data.

The SimpleXML Parser

SimpleXML is a tree-based parser.

SimpleXML provides an easy way of getting an element’s name, attributes and textual content if you know the XML document’s structure or layout.

SimpleXML turns an XML document into a data structure you can iterate through like a collection of arrays and objects.

Compared to DOM or the Expat parser, SimpleXML takes a fewer lines of code to read text data from an element. Continue reading PHP SimpleXML Parser