[英]fetching xml data into a div via ajax and javascript
Building a chat app and I am trying to fetch all logged in user into a div with ID name "chat_members". 构建一个聊天应用程序,我试图将所有登录的用户提取到ID名称为“ chat_members”的div中。 But nothing shows up in the div and I have verified that the xml file structure is correct but the javascript i'm using alongside ajax isn't just working.
但是div中没有任何显示,并且我已经验证了xml文件结构是正确的,但是我与ajax一起使用的javascript并不能正常工作。 I think the problem is around the area of the code where I'm trying to spool out the xml data in the for loop.
我认为问题出在我试图在for循环中后台处理xml数据的代码区域。
XML data sample: XML数据样本:
<member>
<user id="1">Ken Sam</user>
<user id="2">Andy James</user>
</member>
Javascript Java脚本
<script language="javascript">
// JavaScript Document
var getMember = XmlHttpRequestObject();
var lastMsg = 0;
var mTimer;
function startChat() {
getOnlineMembers();
}
// 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{
//alert("Status: Unable to launch Chat Object. Consider upgrading your browser.");
document.getElementById("ajax_status").innerHTML = "Status: Unable to launch Chat Object. Consider upgrading your browser.";
}
}
function getOnlineMembers(){
if(getMember.readyState == 4 || getMember.readyState == 0){
getMember.open("GET", "get_chat.php?get_member", true);
getMember.onreadystatechange = memberReceivedHandler;
getMember.send(null);
}else{
// if the connection is busy, try again after one second
setTimeout('getOnlineMembers()', 1000);
}
}
function memberReceivedHandler(){
if(getMember.readyState == 4){
if(getMember.status == 200){
var chat_members_div = document.getElementById('chat_members');
var xmldoc = getMember.responseXML;
var members_nodes = xmldoc.getElementsByTagName("member");
var n_members = members_nodes.length;
for (i = 0; i < n_members; i++) {
chat_members_div.innerHTML += '<p><a href="' + members_nodes[i].childNodes.nodeValue + '">' + members_nodes[i].childNodes.nodeValue + '</a></p>';
chat_members_div.scrollTop = chat_members_div.scrollHeight;
}
mTimer = setTimeout('getOnlineMembers();',2000); //Refresh our chat members in 2 seconds
}
}
}
</script>
HTML page HTML页面
<body onLoad="javascript:startChat();">
<!--- START: Div displaying all online members --->
<div id="chat_members">
</div>
<!---END: Div displaying all online members --->
</body>
I'm new to ajax and would really appreciate getting help with this. 我是ajax的新手,非常感谢获得与此相关的帮助。 Thanks!
谢谢!
To troubleshoot this: 要解决此问题:
-- Use an HTTP analyzer like HTTP Fiddler. -使用HTTP分析器(例如HTTP Fiddler)。 Take a look at the communication -- is your page calling the server and getting the code that you want back, correctly, and not some type of HTTP error?
看一下通信-您的页面是在调用服务器并正确获取想要返回的代码,而不是某种HTTP错误吗?
-- Check your IF statements, and make sure they're bracketed correctly. -检查您的IF语句,并确保将其正确括在括号中。 When I see:
当我看见:
if(getMember.readyState == 4 || getMember.readyState == 0){
I see confusion. 我感到困惑。 It should be:
它应该是:
if( (getMember.readyState == 4) || (getMember.readyState == 0)){
It might not make a difference, but it's good to be absolutely sure. 可能没有什么不同,但是绝对可以保证。
-- Put some kind of check in your javascript clauses after the IF to make sure program flow is executing properly. -在IF后面的javascript子句中进行某种检查,以确保程序流正确执行。 If you don't have a debugger, just stick an alert box in there.
如果您没有调试器,只需在其中粘贴一个警报框即可。
You must send the xmlhttp request before checking the response status: 您必须先发送xmlhttp请求,然后才能检查响应状态:
function getOnlineMembers(){
getMember.open("GET", "get_chat.php?get_member", true);
getMember.onreadystatechange = memberReceivedHandler;
getMember.timeout = 1000; //set timeout for xmlhttp request
getMember.ontimeout = memberTimeoutHandler;
getMember.send(null);
}
function memberTimeoutHandler(){
getMember.abort(); //abort the timedout xmlhttprequest
setTimeout(function(){getOnlineMembers()}, 2000);
}
function memberReceivedHandler(){
if(getMember.readyState == 4 && getMember.status == 200){
var chat_members_div = document.getElementById('chat_members');
var xmldoc = getMember.responseXML;
var members_nodes = xmldoc.documentElement.getElementsByTagName("member");
var n_members = members_nodes.length;
for (i = 0; i < n_members; i++) {
chat_members_div.innerHTML += '<p><a href="' + members_nodes[i].childNodes.nodeValue + '">' + members_nodes[i].childNodes.nodeValue + '</a></p>';
chat_members_div.scrollTop = chat_members_div.scrollHeight;
}
mTimer = setTimeout('getOnlineMembers();',2000); //Refresh our chat members in 2 seconds
}
}
To prevent caching response you can try: 为了防止缓存响应,您可以尝试:
getMember.open("GET", "get_chat.php?get_member&t=" + Math.random(), true);
Check the responseXML is not empty by: 通过以下方法检查responseXML是否为空:
console.log(responseXML);
Also you might need to select the root node of the xml response before selecting childNodes: 另外,在选择childNodes之前,您可能需要选择xml响应的根节点:
var members_nodes = xmldoc.documentElement.getElementsByTagName("member"); //documentElement selects the root node of the xml document
hope this helps 希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.