I'm currently working on implementing AJAX and have encountered a roadblock. Specifically, I need assistance with sending a request to the server when a user clicks on a specific image, expecting the server to return that image. While I know how the server will return the image, I'm unsure about what key should be sent for the server to recognize the image request. Below is the frontend code snippet:
<?php
$con = mysql_connect("localhost:3306","root","root");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
else
{
mysql_select_db("uploading", $con);
$sql_get=mysql_query("select * from imge");
while ($db_field=mysql_fetch_assoc($sql_get))
{
$img_urls=$db_field["link"];
?>
<img onclick="ajaxFunction()" id="<? echo $img_urls; ?>" src="<?php echo $img_urls; ?>" style="width: 200px;height: 200px;border-style: solid;border-color: blue"/>
<!-- <a href="view.php?next=<?php echo $img_urls; ?>">View</a>-->
<?php
}
}
?>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e ) { // Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4)
{
document.getElementById("div").innerHTML=xmlHttp.responseText
}
}
xmlHttp.open("GET","server_image.php?url=<?php echo $img_urls ?>",true);
xmlHttp.send(null);
}
</script>
<p id="div"></p>