今回はJavaScriptに実装するファンクションの中身についてです。
入力欄に文字が打たれる度にファンクションが実行され名前を予測します。
入力欄に一文字以上(str.length>0)の入力があった場合はshowHint()ファンクションは以下のことをします。

• サーバに送るURLを定義します。
• URLにパラメータを足します。
• キャッシュを使うことを避けるために乱数をつけます。
• XMLHTTPオブジェクトを生成し、stateChangedファンクションを実行するようにします。
• XMLHTTPオブジェクトを与えられたURLでオープンします。
• HTTPリクエストをサーバに送ります。

var xmlhttp

function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support XMLHTTP!");
  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);
}

上記のshowHint()ファンクションはGetXmlHttpObjectファンクションを実行します。
GetXmlHttpObject()ファンクションを実行する目的は別のブラウザーに対して別のXMLHTTPオブジェクトを生成するという問題を避けるためです。

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  //IE7+, Firefox, Chrome, Opera, Safari等の新しいブラウザのためのコード
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // IE6と IE5のためのコード
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

stateChanged()ファンクションには下記コードを実装します。
stateChangedメソッドはXMLHTTPオブジェクトの状態が変わる度に実行されます。状態が４のときはリクエストを完了したことを意味するので、txtHintには買えされたテキストを入力します。

function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  }
}

Ajaxサジェスト（３）ではJavaScriptとPHPをつなげていきます。