AJAX and PHP
Using AJAX can improve the user experience by reducing page loading and increasing the amount of work that can be done on the client-side (by the web browser).
Using AJAX requires a basic knowledge of JavaScript, but even a JavaScript novice should be able to make sense of the code below.
The heart of AJAX lies in the JavaScript XMLHttpRequest object. The problem is, the act of creating an instance of the XMLHttpRequest object differs among browsers, with IE being the odd man out.
The following function can be used to return an instance of the XMLHttpRequest browser-independently:
function createRequestObject(){
var obj;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
obj = new ActiveXObject("Microsoft.XMLHTTP");
}else{
obj = new XMLHttpRequest();
}
return obj;
}
Put this function in a file and import that file in the head of your HTML document as follows:
<HEAD>
<script language="javascript" type="text/javascript" src="ajax_code.js"></script>
</HEAD>
The next step is to use this function to send an HTTPRequest transparently (so the user never knows about it). The following two functions take care of this:
<script>
var http = createRequestObject();
function send_email() {
form_obj = document.getElementById('email');
http.open("get", "inc/ajax_email_home.php");
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse(){
if(http.readyState == 4){
document.getElementById('message').innerHTML = http.responseText;
}
}
</script>
http.responseText will hold all output generated by the called script. Let's say the script you called contains the following code:
<?
// perform some actions
$results = result_of_actions();
echo $results;
?>
The results will be displayed in the 'message' element. That's all there is to it!
Using AJAX requires a basic knowledge of JavaScript, but even a JavaScript novice should be able to make sense of the code below.
The heart of AJAX lies in the JavaScript XMLHttpRequest object. The problem is, the act of creating an instance of the XMLHttpRequest object differs among browsers, with IE being the odd man out.
The following function can be used to return an instance of the XMLHttpRequest browser-independently:
function createRequestObject(){
var obj;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
obj = new ActiveXObject("Microsoft.XMLHTTP");
}else{
obj = new XMLHttpRequest();
}
return obj;
}
Put this function in a file and import that file in the head of your HTML document as follows:
<HEAD>
<script language="javascript" type="text/javascript" src="ajax_code.js"></script>
</HEAD>
The next step is to use this function to send an HTTPRequest transparently (so the user never knows about it). The following two functions take care of this:
<script>
var http = createRequestObject();
function send_email() {
form_obj = document.getElementById('email');
http.open("get", "inc/ajax_email_home.php");
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse(){
if(http.readyState == 4){
document.getElementById('message').innerHTML = http.responseText;
}
}
</script>
http.responseText will hold all output generated by the called script. Let's say the script you called contains the following code:
<?
// perform some actions
$results = result_of_actions();
echo $results;
?>
The results will be displayed in the 'message' element. That's all there is to it!
Need assistance with your project? Universal Web Services can help.
Contact us to request a quote.