PHP与AJAX.docVIP

AJAX 可与 XML 文件进行交互式通信。 HTML 表单 上面的例子包含了一张简单的 HTML 表单，以及指向 JavaScript 的链接： html head script src=selectcd.js/script /head body form Select a CD: select name=cds onchange=showCD(this.value) option value=Bob DylanBob Dylan/option option value=Bee GeesBee Gees/option option value=Cat StevensCat Stevens/option /select /form p div id=txtHintbCD info will be listed here./b/div /p /body /html 例子解释： 正如您看到的，它仅仅是一张简单的 HTML 表单，其中带有名为 cds 的下拉列表。 表单下面的段落包含了一个名为 txtHint 的 div。这个 div 用作从 web 服务器检索到的数据的占位符。 当用户选择数据时，会执行名为 showCD 的函数。这个函数的执行是由 onchange 事件触发的。 换句话说，每当用户改变了下拉列表中的值，就会调用 showCD 函数。 AJAX 可为用户提供更友好、交互性更强的搜索体验。 AJAX Live Search 在下面的 AJAX 例子中，我们将演示一个实时的搜索。 实时的搜索与传统搜索相比，具有很多优势： 当键入数据时，就会显示出匹配的结果 当继续键入数据时，对结果进行过滤 如果结果太少，删除字符就可以获得更宽的范围 在下面的文本框中搜索 W3School 的页面 本例包括四个元素： 简单的 HTML 表单 JavaScript PHP 页面 XML 文档 在本例中，结果在一个 XML 文档 (links.xml) 中进行查找。为了让这个例子小而简单，我们只提供 8 个结果。 HTML 表单 这是 HTML 页面。它包含一个简单的 HTML 表单，针对此表单的 CSS 样式，以及指向 JavaScript 的链接： html head script src=livesearch.js/script style type=text/css #livesearch { margin:0px; width:194px; } #txt1 { margin:0px; } /style /head body form input type=text id=txt1 size=30 onkeyup=showResult(this.value) div id=livesearch/div /form /body /html 例子解释 - HTML 表单 正如你看到的，HTML 页面包含一个简单的 HTML 表单，其中的文本框名为 txt1。 表单是这样工作的： 当用户在文本框中按键并松开按键时，会触发一个事件 当事件触发时，会执行名为 showResult() 的函数 表单下面是名为 livesearch 的 div 元素。它用作 showResult() 所返回数据的占位符 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.getEleme