通过javascript获取xml中的所有数据
尝试使用ajax/javascript从数据库中输出所有帖子以及每个帖子的所有评论 我通过ajax正确地从数据库获取实际数据,但在获取xml节点并在div容器中显示它们时遇到问题 显示的数据不正确。i、 e如果一篇文章有多条评论,它只显示一条;如果一篇文章没有评论,它不会每隔一篇文章显示一条 在尝试获取每篇文章的所有注释时,我在第一个循环中创建了另一个for循环,但在指定正确的childNode来运行循环时遇到了问题,所以我只能像下面的javascript中所示那样进行尝试 只是需要帮助来解决这个问题,我确信这与我如何使用xml节点有关 以下是xml结构的示例:通过javascript获取xml中的所有数据,javascript,xml,Javascript,Xml,尝试使用ajax/javascript从数据库中输出所有帖子以及每个帖子的所有评论 我通过ajax正确地从数据库获取实际数据,但在获取xml节点并在div容器中显示它们时遇到问题 显示的数据不正确。i、 e如果一篇文章有多条评论,它只显示一条;如果一篇文章没有评论,它不会每隔一篇文章显示一条 在尝试获取每篇文章的所有注释时,我在第一个循环中创建了另一个for循环,但在指定正确的childNode来运行循环时遇到了问题,所以我只能像下面的javascript中所示那样进行尝试 只是需要帮助来解决这
<post>
<post_unit poster_pix="john_doe.jpg" poster_name="john doe" poster_acctype="user" post_time="12:12 pm, Jul 5 2013" post_msg="Not so cool" post_img="post_img.jpg">
<comment com_name="ben tyler" com_acctype="admin" com_time="10:12 am, Jul 6 2013" com_msg="how about now">
</comment>
<comment com_name="thelma jones" com_acctype="supervisor" com_time="02:12 pm, Jul 6 2013" com_msg="okay">
</comment>
</post_unit>
<post_unit poster_pix="tom_hay.jpg" poster_name="Tom hayden" poster_acctype="user" post_time="12:12 pm, Jul 5 2013" post_msg="it aint working" post_img="post_img.jpg">
</post_unit>
</post>
<script>
var getStatusPost = XmlHttpRequestObject();
var mTimer;
function fetchAllData() {
getStatusPostFunc();
}
// Checking if XMLHttpRequest object exist in user browser
function XmlHttpRequestObject(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
} else{
document.getElementById("ajax_status").innerHTML = "Status: Unable to launch Chat Object. Consider upgrading your browser.";
}
}
// Fetch all post
function getStatusPostFunc(){
getStatusPost.open("GET", "inc/status_post_processor.php?all_post&t=" + Math.random(), true);
getStatusPost.onreadystatechange = statusPostReceivedHandler;
getStatusPost.timeout = 20000; //set timeout for xmlhttp request
getStatusPost.ontimeout = statusPostTimeoutHandler;
getStatusPost.send(null);
}
// Handle timeout for fetching post
function statusPostTimeoutHandler(){
getStatusPost.abort(); //abort the timedout xmlhttprequest
setTimeout(function(){getStatusPostFunc()}, 20000);
}
// Receives response from server for all post and comment
function statusPostReceivedHandler(){
if(getStatusPost.readyState == 4){
if(getStatusPost.status == 200){
var post_holder_div = document.getElementById('status_update_msg_area');
post_holder_div.innerHTML = '';
var xmldoc = getStatusPost.responseXML;
var postNode = xmldoc.getElementsByTagName("post_unit");
for(i = 0; i < postNode.length; i++){
post_holder_div.innerHTML += '<p><strong>Poster name:</strong> ' + postNode[i].getAttribute("poster_name") + '</p>';
post_holder_div.innerHTML += '<p><strong>Post:</strong> ' + postNode[i].getAttribute("post_msg") + '</p>';
post_holder_div.innerHTML += '<br><h3>Comments</h3><br>';
post_holder_div.innerHTML += '<p>' + postNode[i].childNodes[0].getAttribute("com_name") + ': <em>' + postNode[i].childNodes[0].getAttribute("com_msg") + '</em></p>';
post_holder_div.innerHTML += '<br /><hr /><br />'
}
}
}
}
</script>
下面是javascript的代码:
<post>
<post_unit poster_pix="john_doe.jpg" poster_name="john doe" poster_acctype="user" post_time="12:12 pm, Jul 5 2013" post_msg="Not so cool" post_img="post_img.jpg">
<comment com_name="ben tyler" com_acctype="admin" com_time="10:12 am, Jul 6 2013" com_msg="how about now">
</comment>
<comment com_name="thelma jones" com_acctype="supervisor" com_time="02:12 pm, Jul 6 2013" com_msg="okay">
</comment>
</post_unit>
<post_unit poster_pix="tom_hay.jpg" poster_name="Tom hayden" poster_acctype="user" post_time="12:12 pm, Jul 5 2013" post_msg="it aint working" post_img="post_img.jpg">
</post_unit>
</post>
<script>
var getStatusPost = XmlHttpRequestObject();
var mTimer;
function fetchAllData() {
getStatusPostFunc();
}
// Checking if XMLHttpRequest object exist in user browser
function XmlHttpRequestObject(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
} else{
document.getElementById("ajax_status").innerHTML = "Status: Unable to launch Chat Object. Consider upgrading your browser.";
}
}
// Fetch all post
function getStatusPostFunc(){
getStatusPost.open("GET", "inc/status_post_processor.php?all_post&t=" + Math.random(), true);
getStatusPost.onreadystatechange = statusPostReceivedHandler;
getStatusPost.timeout = 20000; //set timeout for xmlhttp request
getStatusPost.ontimeout = statusPostTimeoutHandler;
getStatusPost.send(null);
}
// Handle timeout for fetching post
function statusPostTimeoutHandler(){
getStatusPost.abort(); //abort the timedout xmlhttprequest
setTimeout(function(){getStatusPostFunc()}, 20000);
}
// Receives response from server for all post and comment
function statusPostReceivedHandler(){
if(getStatusPost.readyState == 4){
if(getStatusPost.status == 200){
var post_holder_div = document.getElementById('status_update_msg_area');
post_holder_div.innerHTML = '';
var xmldoc = getStatusPost.responseXML;
var postNode = xmldoc.getElementsByTagName("post_unit");
for(i = 0; i < postNode.length; i++){
post_holder_div.innerHTML += '<p><strong>Poster name:</strong> ' + postNode[i].getAttribute("poster_name") + '</p>';
post_holder_div.innerHTML += '<p><strong>Post:</strong> ' + postNode[i].getAttribute("post_msg") + '</p>';
post_holder_div.innerHTML += '<br><h3>Comments</h3><br>';
post_holder_div.innerHTML += '<p>' + postNode[i].childNodes[0].getAttribute("com_name") + ': <em>' + postNode[i].childNodes[0].getAttribute("com_msg") + '</em></p>';
post_holder_div.innerHTML += '<br /><hr /><br />'
}
}
}
}
</script>
var getStatusPost=XmlHttpRequestObject();
var-mTimer;
函数fetchAllData(){
getStatusPostFunc();
}
//检查用户浏览器中是否存在XMLHttpRequest对象
函数XmlHttpRequestObject(){
if(window.XMLHttpRequest){
返回新的XMLHttpRequest();
}
else if(window.ActiveXObject){
返回新的ActiveXObject(“Microsoft.XMLHTTP”);
}否则{
文档.GETelEnMyBid(“Ajax”状态).nNeNeld=“状态:无法启动聊天对象。考虑升级浏览器。”
}
}
//通邮
函数getStatusPostFunc(){
getStatusPost.open(“GET”、“inc/status\u post\u processor.php?all\u post&t=“+Math.random(),true”);
getStatusPost.onreadystatechange=statusPostReceivedHandler;
getStatusPost.timeout=20000;//设置xmlhttp请求的超时
getStatusPost.ontimeout=statusPostTimeoutHandler;
getStatusPost.send(空);
}
//获取日志的句柄超时
函数statusPostTimeoutHandler(){
getStatusPost.abort();//中止timedout xmlhttprequest
setTimeout(函数(){getStatusPostFunc()},20000);
}
//从服务器接收所有帖子和评论的响应
函数状态PostReceivedHandler(){
如果(getStatusPost.readyState==4){
如果(getStatusPost.status==200){
var post_holder_div=document.getElementById('status_update_msg_area');
post_holder_div.innerHTML='';
var xmldoc=getStatusPost.responseXML;
var postNode=xmldoc.getElementsByTagName(“post_单位”);
对于(i=0;i海报名称:'+postNode[i].getAttribute(“海报名称”)+'';
post_holder_div.innerHTML+='post:'+postNode[i].getAttribute(“post_msg”)+'';
post_holder_div.innerHTML+='
评论
';
post_holder_div.innerHTML++=''+postNode[i]。childNodes[0]。getAttribute(“com_名称”)+':'+postNode[i]。childNodes[0]。getAttribute(“com_msg”)+'';
post_holder_div.innerHTML+='
'
}
}
}
}
如果能在这方面得到帮助,我们将非常高兴和感激。我想您可能希望将XML结构更改为类似的内容
<posts>
<post>
<author>
<name>John Doe</name>
<acctype>Admin</acctype>
</author>
<time>09/07/2013</time>
<msg>This is a message</msg>
<img>
<url>post_img.jpg</url>
</img>
<comments>
<comment>
<author>
<name>John Smith</name>
<acctype>basic</acctype>
</author>
<time>09/07/2013</time>
<content>comment number 1</content>
</comment>
<comment>
<author>
<name>Jane Doe</name>
<acctype>basic</acctype>
</author>
<time>09/07/2013</time>
<content>comment number 1</content>
</comment>
</comments>
</post>
<post>
......
<post>
</posts>
无名氏
管理
09/07/2013
这是一条信息
post_img.jpg
约翰·史密斯
基本的
09/07/2013
评论1
无名氏
基本的
09/07/2013
评论1
......
然后你可以有你的JavaScript如下
var post_holder_div = document.getElementById('status_update_msg_area');
post_holder_div.innerHTML = '';
var posts = xmlDom.getElementsByTagName("post"), domString = '';
for (var i = 0; i < posts.length; i++) {
var poster = posts[i].getElementsByTagName('author')[0].childNodes[0].textContent,
message = posts[i].getElementsByTagName('msg')[0].textContent,
time = posts[i].getElementsByTagName('time')[0].textContent,
comments = posts[i].getElementsByTagName('comments')[0].childNodes;
domString += '<p><strong>Poster name:</strong> ' + poster + '</p>';
domString += '<p><strong>Post:</strong> ' + message + '</p>';
if (comments.length) {
domString += '<h4>Comments</h4>';
for (var j = 0; j < comments.length; j++) {
var commenter = comments[j].getElementsByTagName('author')[0].childNodes[0].textContent,
comment = comments[j].getElementsByTagName('content')[0].textContent;
domString += '<p>' + commenter + ': <em>' + comment + '</em></p>';
}
}
}
post_holder_div.innerHTML = domString;
var post\u holder\u div=document.getElementById('status\u update\u msg\u area');
post_holder_div.innerHTML='';
var posts=xmlDom.getElementsByTagName(“post”),domString='';
对于(变量i=0;i海报名称:'+Poster+'';
domString+='帖子:'+message+'';
如果(注释长度){
domString+=“注释”;
对于(var j=0;j';
}
}
}
post\u holder\u div.innerHTML=domString;
这会给你一个大致的想法。使用您希望嵌套的注释,即
作为
的子级。是的,就像是
注:当然,JS代码可以被重构并更整洁,但这只是帮助你前进的道路
我希望这有帮助:)