使用Javascript和PHP对服务端XML文档进行操作

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量840 收藏 1
点赞数
分类专栏： web前端 文章标签： javascript xml DOM PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/arqaboy/article/details/8709513
版权

编辑工具与测试环境

netbeans 7.2.1

主要用来创建一个php项目，用于编辑php程序。

webstorm 6

主要用来方便javascript代码的编写工作。

xampp 1.8.1

主要需要使用其中的apache服务器。

chrome 26.0.1386.0

用来调试javascript代码

代码

index.html

<html>
  <head> 
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> 
    <title>AJAX with PHP: Quickstart</title>
    <link rel=stylesheet href="css/mystyle.css" type="text/css">
    <script type="text/javascript" src="js/myutil.js"></script>
    <script type="text/javascript" src="js/quickstart.js"></script>
  </head>
  <body>    
    <div>
        <div id="xmltable">

        </div>
        <div class="getxml">
            <input type="button" οnclick="getXmlFromPhp()" value="获取XML文档" />
        </div>
    </div>
    <div>
        <div class="editxml">
            <table border="1" class="fancytable" id=table2>
                <tr class="headerrow">
                    <td>CD专辑名</td>
                    <td>表演者</td>
                    <td>国家</td>
                    <td>发行公司</td>
                    <td>售价</td>
                    <td>出版年份</td>
                </tr>
                <tr class="datarowodd" id="editform" name="editform">
                    <td><input type="text" id="title" name="title"/></td>
                    <td><input type="text" id="artist" name="artist"/></td>
                    <td><input type="text" id="country" name="country"/></td>
                    <td><input type="text" id="company" name="company"/></td>
                    <td><input type="text" id="price" name="price"/></td>
                    <td><input type="text" id="year" name="year"/></td>
                </tr>
            </table>
        </div>
        <div>
            <input type="button" οnclick="appendRecord()" value="添加记录" />
            <input type="button" οnclick="deleteRecord()" value="删除记录" />
        </div>
    </div>
  </body>
</html>

js/myutil.js中的函数

函数：createXmlHttpRequestObject()
//获取XMLHttpRequest对象
function createXmlHttpRequestObject(){
    var xmlhttp;
    //IE
    if(window.ActiveXObject){
        try{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e){
            xmlhttp = false;
        }
    }
    //Mozilla或其他browsers
    else{
        try{
            xmlhttp = new XMLHttpRequest();
        }catch (e){
            xmlhttp = false;
        }
    }
    if (!xmlhttp){
        alert("实例化XMLHttpRequest对象出错.");
        return xmlhttp;
    }
    else
        return xmlhttp;
}
函数：isnull()
//判断子节点是否为空
function isnull(obj)
{
    var nodevalue = "";
    if(obj.childNodes[0] != null)
    {
        nodevalue =obj.childNodes[0].nodeValue;
    }
    return nodevalue;
}
函数：xml2string(node)
function xml2string(node) {
    if (typeof(XMLSerializer) !== 'undefined') {
        var serializer = new XMLSerializer();
        return serializer.serializeToString(node);
    } else if (node.xml) {
        return node.xml;
    }
}

js/quickstart.js中的函数

变量
//保存XMLHttpRequest对象引用
var xmlHttp = createXmlHttpRequestObject();
//保存鼠标点击的表格table1的当前一行记录对应的HTML元素tr的id属性的值
var currentRecord;
//用于保存XML的DOM对象
var orderDoc;

函数：getDataByid(number)

