Ajax examples

Note: clicking on the title header will link you to the actual html webpage whose source code you are viewing.

Free Ajax SMS tool
Google like Ajax Suggestions



Ajax Suggestions
Web Resource: http://www.w3schools.com/php/php_ajax_suggest.asp

This example combines php, javascript and html to show how to create a dynamic suggestion application like the one on the google website.
In AJax, one default part of the code to always remember to start with is browser check to see if your browser supports Http requests.
This is shown in the function GetXmlHttpObject() in clientHint.js.
Otherwise, the javascript works as an intermediary to get the typed in text and send it to gethint.php for comparison. Upon receiving the resulting matching names/hints, the clientHint.js sends this info back to the testAjax.htm.

In the gethint.php file resides an array with list of names. Order doesn't matter since we'll be comparing letter by letter with input. All cases are taken care of with the result being no suggestion if input does not match any array element.

Source Code:
HTML file - testAjax.htm

<html>
<body>
<script src="clientHint.js"></script> 
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p> 
</body>
</html>

Javascript file - clientHint.js

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="gethint.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 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

PHP file - gethint.php

<?php
// Fill up 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[]="Alan";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eve";$a[]="Evita";$a[]="Sunniva";
$a[]="Tove";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="Wenche";$a[]="Vicky";
$a[]="Richard";$a[]="Rasala";$a[]="God";$a[]="Jesus";$a[]="Jeremy";
 
//get the q parameter from URL
$q=$_GET["q"];
 
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
 
//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;
?>

Back to Top



Ajax SMS tool
Source Code: http://galiwood.com/javascript/source.php?path=./sms

I discovered a new webservice called teleflip which sends a free text msg from email by simply sending moc.pilfelet|rebmuNenohPruoy#moc.pilfelet|rebmuNenohPruoy. Therefore, I figured that since it's just parsing required, I could offer this service on my site where people input the number they want to send a msg to and I parse it with "@teleflip.com" and off it goes.

I applied what I've learnt with ajax to make the entire form ajax-enabled from the error messages to the feedback confirmation.

I have well documented source code on this one therefore please explore the above www.galiwood.com/javascript/sms/contact.php and enjoy your free txting.

Back to Top


page_revision: 5, last_edited: 1186436982|%e %b %Y, %H:%M %Z (%O ago)
Unless stated otherwise Content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License