ajax live search,PHP 和 AJAX Live Search

JavaScript

JavaScript 代码存储在与 HTML 文档连接的 "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 ("Browser does not support 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 || xmlHttp.readyState=="complete")

{

document.getElementById("livesearch").

innerHTML=xmlHttp.responseText;

document.getElementById("livesearch").

style.border="1px solid #A5ACB2";

}

}

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;

}

例子解释：

GetXmlHttpObject 与 PHP 和 AJAX 请求 中的例子相同。

showResult() 函数

该函数每当一个字符输入文本框就会执行一次。

如果文本域中没有输入 (str.length == 0)，该函数把返回字段设置为空，并删除周围的任何边框。

不过，如果文本域中存在输入，则函数执行：

定义发送到服务器的 url (文件名)

把带有输入框内容的参数 (q) 添加到 url

添加一个随机数，以防止服务器使用缓存文件

调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并在触发一个变化时告知此函数执行名为 stateChanged 的一个函数

使用给定的 url 来打开 XMLHTTP 对象

向服务器发送 HTTP 请求

stateChanged() 函数

每当 XMLHTTP 对象的状态发生变化时，该函数就会执行。

当状态变为 4 (或 "complete") 时，就会使用响应文本来填充 txtHint 占位符的内容，并在返回字段周围设置一个边框。