AJAX 高级.docx

1、AJAX 高级AJAX 请求实例 Previous Page Next Page 我们已看到 AJAX 可被用来创建更多交互性的应用程序。AJAX Suggest实例在下面的 AJAX 例子中，我们会演示当用户向一个标准的 HTML 表单中输入数据时网页如何与 web 服务器进行通信。在下面的文本框中输入名字：窗体顶端First Name： 窗体底端Suggestions：例子解释 - HTML表单表单的 HTML 代码： First Name:Suggestions: 正如您看到的，这是一个简单的带有名为 txt1 输入域的 HTML 表单。输入域的事件属性定义了一个由 onkeyup 事件

2、触发的函数。表单下面的段落包含了一个名为 txtHint 的 span，这个 span 充当了由 web 服务器所取回的数据的位置占位符。当用户输入数据时，名为 showHint() 的函数就会被执行。函数的执行是由 onkeyup 事件触发的。另外需要说明的是，当用户在文本域中输入数据时把手指从键盘按键上移开时，函数 showHint 就会被调用。例子解释 - showHint() 函数showHint() 函数是一个位于 HTML 页面 head 部分的很简单的 JavaScript 函数。此函数包含以下代码：function showHint(str) if (str.length=0)

3、 document.getElementById(txtHint).innerHTML=; return; xmlHttp=GetXmlHttpObject() if (xmlHttp=null) alert (您的浏览器不支持AJAX！); return; var url=gethint.asp;url=url+?q=+str;url=url+&sid=+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open(GET,url,true);xmlHttp.send(null);每当有字符输入文本框时，此函数就会执行。

4、假如文本域中存在某些输入，函数就会执行： 定义回传数据的服务器的 url（文件名） 使用文本框的内容向 url 添加参数（q） 添加一个随机的数字，以防止服务器使用某个已缓存的文件 创建一个 XMLHTTP 对象，并告知此对象当某个改变被触发时执行名为 stateChanged 的函数 向服务器发送一个 HTTP 请求 如果输入域为空，此函数仅仅会清空 txtHint 占位符的内容 例子解释 - GetXmlHttpObject() 函数上面的例子可调用名为 GetXmlHttpObject() 的函数。此函数的作用是解决为不同浏览器创建不同的 XMLHTTP 对象的问题。这是此函数的代码：f

5、unction 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;例子解释 - stateChanged() 函数stateChanged() 函数包含

6、下面的代码：function stateChanged() if (xmlHttp.readyState=4) document.getElementById(txtHint).innerHTML=xmlHttp.responseText; 每当 XMLHTTP 对象的状态发生改变时，stateChanged() 函数就会执行。当状态变更为 4（“完成”）时，txtHint 占位符的内容就被响应文本来填充。AJAX 请求 源代码 Previous Page Next Page AJAX Suggest 源代码的实例下面的源代码属于上一节的 AJAX 实例。您可以拷贝粘贴这些代码，然后亲自测试一

7、下。AJAX HTML 页面这是 HTML 页面。它包含了一个简单的 HTML 表单，以及一个指向 JavaScript 的链接。 First Name:Suggestions: 下面列出了 JavaScript 代码。AJAX JavaScript这是 JavaScript 代码，存储在文件 clienthint.js 中：var xmlHttpfunction showHint(str) if (str.length=0) document.getElementById(txtHint).innerHTML=; return; xmlHttp=GetXmlHttpObject() if (

8、xmlHttp=null) alert (您的浏览器不支持AJAX！); return; var url=gethint.asp; 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=xmlHtt

9、p.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;AJAX 服务器页面 - ASP 和 PHP其实不存在

