how to correctly handle object XMLHttpRequest in javascript from PHP via refreshDiv
Question
When it comes to Javascript i have no idea what I am doing just try and error method. Been trying to do my research on AJAX and Javascript with no luck so far so please point me in the right direction. Basically I need to refresh a DIV every lets say 5s with data generated from PHP => Database, ON first load of the page everything is fine as it gets data directly from PHP but when Javascript kicks inn all i get is [object XMLHttpRequest] in place of DIV content;
HTML
<script type="text/javascript"></script>
<script>
window.setInterval("refreshDiv()", 5000);
function refreshDiv(){
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
}
}
request.open('GET', 'http://www.mysite.com/getuserinfo.php', true);
request.send();
document.getElementById("usinfo").innerHTML=request;
}
</script>
</head>
<body>
<div id="page">
and then the DIV
<div id="usinfo" class="wrap">
<?php include("getuserinfo.php"); ?>
</div>
And the PHP goes like this :
require_once('../mysqli_connect.php');
$userid = 1000042;
$us_credit = 0 ;
$us_prof_view = 0 ;
$us_new_msg = 0 ;
//Get $us_credit , $us_prof_view , $us_new_msg
$q="SELECT ac_ballance, prof_views, COUNT (msg_id) AS messages FROM user_details INNER JOIN com_msg ON us_name = msg_to WHERE user_id =".$userid." AND msg_new =1";
$r = mysqli_query($dbc,$q);
if(mysqli_num_rows($r)== 1) {
$us_data = mysqli_fetch_array($r,MYSQLI_ASSOC);
$us_credit = $us_data['ac_ballance'];
$us_prof_view = $us_data['prof_views'];
$us_new_msg = $us_data['messages'];
}
mysqli_free_result($r); #not needed
?>
<p class="whtxt">Your Credits :
<?php echo $us_credit ; ?>
Profile views :
<?php echo $us_prof_view ; ?>
<a class="whtxt" href="http://www.mysite.com/inbox">New Messages :
<?php echo $us_new_msg ; ?>
</a>
</p>
Thanks in advance
1 answers
solution1
0 ACCPTED 2014-02-07 17:48:23
Change
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
}
to
if (request.readyState == 4 && request.status == 200) {
document.getElementById("usinfo").innerHTML=request.responseText;
}
This if statement waits for a successful response back from the server and then executes. In your case, it waits for the HTML to be received then inserts it into the div.
What you are trying to do is wrong for two reasons:
- You're not inserting the response text, you're trying to insert the response object. Hence the weird result.
- You're not waiting for the response to come back from the server. It may seem that because you put the code at the bottom it will have already received the server's response but in actuality because the request is asynchronous and involves another script, you will be trying to insert before you have ever received a response.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.