• AJAX ResponseXML 实例


    与 responseText 以字符串返回 HTTP 响应不同,responseXML 以 XML 返回响应。

    ResponseXML 属性返回 XML 文档对象,可使用 W3C DOM 节点树的方法和属性来检查和解析该对象。

    AJAX ResponseXML 实例

    在下面的 AJAX 实例中,我们将演示网页如何使用 AJAX 技术从数据库中读取信息。这次,这些从数据库中选取的数据将被转换为 XML 文档,然后我们将使用 DOM 来提取要显示的值。

    选取下拉列表中的名称

    AJAX 实例解释

    上面的例子包含一个 HTML 表单,若干个保留所返回数据的 <span> 元素,以及指向一段 JavaScript 的链接:

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

    上面的例子包含了一个 HTML 表单,该表单带有一个名为 "customers" 下拉框。

    当用户选取下拉框中的客户时,函数 "showCustomer()" 就会被执行。事件 "onchange" 会触发该函数执行。换句话说,每当用户改变下拉框中的值时,函数 showCustomer() 就会被调用。

    下面列出了 JavaScript 代码。

    AJAX JavaScript

    这是存储在文件 "selectcustomer_xml.js" 中的 JavaScript 代码:

    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 文档。

  • 相关阅读:
    angular11源码探索七[服务二]
    angular11源码探索六[服务基础一]
    有趣的特效,嘤嘤嘤
    angular11学习(十八)
    matplotlib 去掉小方框
    xlrd.biffh.XLRDError 问题报错
    页面点击出现蓝色背景色
    移动端不显示滚动条
    Swiper垂直方向滑动,高度获取不正确的解决方法
    二维树状数组
  • 原文地址:https://www.cnblogs.com/bicabo/p/1644278.html
Copyright © 2020-2023  润新知