I've never really done much web development since university, but now I need to put together a small website to display some database data. I figured that AJAX would be the best way to go about this.
So I tried a very simple task just to get my head around the XMLHttpRequest object.
I made the following HTML page:
<!DOCTYPE html>
<html>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
document.getElementById("response").innerHTML = xhttp.status;
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("target").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://www.********.***/phpTest/findCalls.php", true);
xhttp.send();
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
</head>
<body>
<button type="button" onclick="loadDoc()">Click Me</button>
<p id="target">This is where the text goes.</p>
<p id="response">This is the response.</p>
</body>
</html>
Then I made a PHP page and put it on the server, it's a simple page that replies with a line of text. It looks like this:
<?php
echo "From PHP.";
?>
If I got to the PHP page via a web browser it shows a page with 'From PHP.'. However when trying to run the html page (via Aptana Studio) it constantly fails with the xhttp.status returning 0.
I've tried turning my firewall off, this didn't help.
I've tried changing the target of the request to a text file stored locally on my machine and this works correctly, but I don't have a PHP server installed locally to test that.
I was hoping that someone on Stack Overflow might be able to see something I've overlooked.
Thank you in advance.
Instead of JavaScript, you can use jQuery Ajax call:
$.ajax({
url : "http://pardipphp.com/data",
type : "GET",
data : { "firstName": "Pardip", "lastName": "Bhatti" },
beforeSend: function() {
// code here
},
success: function(response) {
console.log(response);
}
})