//根据编号获取数据
function getDataByid(number){
    //获取number序号的CD元素节点的所有子元素节点的值
    var title =isnull(orderDoc.getElementsByTagName("TITLE")[number]);
    var artist =isnull(orderDoc.getElementsByTagName("ARTIST")[number]);
    var country =isnull(orderDoc.getElementsByTagName("COUNTRY")[number]);
    var company = isnull(orderDoc.getElementsByTagName("COMPANY")[number]);
    var price =isnull(orderDoc.getElementsByTagName("PRICE")[number]);
    var year =isnull(orderDoc.getElementsByTagName("YEAR")[number]);

    var test = number%2;
    var std ="";
    //根据number的奇偶性添加，表格记录行
    if(test == 1) {
        std='<tr id='+'"'+ (number+1) +'"' + 'class="datarowodd">' +
            '<td>'+(title)+'</td><td>'+(artist)+'</td><td>'+(country)+'</td>' +
            '<td>'+(company)+'</td><td>'+(price)+'</td><td>'+(year)+'</td>' +
            '</tr>';
    }else if(test == 0){
        std='<tr id='+'"'+ (number+1) +'"' + 'class="dataroweven">' +
            '<td>'+(title)+'</td><td>'+(artist)+'</td><td>'+(country)+'</td>' +
            '<td>'+(company)+'</td><td>'+(price)+'</td><td>'+(year)+'</td>' +
            '</tr>';
    }
    return std;
}

函数：getContent()
/*
获取XML文档树中所有CD元素节点，并以HTML表格形式保存
 */
function getContent(){
    var stringsss = "";
    //获取CD元素节点的个数
    var items=orderDoc.getElementsByTagName("CD").length;
    //添加HTML表格，以及表格标题行
    stringsss+='<table border="1" class="fancytable" id=table1>' +
        '<tr class="headerrow">' + 
        '<td>CD专辑名</td><td>表演者</td><td>国家</td>' + 
        '<td>发行公司</td><td>售价</td><td>出版年份</td></tr>';
    //将每一个CD元素节点内容作为表格的一行记录
    for(i=0;i<items;i++){
        stringsss+=getDataByid(i);
    }
    //添加HTML表格结束标签
    stringsss+='</table>'
    //在HTML文档中的id="xmltable"元素内容中添加stringsss字符串，即表格的HTML代码串。
    document.getElementById("xmltable").innerHTML = stringsss;
    //为表格的每行添加onclick事件处理方法
    addTrEvent();
}
函数：getXmlFromPhp()
/*
构造并发送HTTP请求，请求服务器发送XML文档
 */
function getXmlFromPhp(){
    //判断XMLHttpRequest对象是否空闲
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
  {
    xmlHttp.open("GET", "sendXML.php", true);  
    //指定处理服务器响应内容的方法
    xmlHttp.onreadystatechange = recvServerXml;
    //向服务器发送请求
    xmlHttp.send(null);
  }else{
      alert("XMLHttpRequest对象忙！");
      setTimeout('getXmlFromPhp()', 1000);
  }
}
函数：recvServerXml()
/*
处理服务端发送来的XML文档内容
用来根据接收到的XML文档，生成HTML表格代码
 */
function recvServerXml(){
    //当传送完成才继续
  if (xmlHttp.readyState == 4){
    //状态200表示传送成功完成
    if (xmlHttp.status == 200){
      //提取从服务器返回的XML文档
      xmlResponse = xmlHttp.responseXML;
      //将获取的XML文档DOM树结构对象赋值给全局变量orderDoc，以备之后使用
      orderDoc = xmlResponse;
      //构造HTML表格
      getContent();
    } 
    //如果返回一个非200的HTTP状态，则表示出错
    else{
      alert("在访问服务器时出现错误: " + xmlHttp.statusText);
    }
  }
}
函数：saveXmlToPhp()
/*
构造并发送HTTP请求，将修改的XML DOM对象发送给服务器端保存
并将新的DOM对象返回，以便更新客户端。
 */
function saveXmlToPhp(){
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
    {
        xmlHttp.open("POST", "saveXML.php", true);
        //将XML DOM对象转换成字符串
        var xmlstr = xml2string(orderDoc);
        //设置本次请求的结果处理方法
        xmlHttp.onreadystatechange = recvServerXml;
        //将XML文档序列化字符串作为参数发给服务器
        xmlHttp.send(xmlstr);
    }else{
        alert("XMLHttpRequest对象忙！");
        setTimeout('saveXmlToPhp()', 1000);
    }
}
函数：appendRecord()
/*
在本地的XML DOM对象中添加一个新的CD子节点
 */
