admin 发表于 2023-2-16 18:54:45

PHP 实例 - AJAX 与 XML

<div id="article_content" class="article_content clearfix">
      <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
      <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
                <div id="content_views" class="htmledit_views">
                  <p>AJAX 可用来与 XML 文件进行交互式通信。</p>
<hr>
<h2>AJAX XML 实例</h2>
<p>下面的实例将演示网页如何通过 AJAX 从 XML 文件读取信息&#xff1a;</p>
<h2>实例</h2>
<p> Select a CD: Bob Dylan Bee Gees Cat Stevens </p>
<p></p>
<p>CD info will be listed here...</p>
<p></p>
<p></p>
<hr>
<h2>实例解释 - HTML 页面</h2>
<p>当用户在上面的下拉列表中选择某张 CD 时&#xff0c;会执行名为 &#34;showCD()&#34; 的函数。该函数由 &#34;onchange&#34; 事件触发&#xff1a;</p>
<pre><html>
<head>
<script>
function showCD(str)
{
    if (str&#61;&#61;&#34;&#34;)
    {
        document.getElementById(&#34;txtHint&#34;).innerHTML&#61;&#34;&#34;;
        return;
    }
    if (window.XMLHttpRequest)
    {
        // IE7&#43;, Firefox, Chrome, Opera, Safari 浏览器执行
        xmlhttp&#61;new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行
        xmlhttp&#61;new ActiveXObject(&#34;Microsoft.XMLHTTP&#34;);
    }
    xmlhttp.onreadystatechange&#61;function()
    {
        if (xmlhttp.readyState&#61;&#61;4 && xmlhttp.status&#61;&#61;200)
        {
            document.getElementById(&#34;txtHint&#34;).innerHTML&#61;xmlhttp.responseText;
        }
    }
    xmlhttp.open(&#34;GET&#34;,&#34;getcd.php?q&#61;&#34;&#43;str,true);
    xmlhttp.send();
}
</script>
</head>
<body>

<form>
Select a CD:
<select name&#61;&#34;cds&#34; οnchange&#61;&#34;showCD(this.value)&#34;>
<option value&#61;&#34;&#34;>Select a CD:</option>
<option value&#61;&#34;Bob Dylan&#34;>Bob Dylan</option>
<option value&#61;&#34;Bonnie Tyler&#34;>Bonnie Tyler</option>
<option value&#61;&#34;Dolly Parton&#34;>Dolly Parton</option>
</select>
</form>
<div id&#61;&#34;txtHint&#34;><b>CD info will be listed here...</b></div>

</body>
</html></pre>
<p>showCD() 函数会执行以下步骤&#xff1a;</p>
<ul><li>检查是否有 CD 被选择</li><li>创建 XMLHttpRequest 对象</li><li>创建在服务器响应就绪时执行的函数</li><li>向服务器上的文件发送请求</li><li>请注意添加到 URL 末端的参数&#xff08;q&#xff09;&#xff08;包含下拉列表的内容&#xff09;</li></ul>
<hr>
<h2>PHP 文件</h2>
<p>上面这段通过 JavaScript 调用的服务器页面是名为 &#34;getcd.php&#34; 的 PHP 文件。</p>
<p>PHP 脚本加载 XML 文档&#xff0c;&#34;<ahref="https://www.runoob.com/try/demo_source/cd_catalog.xml">cd_catalog.xml</a>&#34;&#xff0c;运行针对 XML 文件的查询&#xff0c;并以 HTML 返回结果&#xff1a;</p>
<pre><?php
$q&#61;$_GET[&#34;q&#34;];

$xmlDoc &#61; new DOMDocument();
$xmlDoc->load(&#34;cd_catalog.xml&#34;);

$x&#61;$xmlDoc->getElementsByTagName('ARTIST');

for ($i&#61;0; $i<&#61;$x->length-1; $i&#43;&#43;)
{
    // 处理元素节点
    if ($x->item($i)->nodeType&#61;&#61;1)
    {
        if ($x->item($i)->childNodes->item(0)->nodeValue &#61;&#61; $q)
        {
            $y&#61;($x->item($i)->parentNode);
        }
    }
}

$cd&#61;($y->childNodes);

for ($i&#61;0;$i<$cd->length;$i&#43;&#43;)
{
    // 处理元素节点
    if ($cd->item($i)->nodeType&#61;&#61;1)
    {
        echo(&#34;<b>&#34; . $cd->item($i)->nodeName . &#34;:</b> &#34;);
        echo($cd->item($i)->childNodes->item(0)->nodeValue);
        echo(&#34;<br>&#34;);
    }
}
?></pre>
<p>当 CD 查询从 JavaScript 发送到 PHP 页面时&#xff0c;将发生&#xff1a;</p>
<ol><li>PHP 创建 XML DOM 对象</li><li>查找所有 <artist> 元素中与 JavaScript 所传数据相匹配的名字</li><li>输出 album 的信息&#xff0c;并发送回 &#34;txtHint&#34; 占位符</li></ol>
                </div>
      </div>
      <div id="treeSkill"></div>
页: [1]
查看完整版本: PHP 实例 - AJAX 与 XML