Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The HTML page contains a link to an external JavaScript, an HTML form, and a div element:
- <html>
<head>
<script src=”getrss.js”></script>
</head>
<body>
<form>
Select an RSS-feed:
<select>
<option value=”Google”>Google News</option>
<option value=”MSNBC”>MSNBC News</option>
</select>
</form>
<p><div>
<b>RSS-feed will be listed here…</b></div></p>
</body>
</html>
The HTML form works like this:
- An event is triggered when a user selects an option in the drop-down box
- When the event is triggered, the function showRSS() is executed
- The <div> is a placeholder for the data returned from the showRSS() function.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
In this example we will demonstrate an RSS reader, where the content from the RSS is loaded into a webpage without refreshing.
RSS-feed will be listed here…
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
An RSS Reader is used to read RSS Feeds.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The PHP page called by the JavaScript code is called “livesearch.php”.
The code searches an XML file for titles matching the search string and returns the result as HTML:
- <?php
$xmlDoc = new DOMDocument();
$xmlDoc->load(“links.xml”);
$x=$xmlDoc->getElementsByTagName(‘link’);
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q) > 0)
{
$hint=”";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName(‘title’);
$z=$x->item($i)->getElementsByTagName(‘url’);
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint==”")
{
$hint=”<a href=’” .
$z->item(0)->childNodes->item(0)->nodeValue .
“‘ target=’_blank’>” .
$y->item(0)->childNodes->item(0)->nodeValue . “</a>”;
}
else
{
$hint=$hint . “<br /><a href=’” .
$z->item(0)->childNodes->item(0)->nodeValue .
“‘ target=’_blank’>” .
$y->item(0)->childNodes->item(0)->nodeValue . “</a>”;
}
}
}
}
}
// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:
- PHP creates an XML DOM object of the “links.xml” file
- Loops through all <title> elements to find titles that match the text sent from the JavaScript
- Sets the correct link and title in the “$response” variable. If more than one match is found, all matches are added to the variable
- If no matches are found, the $response variable is set to “no suggestion”
- Output the $respone variable to the “livesearch” placeholder
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
This is the JavaScript code stored in the file “livesearch.js”:
- var xmlhttp;
function showResult(str)
{
if (str.length==0)
{
document.getElementById(“livesearch”).innerHTML=”";
document.getElementById(“livesearch”).style.border=”0px”;
return;
}
xmlhttp=GetXmlHttpObject()
if (xmlhttp==null)
{
alert (“Your browser does not support XML HTTP Request”);
return;
}
var url=”livesearch.php”;
url=url+”?q=”+str;
url=url+”&sid=”+Math.random();
xmlhttp.onreadystatechange=stateChanged ;
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById(“livesearch”).innerHTML=xmlhttp.responseText;
document.getElementById(“livesearch”).style.border=”1px solid #A5ACB2″;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}
The GetXmlHttpObject() function is the same as in the PHP AJAX Suggest chapter.
The showResult() Function
This function executes every time a character is entered in the input field. If there is no input in the text field (str.length == 0), the function sets the return field to empty and removes the border around it. However, if there is any input in the text field, the function executes the following:
- Calls the GetXmlHttpObject() function to create an XMLHTTP object
- Defines the URL (filename) to send to the server
- Adds a parameter (q) to the URL with the content of the input field
- Adds a random number to prevent the server from using a cached file
- Each time the readyState property changes, the stateChanged() function will be executed
- Opens the XMLHTTP object with the given URL
- Sends an HTTP request to the server
The stateChanged() Function
This function executes every time the state of the XMLHTTP object changes. When the state changes to 4 (“complete”), the content of the txtHint placeholder is filled with the response text, and a border is set around the field.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The HTML page contains a link to an external JavaScript, some style definitions, an HTML form, and a div element:
The HTML form works like this:
- An event is triggered when the user presses, and releases a key in the input field
- When the event is triggered, the function showResult() is executed
- The <div> is a placeholder for the data returned from the showResult() function
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
In this example we 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
Search for a W3Schools page in the input field below:
In the example above, the results are found in an XML document (links.xml). To make this example small and simple, only eight results are available.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
AJAX can be used for a more user-friendly and interactive search.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The PHP page called by the JavaScript, is called “responsexml.php”.
The PHP script runs an SQL query against a MySQL database, and returns the result an XML document:
- <?php
$q=$_GET["q"];
$con = mysql_connect(‘localhost’, ‘peter’, ‘abc123′);
if (!$con)
{
die(‘Could not connect: ‘ . mysql_error());
}
mysql_select_db(“ajax_demo”, $con);
$sql=”SELECT * FROM user WHERE id = “.$q.”";
$result = mysql_query($sql);
echo ‘<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<person>’;
while($row = mysql_fetch_array($result))
{
echo “<firstname>” . $row['FirstName'] . “</firstname>”;
echo “<lastname>” . $row['LastName'] . “</lastname>”;
echo “<age>” . $row['Age'] . “</age>”;
echo “<hometown>” . $row['Hometown'] . “</hometown>”;
echo “<job>” . $row['Job'] . “</job>”;
}
echo “</person>”;
mysql_close($con);
?>
When the query is sent from the JavaScript to the PHP page, the following happens:
- Set the $q variable to the data sent in the q parameter
- Open a connection to a MySQL server
- The “user” with the specified id is found
- The data is outputted as an XML document
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
This is the JavaScript code stored in the file “responsexml.js”:
- var xmlhttp;function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert (“Browser does not support HTTP Request”);
return;
}
var url=”responsexml.php”;
url=url+”?q=”+str;
url=url+”&sid=”+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
xmlDoc=xmlhttp.responseXML;
document.getElementById(“firstname”).innerHTML=
xmlDoc.getElementsByTagName(“firstname”)[0].childNodes[0].nodeValue;
document.getElementById(“lastname”).innerHTML=
xmlDoc.getElementsByTagName(“lastname”)[0].childNodes[0].nodeValue;
document.getElementById(“job”).innerHTML=
xmlDoc.getElementsByTagName(“job”)[0].childNodes[0].nodeValue;
document.getElementById(“age_text”).innerHTML=”Age: “;
document.getElementById(“age”).innerHTML=
xmlDoc.getElementsByTagName(“age”)[0].childNodes[0].nodeValue;
document.getElementById(“hometown_text”).innerHTML=”<br/>From: “;
document.getElementById(“hometown”).innerHTML=
xmlDoc.getElementsByTagName(“hometown”)[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}
The showUser() and GetXmlHttpObject functions are the same as in the PHP AJAX and MySQL chapter, you can go to there for an explanation of those.
The stateChanged() Function
When an option in the drop-down box is selected, the function executes the following:
- Sets xmlDoc variable as an XML document, using the responseXML function
- Retrieves data from the XML document, and place it in the correct <span> element
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The HTML page contains a link to an external JavaScript, an HTML form, and several <span> elements:
- <html>
<head>
<script src=”responsexml.js”></script>
</head>
<body>
<form>
Select a User:
<select>
<option value=”1″>Peter Griffin</option>
<option value=”2″>Lois Griffin</option>
<option value=”3″>Glenn Quagmire</option>
<option value=”4″>Joseph Swanson</option>
</select>
</form>
<h2><span></span> <span id=”lastname”></span></h2>
<span></span>
<div style=”text-align: right”>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
- The HTML form contains a drop-down box called “users”, with id and names from the database table, as options
- The <span> elements are placeholders for the values we will receive
- When a user is selected, a function called “showUser()” is executed (triggered by the “onchange” event)
In other words: Each time a user changes the value in the drop-down box, the function showUser() is called, and outputs the result in the <span> elements.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The database table we use in this example 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 |
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The ResponseXML property returns an XML document object, which can be examined and parsed using the DOM.
The following example will demonstrate how a web page can fetch information from a database with AJAX technology. The selected data from the database will this time be converted to an XML document, and then we will use the DOM to extract the values to be displayed.
This example might look equal to the “PHP AJAX and MySQL” example in the previous chapter. However, there is a big difference: this time we get the data from the PHP page as XML, with the responseXML function.
Receiving the response as an XML document allows us to update this page several places, instead of just receiving an HTML output, and displaying it.
In this example we will update several <span> elements with the information we receive from the database.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
responseText returns the HTTP response as a string.
responseXML returns the response as XML.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The PHP page called by the JavaScript, is called “getuser.php”.
The PHP script runs an SQL query against a MySQL database, and returns the result as HTML:
- <?php
$q=$_GET["q"];
$con = mysql_connect(‘localhost’, ‘peter’, ‘abc123′);
if (!$con)
{
die(‘Could not connect: ‘ . mysql_error());
}
mysql_select_db(“ajax_demo”, $con);
$sql=”SELECT * FROM user WHERE id = ‘”.$q.”‘”;
$result = mysql_query($sql);
echo “<table border=’1′>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>”;
while($row = mysql_fetch_array($result))
{
echo “<tr>”;
echo “<td>” . $row['FirstName'] . “</td>”;
echo “<td>” . $row['LastName'] . “</td>”;
echo “<td>” . $row['Age'] . “</td>”;
echo “<td>” . $row['Hometown'] . “</td>”;
echo “<td>” . $row['Job'] . “</td>”;
echo “</tr>”;
}
echo “</table>”;
mysql_close($con);
?>
When the query is sent from the JavaScript to the PHP page, the following happens:
- PHP opens a connection to a MySQL server
- The correct person is found
- An HTML table is created, and filled with data, and sent back to the “txtHint” placeholder
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
When a person in the drop-down box is selected, the showUser() function executes the following:
- Calls the GetXmlHttpObject() function to create an XMLHTTP object
- Defines an URL (filename) to send to the server
- Adds a parameter (q) to the URL with the content of the drop-down box
- Adds a random number to prevent the server from using a cached file
- Each time the readyState property changes, the stateChanged() function will be executed
- Opens the XMLHTTP object with the given URL
Sends an HTTP request to the server
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
This is the JavaScript code stored in the file “selectuser.js”:
- var xmlhttp;
function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert (“Browser does not support HTTP Request”);
return;
}
var url=”getuser.php”;
url=url+”?q=”+str;
url=url+”&sid=”+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}
The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter, you can go to there for an explanation of those.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The HTML page contains a link to an external JavaScript, an HTML form, and a div element:
As you can see it is just a simple HTML form with a drop down box called “customers”.
The <div> below the form will be used as a placeholder for info retrieved from the web server.
When the user selects data, a function called “showUser()” is executed. The execution of the function is triggered by the “onchange” event. In other words: Each time the user change the value in the drop down box, the function showUser() is called.
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The database table we use in this example 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 |
Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008
0
The following example will demonstrate how a web page can fetch information from a database with AJAX technology.
Person info will be listed here.