function appendRecord(){
    //对空白编辑框的计数
    var emptyCount = 0;
    //循环检查table2中的文本编辑框，是否为全空，如果全为空则退出appendRecord()
    for(var i=0; i<6;i++){
        if(document.getElementById("table2").getElementsByTagName("input")[i].value == ""){
            emptyCount++;
        }
    }
    if(emptyCount >= 6){
        alert("至少有一个记录项不为空");
        return;
    }
    //保存CD元素的所有子元素名，以备循环创建子节点之用
    var nodeNameArray = new Array("TITLE","ARTIST","COUNTRY","COMPANY","PRICE","YEAR");
    //获取根元素节点
    var root = orderDoc.documentElement;
    //获取DOM树中CD元素节点的个数
    var cdnodeNum = orderDoc.getElementsByTagName("CD").length;
    //创建一个新元素节点：CD
    var newCdNode = orderDoc.createElement("CD");
    //将id属性节点设置为新建的CD元素节点的属性
    newCdNode.setAttribute("id",(cdnodeNum+1).toString());
    //循环添加CD元素节点的各个子节点
    for(var i=0; i< 6; i++){
        //依据nodeNameArray数组中字符串的先后顺序创建CD的子元素节点
        var cdChildNode = orderDoc.createElement(nodeNameArray[i]);
        //创建文本子节点
        var textNode = orderDoc.createTextNode(document.getElementById("table2").getElementsByTagName("input")[i].value);
        //将文本子节点添加到新建的元素节点中
        cdChildNode.appendChild(textNode);
        //将新建的元素节点添加为之前创建的CD元素节点中，作为其子元素节点。
        newCdNode.appendChild(cdChildNode);
    }
    //将CD元素节点添加的根元素节点中，作为其子元素节点
    root.appendChild(newCdNode);
    //请求服务器保存更新后的XML文档内容，并返回新的XML文档
    saveXmlToPhp();
}
函数：deleteRecord()
function deleteRecord(){
    //获取XML DOM对象中所有CD元素节点
    var cdNodeList = orderDoc.getElementsByTagName("CD");
    //获取根元素节点
    var rootElement = orderDoc.documentElement;
    //获取CD元素节点的个数
    var cdNodeNum = cdNodeList.length;
    //循环找到一个id属性值等于currentRecord的CD元素节点，然后将CD元素节点，从根节点中移除
    for(var i=0;i<cdNodeNum;i++){
        if(cdNodeList[i].getAttribute("id") == currentRecord){
            rootElement.removeChild(cdNodeList[i]);
            break;
        }
    }
    //获得移除后的XML DOM对象中的CD元素节点集
    cdNodeList = orderDoc.getElementsByTagName("CD");
    cdNodeNum =  cdNodeList.length;
    //更新所有CD元素节点的id属性值
    for(var i=0;i<cdNodeNum;i++){
        cdNodeList[i].setAttribute("id",(i+1).toString());
    }
    //请求服务器保存更新后的XML文档，并返回新的XML文档
    saveXmlToPhp();
}
函数：addTrEvent()
/*
为table1的每行添加onclick事件处理方法
 */
function addTrEvent()
{
    var table = document.getElementById("table1");
    for(var i=0;i<table.rows.length;i++){
        table.rows[i].onclick = new Function("trFunc(this)")
    }
}
函数：trFunc(tr)
/*
点击表格记录行时，要处理的事情
 */
function trFunc(tr){
    //记录当前点击的记录行tr元素的属性id的值，以便删除记录使用
    if(!tr){
        return;
    }
    currentRecord = tr.getAttribute("id");
    if(window.cur){
        if(tr.getAttribute("class") == "datarowodd")
            window.cur.style.background = "#efefef";
        else if(tr.getAttribute("class") == "dataroweven")
            window.cur.style.background = "#fff";
    }
    tr.style.background = "#CCC";
    window.cur = tr;
    var childs = tr.childNodes;
    var items = childs.length;
    for(var i=0; i< items; i++){
        if(childs[i].hasChildNodes()){
            //如果有子节点(文本子节点)，就将该子节点的值赋值给文本框
            document.getElementById("table2").getElementsByTagName("input")[i].value = childs[i].firstChild.nodeValue;
        }else{
            //如果没有文本子节点，也就是表格单元内容为空时，设置文本框内容为空
            document.getElementById("table2").getElementsByTagName("input")[i].value = "";
        }
    }
}