10、什么“AJAX 服务器”。AJAX 页面可以由任一因特网服务器提供服务。在上一节的例子中被 JavaScript 调用的服务器页面是一个简单的名为 gethint.asp 的 ASP 文件。下面我们列出了这个服务器页面代码的实例，使用 ASP 来编写。AJAX ASP 实例gethint.asp 页面中的代码针对 IIS 使用 VBScript 编写。它会检查一个名字数组，然后向客户端返回相应的名字：0 then hint= for i=1 to 30 if q=ucase(mid(a(i),1,len(q) then if hint= then hint=a(i) else hint=hin

11、t & , & a(i) end if end if nextend if如果找不到hint，则输出no suggestion或者输出正确的值if hint= then response.write(no suggestion)else response.write(hint)end if%AJAX 数据库实例 Previous Page Next Page AJAX 可用来与数据库进行动态地通信。AJAX 数据库实例在下面的 AJAX 例子中，我们将演示如何使用 AJAX 技术令网页从数据库读取信息。在下面的框中选择一个名字窗体顶端请选择一位客户：窗体底端客户信息将在此处列出。AJAX 实例

12、解释上面的实例包含了一个简单的 HTML 表单以及执行 JavaScript 的链接：请选择一位客户：Alfreds FutterkisteNorth/SouthWolski Zajazd 客户信息将在此处列出。正如您看到的，这是一个简单的带有一个名为 customers 下拉列表的 HTML 表单。表单以下的段落包含了一个名为 txtHint 的 div，这个 div 充当了由 web 服务器所取回的信息的位置占位符。当用户选择数据时，名为 showCustomer() 的函数会被执行。函数的执行会被 onchange 事件触发。另外需要说明的是：每当用户改变下拉列表中的值，函数 showC

13、ustomer 就会被调用。下面列出了 JavaScript 代码。AJAX JavaScript这是存储在文件 selectcustomer.js 中的 JavaScript 代码：var xmlHttpfunction showCustomer(str) xmlHttp=GetXmlHttpObject();if (xmlHttp=null) alert (您的浏览器不支持AJAX！); return; var url=getcustomer.asp;url=url+?q=+str;url=url+&sid=+Math.random();xmlHttp.onreadystatechange

14、=stateChanged;xmlHttp.open(GET,url,true);xmlHttp.send(null);function stateChanged() if (xmlHttp.readyState=4) document.getElementById(txtHint).innerHTML=xmlHttp.responseText;function GetXmlHttpObject()var xmlHttp=null;try / Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); catch (e) / Intern

15、et Explorer try xmlHttp=new ActiveXObject(Msxml2.XMLHTTP); catch (e) xmlHttp=new ActiveXObject(Microsoft.XMLHTTP); return xmlHttp;AJAX 服务器页面这个被 JavaScript 调用的服务器页面，是一个名为 getcustomer.asp 的简单的 ASP 文件。此页面使用 VBScript 针对 IIS 编写。可以使用 PHP 或其他服务器语言对它进行改写。此代码可运行针对某个数据库的 SQL，并以 HTML 表格返回结果：%response.expires=-

16、1sql=SELECT * FROM CUSTOMERS WHERE CUSTOMERID=sql=sql & & request.querystring(q) & set conn=Server.CreateObject(ADODB.Connection)conn.Provider=Microsoft.Jet.OLEDB.4.0conn.Open(Server.Mappath(/db/northwind.mdb)set rs = Server.CreateObject(ADODB.recordset)rs.Open sql, connresponse.write()do until rs.E

17、OF for each x in rs.Fields response.write( & x.name & ) response.write( & x.value & ) next rs.MoveNextloopresponse.write()%AJAX XML 实例 Previous Page Next Page AJAX 可用来与 XML 文件进行交互式通信。AJAX XML 实例在下面的 AJAX 实例中，我们将演示如何通过使用 AJAX 技术，从 XML 文件中读取信息。在下面的下列列表中选择一个 CD窗体顶端选择 CD：窗体底端在此列出 CD 信息。AJAX 实例解释上面的例子包含了

18、一个简单的 HTML 表单，以及指向一段 JavaScript 的链接： 选择 CD：Bob DylanBonnie TylerDolly Parton 在此列出 CD 信息。正如您所看到的，它只是一个带有名为 cds 的下拉列表的简单 HTML 表单。表单下面的段落包含一个名为 txtHint 的 div。该 div 用作从 web 服务器接受的数据的位置占位符。当用户选择列表时，名为 showCD 的函数就会被执行。该函数的执行是 onchange 事件触发的。换句话说，每当用户改变了下拉列表的值，这个 showCD 函数就会被调用。下面列出了 JavaScript 代码。AJAX Jav

19、aScript这是存储在文件 selectcd.js 中的 JavaScript 代码：var xmlHttpfunction showCD(str) xmlHttp=GetXmlHttpObject();if (xmlHttp=null) alert (Your browser does not support AJAX!); return; var url=getcd.asp;url=url+?q=+str;url=url+&sid=+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open(GET,url,tru

20、e);xmlHttp.send(null);function stateChanged() if (xmlHttp.readyState=4) 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 ActiveXObj

21、ect(Msxml2.XMLHTTP); catch (e) xmlHttp=new ActiveXObject(Microsoft.XMLHTTP); return xmlHttp;AJAX 服务器页面被 JavaScript 调用的服务器页面，是名为 getcd.asp 的简单 ASP 文件。该页面使用 VBScript 编写，针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言，简单地重写该页面。请看在 PHP 中对应的例子（测试：缺具体页面）。该代码执行针对 XML 文件的查询，并以 HTML 返回结果：%response.expires=-1q=reque

22、st.querystring(q)set xmlDoc=Server.CreateObject(Microsoft.XMLDOM)xmlDoc.async=falsexmlDoc.load(Server.MapPath(cd_catalog.xml)set nodes=xmlDoc.selectNodes(CATALOG/CDARTIST= & q & )for each x in nodes for each y in x.childnodes response.write( & y.nodename & : ) response.write(y.text) response.write()

23、 nextnext%AJAX ResponseXML 实例 Previous Page Next Page 与 responseText 以字符串返回 HTTP 响应不同，responseXML 以 XML 返回响应。ResponseXML 属性返回 XML 文档对象，可使用 W3C DOM 节点树的方法和属性来检查和解析该对象。AJAX ResponseXML 实例在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从数据库中读取信息。这次，这些从数据库中选取的数据将被转换为 XML 文档，然后我们将使用 DOM 来提取要显示的值。选取下拉列表中的名称窗体顶端选择客户：窗体底端AJAX 实例解释上面的例子包含一个 HTML 表单，若干个保留所返回数据的 元素，以及指向一段 JavaScript 的链接： 选择客户：Alfreds FutterkisteNorth/SouthWolski Zajazds