2010-12-27ajax (2)

最新推荐文章于 2024-07-18 10:00:11 发布

songhongrun2010

最新推荐文章于 2024-07-18 10:00:11 发布

阅读量228

点赞数

文章标签： ajax 2010 javascript xmlhttprequest 服务器 vbscript

本文链接：https://blog.csdn.net/songhongrun2010/article/details/6516364

版权

AJAX Suggest 源代码的实例

下面的源代码属于上一节的 AJAX 实例。

您可以拷贝粘贴这些代码，然后亲自测试一下。

AJAX HTML 页面

这是 HTML 页面。它包含了一个简单的 HTML 表单，以及一个指向 JavaScript 的链接。

<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>

下面列出了 JavaScript 代码。

AJAX JavaScript

这是 JavaScript 代码，存储在文件 "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;
}

AJAX 服务器页面 - ASP 和 PHP

其实不存在什么“AJAX 服务器”。AJAX 页面可以由任一因特网服务器提供服务。

在上一节的例子中被 JavaScript 调用的服务器页面是一个简单的名为 "gethint.asp" 的 ASP 文件。

下面我们列出了这个服务器页面代码的实例，使用 ASP 来编写。

AJAX ASP 实例

"gethint.asp" 页面中的代码针对 IIS 使用 VBScript 编写。它会检查一个名字数组，然后向客户端返回相应的名字：

<%
response.expires=-1
dim a(30)

'用名字为数组赋值
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'从URL取得参数q
q=ucase(request.querystring("q"))

'如果q的长度大于0，则查找所有的hint
if len(q)>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=hint & " , " & a(i)
      end if
    end if
  next
end if

'如果找不到hint，则输出"no suggestion"
'或者输出正确的值
if hint="" then 
  response.write("no suggestion")
else
  response.write(hint)