sendXML.php

<?php
$xmlString = file_get_contents('cd_data.xml');
header('Content-Type: text/xml;charset=utf-8');
echo $xmlString;
?>

saveXML.php

<?php
$besavexml = file_get_contents("php://input");
$XML = simplexml_load_string($besavexml);
$XML->asXML('cd_data.xml');

header('Content-Type: text/xml;charset=utf-8');
echo $besavexml;
?>

css/mystyle.css

.fancytable{border:1px solid #cccccc; width:100%; border-collapse:collapse;}
.fancytable td{border:1px solid #cccccc; color:#555555;text-align:left; line-height:28px;}
.datarowodd{background-color:#ffffff;}
.dataroweven{ background-color:#efefef;}
.headerrow{ background-color:#0066cc;}
.headerrow td{ color:#ffffff; text-align:center;}
.coolborder{
    border:1px solid #0066cc; padding:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

cd_data.xml

<?xml version="1.0" encoding="utf-8"?>
<CATALOG>
	<CD>
		<TITLE>Empire Burlesque</TITLE>
		<ARTIST>Bob Dylan</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Columbia</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1985</YEAR>
	</CD>
	<CD>
		<TITLE>Hide your heart</TITLE>
		<ARTIST>Bonnie Tyler</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>CBS Records</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1988</YEAR>
	</CD>
	<CD>
		<TITLE>Greatest Hits</TITLE>
		<ARTIST>Dolly Parton</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>RCA</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1982</YEAR>
	</CD>
	<CD>
		<TITLE>Still got the blues</TITLE>
		<ARTIST>Gary Moore</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Virgin records</COMPANY>
		<PRICE>10.20</PRICE>
		<YEAR>1990</YEAR>
	</CD>
	<CD>
		<TITLE>Eros</TITLE>
		<ARTIST>Eros Ramazzotti</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>BMG</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1997</YEAR>
	</CD>
</CATALOG>


代码测试说明：

假设项目所有文件存放在xmldomtest文件夹中，则xmldomtest下的目录结构大致如下：


将xmldomtest这个文件夹拷贝到xampp的安装目录下的htdocs子目录中，启动apache服务器，然后在chrome浏览器地址栏中输入http://127.0.0.1/xmldomtest/index.html即可。

注意事项

所有文件保存到磁盘全部采用utf-8编码方式保存。

测试截图





本人只是略懂皮毛，刚刚初学，东拼西凑出此文章，其根本目的只作为备忘，如能为和我一样的初学者提供一点借鉴和帮助，就略感欣慰了。

无声无色
关注
专栏目录
C++之TR1::function
u013696062的专栏
11-07 3002
对于TR1文档中的function的总结。
浅谈PHP与javascript之JSON XML 数组 对象三者的区别
freshlover的专栏
04-09 2378
一、认识JSON是什么 先来说说什么是JSON。所谓json即javascript Object Notation (javaScript对象符号).它是基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。JSON是一种结构化的，轻量级的完全独立于语言的,基于文本的数据传输格式，使用了类似于C语言家族的习惯（包括C
使用JavaScript阅读和显示服务器端XML文章
01-08 108
XML是在其Web服务的工作，并在与一些客户端和服务器端语言的配合，也能够被很好的效果非常重要基地。 让我们来看看如何使用XML和客户端的JavaScript来显示一个XML文件，访问子元素的内容，操纵元素，以及更多！ 浏览器问题 当涉及到客户端的语言，浏览器不兼容是一个重大问题。 但在这里，使用XML和JavaScript，它的XML是这样的问题：不是所有的浏览器都支持XML文档的解析。...
PHP操作XML
benben0729的专栏
07-30 2415
PHP简单读取XML DOM DOM:Document object model,文档对象模型 节点的分类 元素节点 属性节点 值节点 注释节点 根节点（document才是根节点） 生成XML文档 读取XMl文档 递归遍历XML nodeType的值 值 节点 1 元素节点 ...
php输出xml的实例(JavaScript操作XML实例)
usershuai的专栏
03-14 2683
1.php输出xml的实例header(Content-Type: text/xml);$sql = "select * from article order by post_date limit 100";$re = $db->query($sql);echo "/n";echo "/n";while($row = $db->fetchArray($re)){ec
JavaScript在服务端（Node.js）和客户端的区别
weixin_42625218的博客
03-03 7323
JavaScript是一种脚本语言，一般运行在客户端，而Node.js可以使JavaScript运行在服务端。JavaScript包含三部分：ECMAScript、DOM、BOM三部分。 ECMAScript是JavaScript的核心语法 DOM是HTML和XML的应用程序接口（API），用于控制文档的内容与结构 BOM（浏览器对象模型）可以对浏览器窗口进行访问和操作 区别： 在客户端，Ja...
javascript 解析ajax返回的xml和json格式的数据
MrCharles在CSDN
01-13 1598
写个例子，以备后用 一、JavaScript 解析返回的xml格式的数据： 1、javascript版本的ajax发送请求 （1）、创建XMLHttpRequest对象，这个对象就是ajax请求的核心，是ajax请求和响应的信息载体，单是不同浏览器创建方式不同 （2）、请求路径 （3）、使用open方法绑定发送请求 （4）、使用send() 方法发送请求
JavaScript 入门手册(一)
帅次的博客
03-07 1256
中的 JavaScript 函数一、JavaScript 是什么?JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：HTML 定义了网页的内容CSS 美化了网页的仰视JavaScript 控制了网页的行为1.1 JavaScript 介绍JavaScript（简称“JS”）是一种轻量级的面向对象的编程语言，既能用在浏览器中控制页面交互，也能用在服务器端作为网站后台（借助 Node.js），因此 JavaScript 是一种全栈式的编程语言。
Sites:实际执行以HTML，CSS，DOM，JavaScript，JQuery和PHP开发的网站
04-16
**DOM (Document Object Model)** 是一个标准，它将HTML或XML文档表示为树形结构，允许JavaScript等脚本语言动态地访问和修改页面内容。通过DOM，开发者可以添加、删除或更改元素，实现交互性。 **JavaScript** 是...
jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
10-23
使用Ajax，可以在不重新加载页面的情况下，对网页的部分内容进行更新。 Ajax全称是"Asynchronous JavaScript and XML"（异步JavaScript和XML），它不是一种单一技术，而是包括：HTML或XHTML、CSS、JavaScript、DOM...
mindmap:Web应用程序，用于在服务器端使用PHP并在客户端使用JavaScript，HTML，CSS和SVG来协作地创建有方向的，带有标签的多重图形
05-18
总结起来，mindmap项目是一个使用PHP进行后端处理，JavaScript、HTML、CSS和SVG构建前端交互的Web应用程序，它提供了用户协作创建和编辑有方向、带标签的思维导图的功能。这个项目展示了多种Web开发技术的集成运用，...
scheduler-caldav:python caldav 事件和 XML 数据的 DHTMLX 调度程序之间的适配器
06-22
4. **XML处理**：在Python中，可以使用ElementTree库来解析和生成XML文档。开发者需要熟练掌握如何从iCalendar对象中提取信息并构造XML元素。 5. **PHP**：虽然标签中提到了PHP，但描述中并没有明确提及。在实际...
xml介绍和Jsoup简单使用
半束海棠的博客
05-21 598
xml的相关内容学习,包括概念解析,对比json等.还有Jsoup的简单使用介绍.
Func委托
buynider的专栏
04-28 820
Fun委托的声明：  public
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2687
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 590
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
JavaScript与MSXML处理XML文档详解
通过这些节点，开发者可以在不依赖XML语义的情况下，自由地读取和操作文档信息。解析后的文档节点可以按需遍历，无需保持原始的顺序。 解析XML文档的过程通常涉及以下几个步骤：首先，MSXML接收XML文档并验证其语法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值