mixing Ajax with Javascript

Question

I foundout that I cant mix php with javascript so I ttried AJAX. in the code below I want the ajax function to get a value from getcount.php page and return it to the caller function. the code below doesnt work. where is the mistake?

<script type="text/javascript">
function getcount(day)
{
var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.open("GET","getcount.php?"+day,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 return xmlhttp.responseText; 
 }
}
 </script>
<script type="text/javascript">
$(function () {
var previousPoint;
var d1 = [];
 for (var i = 0; i <= 10; i += 1)
 d1.push([i, getcount(i)]);
 .
 .
 .

• fmgp: Your title is a bit weird: AJAX is Javascript
• Armatus: You're missing a closing } at the end of the getcount function. Try to keep a consistent code indentation, then that kind of thing is obvious quickly :)

Answer 1

The ajax callback will be asynchronous so, getcount() will return undefined and when the callback returns it is not assigned to anything

function getcount(day, arr) {
var xmlhttp;
...
xmlhttp.send();
xmlhttp.onreadystatechange=function() {
 if (xmlhttp.readyState==4 && xmlhttp.status==200) {
 arr.push([day, xmlhttp.responseText]); 
 }
}
$(function () {
var previousPoint;
var d1 = [];
 for (var i = 0; i <= 10; i += 1)
 getcount(i, d1);
...

Answer 2

Use jQuery, it will be far easier:

<script type="text/javascript">
 $(function () {
 var previousPoint, d1 = [];
 var getCount = function(day){
 $.get("getcount.php?"+day, function(data){
 d1.push([day, data]);
 });
 }
 for (var i = 0; i <= 10; i += 1)
 getcount(i)
});
</script>

• Snuffleupagus: That doesn't answer his question and just feels like a shameless plug. :[

Answer 3

Mixing any type of Ajax query with a loop of this nature is not a great idea. It will create some interesting race conditions as the Ajax request is asynchronous - as already mentioned.

It would be better to do a single ajax request and handle the loop in php - then return a single array. However, again, its important you need to understand by default, the rest of your procedural javascript code will not wait for the Ajax method to return.

See the docs for help

Answer 4

Try using Jquery ajax which is very easier for maintenance and debugging. Here is a sample 
ajax code
$.ajax({
 type: 'POST', // can be get also
 url: 'yourpage.php', // change name
 data: id, // some data if u need to pass
 success: function(data) { // returns date
 $('.result').html(data); // result 
 }
}); 
For details http://api.jquery.com/jQuery.ajax/
Thanks.