This is another example of implementing simple Ajax GET request. Please refer to Ajax – Simple Ajax POST Request for a POST request. Actually, both of them are quite similar and it is good to try both to get more familiar with the generic Ajax requests.
Let’s start our example now.
Create the get.html and get_result.php in your web root.
get.html
<html>
<head>
<script type="text/javascript" src="js/simple_ajax_get.js"></script>
</head>
<body>
<form>
<input type="text" name="uname" id="uname" />
<input type="button" onclick="javascript:checkUsername(document.getElementById('uname').value);"/>
</form>
</body>
</html>
get_result.php
<?php print($_GET['username']); ?>
Next, create the js/simple_ajax_get.js.
function createRequestObject() {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
/* set type accordingly to anticipated content type */
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
return http_request; //return the object
}
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleThoughts() {
/**
* Make sure that the transaction has finished. The XMLHttpRequest object
* has a property called readyState with several states:
* 0: Uninitialized
* 1: Loading
* 2: Loaded
* 3: Interactive
* 4: Finished
*/
try {
if(http.readyState == 4) { //Finished loading the response
/**
* We have got the response from the server-side script,
* let's see just what it was. using the responseText property of
* the XMLHttpRequest object.
*/
if (http_request.status == 200) {
var response = http.responseText;
//alert(response);
// Only pass when input = Eureka!
if (response != "Eureka!") {
alert("Please input Eureka!");
} else {
alert("Validation passed!");
}
}
}
} catch(Exception) {}
}
var http = createRequestObject();
function checkUsername(userName) {
http.onreadystatechange = handleThoughts;
http.open('get', 'get_result.php?username=' + userName);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Connection", "close");
http.send(null);
}
Try it now
Validation failed!
Validation passed!
Done =)
Reference:
Eureka! 