简单的例子
1.
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
clienthint.js
var xmlHttp
function showHint(str)
{
if (str.length==0)
{
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);
}
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 ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
例子2.
在下面的 AJAX 例子中,使用 AJAX 技术令网页从数据库读取信息。
页面
<html>
<head>
<script src="selectcustomer.js"></script>
</head>
<body>
<form>
请选择一位客户:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd
</select>
</form>
<p>
<div id="txtHint"><b>客户信息将在此处列出。</b></div>
</p>
</body>
</html>
<html>
<head>
<script src="selectcustomer.js"></script>
</head>
<body>
<form>
请选择一位客户:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd
</select>
</form>
<p>
<div id="txtHint"><b>客户信息将在此处列出。</b></div>
</p>
</body>
</html>
表单以下的段落包含了一个名为 "txtHint" 的 div,这个 div 充当了由 web 服务器所取回的信息的位置占位符。
当用户选择数据时,名为 "showCustomer()" 的函数会被执行。函数的执行会被 "onchange" 事件触发。另外需要说明的是:每当用户改变下拉列表中的值,函数 showCustomer 就会被调用。
下面列出了 JavaScript 代码。
selectcustomer.js
var xmlHttp
function 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=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)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
和数据库交互页面
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><em>" & x.name & "</em></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>
Ajax和Xml的实例
html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
选择 CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<p>
<div id="txtHint"><em>在此列出 CD 信息。</em></div>
</p>
</body>
</html>
表单下面的段落包含一个名为 "txtHint" 的 div。该 div 用作从 web 服务器接受的数据的位置占位符。
当用户选择列表时,名为 "showCD" 的函数就会被执行。该函数的执行是 "onchange" 事件触发的。换句话说,每当用户改变了下拉列表的值,这个 showCD 函数就会被调用。
下面列出了 JavaScript 代码。
selectcd.js
var xmlHttp
function 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,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)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
AJAX 服务器页面
<%
response.expires=-1
q=request.querystring("q")
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))
set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")
for each x in nodes
for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next
%>
Ajax与ResponseXML的实例
与 responseText 以字符串返回 HTTP 响应不同,responseXML 以 XML 返回响应。
ResponseXML 属性返回 XML 文档对象,可使用 W3C DOM 节点树的方法和属性来检查和解析该对象。
AJAX ResponseXML 实例
在下面的 AJAX 实例中,我们将演示网页如何使用 AJAX 技术从数据库中读取信息。这次,这些从数据库中选取的数据将被转换为 XML 文档,然后我们将使用 DOM 来提取要显示的值。
页面
<html>
<head>
<script src="selectcustomer_xml.js"></script>
</head>
<body>
<form action="">
<label>选择客户:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select></label>
</form>
<b><span id="companyname"></span></b><br />
<span id="contactname"></span><br />
<span id="address"></span>
<span id="city"></span><br/>
<span id="country"></span>
</body>
</html>
当用户选取下拉框中的客户时,函数 "showCustomer()" 就会被执行。事件 "onchange" 会触发该函数执行。换句话说,每当用户改变下拉框中的值时,函数 showCustomer() 就会被调用。
selectcustomer_xml.js
var xmlHttp
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="getcustomer_xml.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)
{
var xmlDoc=xmlHttp.responseXML.documentElement;
document.getElementById("companyname").innerHTML=
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
document.getElementById("contactname").innerHTML=
xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
document.getElementById("address").innerHTML=
xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("country").innerHTML=
xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
}
}
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;
}
showCustomer() 和 GetXmlHttpObject() 与上一节相同。stateChanged() 函数稍早前也在本教程中使用过。不过,这次我们通过 responseXML 以 XML 文档返回结果,并使用 DOM 来提取要显示的值。
AJAX 服务器页面
这个被 JavaScript 调用的服务器页面,是名为 "getcustomer_xml.asp" 的简单 ASP 文件。
该页面使用 VBScript 编写,针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言,简单地重写该页面。
请看在 PHP 中对应的例子(测试:缺具体页面)。
这段代码执行针对数据库的 SQL 查询,并以 XML 文档返回结果:
<%
response.expires=-1
response.contenttype="text/xml"
sql="SELECT * FROM CUSTOMERS "
sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"
on error resume next
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
if err <> 0 then
response.write(err.description)
set rs=nothing
set conn=nothing
else
response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")
response.write("<company>")
response.write("<compname>" &rs.fields("companyname")& "</compname>")
response.write("<contname>" &rs.fields("contactname")& "</contname>")
response.write("<address>" &rs.fields("address")& "</address>")
response.write("<city>" &rs.fields("city")& "</city>")
response.write("<country>" &rs.fields("country")& "</country>")
response.write("</company>")
end if
on error goto 0
%>
请注意上面的 ASP 代码中的第二行:response.contenttype="text/xml"。ContentType 属性为 response 对象设置了 HTTP 内容类型。该属性的默认值是 "text/html"。这次我们把内容类型设置为 XML。
然后我们从数据库中选取数据,并使用这些数据构建 XML 文档。
分享到:
相关推荐
AJAX实例应用初体验:自动保存草稿
PagerHelper<Ttype> 公具类 CommonPagination.ascx 只负责显示页码 个人感觉MVC 不怎么样..I don't bird it.
NULL 博文链接:https://shma1664.iteye.com/blog/1533496
最后一部分通过几个大型的实例,让读者深入领会Ajax技术在实际网络项目中的优势,也让读者体验这种优势所带来的优越性能。 本书适用于初、中级网络开发者,对于高级开发人员也很有启发。没有接触过Ajax的入门者...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
如果你对AJAX不是很了解,可以先看看这篇教程的前篇《AJAX初体验之上手篇》。 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友,可能更喜欢自己去...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
ASP.NET 在2007年初推出了其第一个正式版本,并将Atlas更名为ASP.NET AJAX,对应服务器端和客户端分别对应有ASP.NET服务器端编程模型和ASP.NET客户端编程模型,前者包含ASP.NET 2.0 AJAX Extensions和,后者包含...
AJAX是这两年蛮热的东西,我也凑凑热闹,前些天去找了些教程学学,下面就按整个处理过程把自己学的东西写写,不过,因为是初学,所以 有错误就请见谅啦,也欢迎指正,vipxjw#163.com。 PS.写完了之后看了下,结果...
本书最大的特色在于每一章中涉及的例子都经过精挑细选,具有很强的针对性,力求让读者轻松掌握PHP项目开发的技巧和Ajax改善用户体验的各种技术,学习尽可能多的知识。 本书适用于初、中级有一定基础的PHP程序员,...
promise初体验,自定义promise函数,promise基本流程,api的使用,以及使用promise会面临的问题,async函数,await表达式,async和await结合发送ajax请求
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
因此在设计之初,就选择了DIV+AJAX模式,这样在提高响应速度的同时,更提高了用户体验。目前本CMS集成企业简介,新闻资讯,产品展示,资源下载,人才招聘,解决方案,企业相册,留言反馈。系统各模块相互独立,可扩展性非常...
本书最大的特色在于每一章中涉及的例子都经过精挑细选,具有很强的针对性,力求让读者轻松掌握PHP项目开发的技巧和Ajax改善用户体验的各种技术,学习尽可能多的知识。 本书适用于初、中级有一定基础的PHP程序员,...
第2章 Ajax初体验···· 32 2.1 Ajax带来的优势········ 32 2.2 传统的JSP聊天室···· 34 2.2.1 实现业务逻辑组件··········· 35 2.2.2 实现控制器···· 38 2.2.3 实现视图······...