`

Ajax之初体验

AjaxSQL ServerASPSQLXML 
阅读更多 
简单的例子

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之初体验
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Book4-No.02 AJAX初体验

    【标题】"Book4-No.02 AJAX初体验"揭示了AJAX（Asynchronous JavaScript and XML）技术在Web开发中的基本应用。AJAX允许开发者在不刷新整个网页的情况下，通过后台与服务器交换数据并局部更新页面，从而提高用户体验...

    AJAX实例应用初体验：自动保存草稿

    ### AJAX实例应用初体验：自动保存草稿 #### 背景介绍 随着Web应用程序的发展，用户体验成为衡量一个网站或应用是否成功的重要因素之一。在众多提升用户体验的技术中，AJAX（Asynchronous JavaScript and XML）因其...

    PageHelper AJAX MVC 分页封装（初体验）

    当用户点击页码或更改每页显示数量时，AJAX会向服务器发送请求，而不是刷新整个页面，这样能保持用户的浏览状态，并提供流畅的交互体验。服务器端接收到请求后，根据参数调用PageHelper进行分页查询，然后返回JSON...

    Ajax 修炼之道 Web 2.0 入门 2007

    通过阅读《Ajax修炼之道：Web 2.0入门 2007》，开发者能够掌握Ajax技术，从而构建出更加互动、高效的Web应用程序，为用户提供更加流畅的浏览体验。同时，书中的案例和实践指导也能帮助读者将理论知识转化为实际操作...

    关于ajax原理的ppt

    **异步调用初体验** 实现Ajax调用通常包括以下步骤： 1. 创建XmlHttpRequest对象。 2. 注册`onreadystatechange`事件监听器，处理状态变化。 3. 使用`open()`方法初始化请求，指定HTTP方法、URL和是否异步。 4. ...

    精通Ajax_基础概念_核心技术与典型案例

    最后一部分通过几个大型的实例，让读者深入领会Ajax技术在实际网络项目中的优势，也让读者体验这种优势所带来的优越性能。 　本书适用于初、中级网络开发者，对于高级开发人员也很有启发。没有接触过Ajax的入门者...

    《疯狂Ajax讲义(第3版).part3

    目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用：电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...

    jQuery AJAX表格控件(初版)源码

    AJAX（异步JavaScript和XML）则允许在不刷新整个页面的情况下更新部分网页内容，提高了用户体验。在这个控件中，jQuery和AJAX的结合用于实现表格数据的动态加载、编辑和删除，使得用户可以无需刷新页面就能进行操作...

    《疯狂Ajax讲义(第3版).part4

    目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用：电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...

    AJAX初体验之上手篇

    近年来，AJAX因其能够提升用户体验，使网页更加互动而备受关注。在本文中，我们将探讨如何开始使用AJAX，从创建XMLHttpRequest对象，到使用它获取XML文档，以及处理这些文档。 首先，创建XMLHttpRequest对象是AJAX...

    ASP.NET AJAX入门系列教程

    　ASP.NET 在2007年初推出了其第一个正式版本，并将Atlas更名为ASP.NET AJAX，对应服务器端和客户端分别对应有ASP.NET服务器端编程模型和ASP.NET客户端编程模型，前者包含ASP.NET 2.0 AJAX Extensions和,后者包含...

    ajax初分析

    总的来说，Ajax是一种强大的技术，能够实现网页的局部更新，提高用户体验，但它也存在一定的限制。对于初学者来说，掌握Ajax的基本概念和使用方法是十分重要的，这将有助于开发更高效、更友好的Web应用。

    ajax 示例源码（经典）

    这个技术自2000年代初被引入以来，极大地提升了网页应用的用户体验，因为它允许页面背景与服务器进行通信，用户界面可以保持响应状态，而不会打断用户的交互。 在“ajax 示例源码（经典）”中，我们可以期待看到...

    《AJAX编程技术与实例》

    在2000年代初，随着Web 2.0概念的提出，AJAX迅速成为开发动态、交互性网页的必备工具。 **核心技术组成：** 1. **JavaScript**：是AJAX的核心，负责创建和控制XMLHttpRequest对象，向服务器发送请求，并处理服务器...

    PHP+Ajax Web 2.0编程技术与项目开发大全

    本书最大的特色在于每一章中涉及的例子都经过精挑细选，具有很强的针对性，力求让读者轻松掌握PHP项目开发的技巧和Ajax改善用户体验的各种技术，学习尽可能多的知识。 本书适用于初、中级有一定基础的PHP程序员，...

    Pragmatic Ajax - A Web 2.0 Primer

    Ajax是21世纪初互联网技术的一次重大飞跃，它使得网页无需刷新即可实现数据的动态更新，极大地提升了用户体验。这本书旨在帮助开发者理解Ajax的基本原理，掌握其实施技巧，并将其有效地应用到Web 2.0项目中。 Ajax...

    达内培训课件-Ajax

    在2000年代初，由jQuery等库的推动下，Ajax彻底改变了Web开发的方式，让网页变得更加动态和交互性强。在达内集团的Java培训课件中，讲解Ajax技术主要是为了帮助学员掌握现代Web应用开发的核心技能。 Ajax的核心原理...

    J2EE的Ajax宝典

    **第2章：Ajax初体验** - **优势与案例对比**：通过具体实例，如传统的JSP聊天室与基于Ajax的聊天室，突出展示Ajax如何改善用户体验和提升应用效率。 - **实现细节**：详细分析如何在聊天室场景中实现异步发送请求...

Magicbox
Global site tag (gtag.js) - Google Analytics