ajax image if port open, alternate image if not open - php

Question

So I'm trying to create a custom script for a website of mine, and I'm looking at doing a status script. now I've done some research however I have scrapped what I have until I can find something that works better.
I am currently using fopen to check if a port is open, however it slows the page load time down considerably, I was wondering if there is a way to do this is jquery and ajax. allow the page to load first, then present an image if the port was open, and an alternate image if it was closed or inaccessible.
I've seen it done before, I just can't seem to find any documentation on this.

Answer 1

Load the page, send an ajax request to your page to check if it's open or not.
$.getJSON('checkstatus.php', {
port: 8070
}, function (data) {
if (data.status === 'on') {
$('#img').attr('src', 'on.png');
} else {
$('#img').attr('src', 'off.png');
}
});
<?php
......code.....
header('content-type: application/json');
echo json_encode(array('status'=>get_port_status($_GET['port'])));
edit :
//checkstatus.php
<?php
$host = $_GET['host'];
$ports = array(PORT 1, PORT 2, PORT 3, PORT 4, PORT 5, PORT 6, PORT 7, PORT 8, PORT 9);
$status = array();
foreach($ports as $port) {
$connection = #fsockopen($host, $port);
if (is_resource($connection)) {
$[$port] = 'on';
fclose($connection);
} else {
$[$port] = 'off';
}
}
header('content-type: application/json');
echo json_encode($status);
?>
///status.html
<table id="portStatus">
<tbody></tbody>
</table>
<script>
$(function () {
var table = $('#portStatus tbody');
var hosts = ['host1.com', 'host2.com'];
for (var i = 0; i < hosts.length; ++i) {
var host = hosts[i];
$.getJSON('checkstatus.php', {
host: host
}, function (data) {
var tr = $('<tr/>');
tr.append($('td').html(host)); //this appends the hostname to the td;
for (var port in data) {
tr.append($('<td><img src="' + (data[port] === 'on' ? 'accept.png' : 'error.png') + '"></td>');
}
table.append(tr);
});
}
});
</script>
This should give you a basic idea, try it and modify it.
Note, the javascript part uses jQuery.