end if
%>


  
  
   
   AJAX 可用来与数据库进行动态地通信。
  
  
  
  
   
   AJAX 数据库实例
   
   在下面的 AJAX 例子中，我们将演示如何使用 AJAX 技术令网页从数据库读取信息。
  
  
  
  
   
   在下面的框中选择一个名字
   
   
    
    请选择一位客户：  
   
   
   
   
    
    客户信息将在此处列出。
   
   
  
  
  
  
   
   AJAX 实例解释
   
   上面的实例包含了一个简单的 HTML 表单以及执行 JavaScript 的链接：
   
   <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>


   
   正如您看到的，这是一个简单的带有一个名为 "customers" 下拉列表的 HTML 表单。

   
   表单以下的段落包含了一个名为 "txtHint" 的 div，这个 div 充当了由 web 服务器所取回的信息的位置占位符。

   
   当用户选择数据时，名为 "showCustomer()" 的函数会被执行。函数的执行会被 "onchange" 事件触发。另外需要说明的是：每当用户改变下拉列表中的值，函数 showCustomer 就会被调用。

   
   下面列出了 JavaScript 代码。

  
  

  
  

   
   AJAX JavaScript

   
   这是存储在文件 "selectcustomer.js" 中的 JavaScript 代码：

   
   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;
}

  
  

  
  

   
   AJAX 服务器页面

   
   这个被 JavaScript 调用的服务器页面，是一个名为 "getcustomer.asp" 的简单的 ASP 文件。

   
   此页面使用 VBScript 针对 IIS 编写。可以使用 PHP 或其他服务器语言对它进行改写。

   
   此代码可运行针对某个数据库的 SQL，并以 HTML 表格返回结果：

   
   <%
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 文件进行交互式通信。
    
    
    
    
     
     AJAX XML 实例
     
     在下面的 AJAX 实例中，我们将演示如何通过使用 AJAX 技术，从 XML 文件中读取信息。
    
    
    
    
     
     在下面的下列列表中选择一个 CD
     
     
      
      选择 CD： 
     
     
     
     
      
      在此列出 CD 信息。
     
     
    
    
    
    
     
     AJAX 实例解释
     
     上面的例子包含了一个简单的 HTML 表单，以及指向一段 JavaScript 的链接：
     
     <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>

     
     正如您所看到的，它只是一个带有名为 "cds" 的下拉列表的简单 HTML 表单。

     
     表单下面的段落包含一个名为 "txtHint" 的 div。该 div 用作从 web 服务器接受的数据的位置占位符。

     
     当用户选择列表时，名为 "showCD" 的函数就会被执行。该函数的执行是 "onchange" 事件触发的。换句话说，每当用户改变了下拉列表的值，这个 showCD 函数就会被调用。

     
     下面列出了 JavaScript 代码。

    
    

    
    

     
     AJAX JavaScript

     
     这是存储在文件 "selectcd.js" 中的 JavaScript 代码：

     
     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 服务器页面

     
     被 JavaScript 调用的服务器页面，是名为 "getcd.asp" 的简单 ASP 文件。

     
     该页面使用 VBScript 编写，针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言，简单地重写该页面。

     
     请看在 PHP 中对应的例子（测试：缺具体页面）。

     
     该代码执行针对 XML 文件的查询，并以 HTML 返回结果：

     
     <%
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 可用来与 XML 文件进行交互式通信。
      
      
      
      
       
       AJAX XML 实例
       
       在下面的 AJAX 实例中，我们将演示如何通过使用 AJAX 技术，从 XML 文件中读取信息。
      
      
      
      
       
       在下面的下列列表中选择一个 CD
       
       
        
        选择 CD： 
       
       
       
       
        
        在此列出 CD 信息。
       
       
      
      
      
      
       
       AJAX 实例解释
       
       上面的例子包含了一个简单的 HTML 表单，以及指向一段 JavaScript 的链接：
       
       <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>

       
       正如您所看到的，它只是一个带有名为 "cds" 的下拉列表的简单 HTML 表单。

       
       表单下面的段落包含一个名为 "txtHint" 的 div。该 div 用作从 web 服务器接受的数据的位置占位符。

       
       当用户选择列表时，名为 "showCD" 的函数就会被执行。该函数的执行是 "onchange" 事件触发的。换句话说，每当用户改变了下拉列表的值，这个 showCD 函数就会被调用。

       
       下面列出了 JavaScript 代码。

      
      

      
      

       
       AJAX JavaScript

       
       这是存储在文件 "selectcd.js" 中的 JavaScript 代码：

       
       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 服务器页面

       
       被 JavaScript 调用的服务器页面，是名为 "getcd.asp" 的简单 ASP 文件。

       
       该页面使用 VBScript 编写，针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言，简单地重写该页面。

       
       请看在 PHP 中对应的例子（测试：缺具体页面）。

       
       该代码执行针对 XML 文件的查询，并以 HTML 返回结果：

       
       <%
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 可用来与 XML 文件进行交互式通信。
        
        
        
        
         
         AJAX XML 实例
         
         在下面的 AJAX 实例中，我们将演示如何通过使用 AJAX 技术，从 XML 文件中读取信息。
        
        
        
        
         
         在下面的下列列表中选择一个 CD
         
         
          
          选择 CD： 
         
         
         
         
          
          在此列出 CD 信息。
         
         
        
        
        
        
         
         AJAX 实例解释
         
         上面的例子包含了一个简单的 HTML 表单，以及指向一段 JavaScript 的链接：
         
         <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>

         
         正如您所看到的，它只是一个带有名为 "cds" 的下拉列表的简单 HTML 表单。

         
         表单下面的段落包含一个名为 "txtHint" 的 div。该 div 用作从 web 服务器接受的数据的位置占位符。

         
         当用户选择列表时，名为 "showCD" 的函数就会被执行。该函数的执行是 "onchange" 事件触发的。换句话说，每当用户改变了下拉列表的值，这个 showCD 函数就会被调用。

         
         下面列出了 JavaScript 代码。

        
        

        
        

         
         AJAX JavaScript

         
         这是存储在文件 "selectcd.js" 中的 JavaScript 代码：

         
         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 服务器页面

         
         被 JavaScript 调用的服务器页面，是名为 "getcd.asp" 的简单 ASP 文件。

         
         该页面使用 VBScript 编写，针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言，简单地重写该页面。

         
         请看在 PHP 中对应的例子（测试：缺具体页面）。

         
         该代码执行针对 XML 文件的查询，并以 HTML 返回结果：

         
         <%
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
%>

songhongrun2010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2010-12-27ajax (2)

AJAX Suggest 源代码的实例下面的源代码属于上一节的 AJAX 实例。您可以拷贝粘贴这些代码，然后亲自测试一下。AJAX HTML 页面这是 HTML 页面。它包含了一个简单的 HTML 表单，以及一个指向 JavaScript 的链接。 First Name:id="txt1" onkeyup="showHint(t
复制链接

扫一扫