HTML tutorials

Tutorial 1 - Intro to AJAX

AJAX is the term used to describe javascript being able to change files interact with the databases on the server.

This makes many more things possible, such as being able to work on a website without having to constantly refresh the page on each step, and create flash like interactivity!

You MUST have some familiarity with both javascript and php, since this techniques uses both. Essentially, javascript sends information to a php page on your server, and is able to record the response from the php page.

You will see a way this can work in the two files below:

Javascript on a html page: (index.html)

<html>
<head>
<script>
function getHTTPObject() {
    var xhr = false;//set to false, so if it fails, do nothing
    if(window.XMLHttpRequest) {//detect to see if browser allows this method
        var xhr = new XMLHttpRequest();//set var the new request
    } else if(window.ActiveXObject) {//detect to see if browser allows this method
        try {
            var xhr = new ActiveXObject("Msxml2.XMLHTTP");//try this method first
        } catch(e) {//if it fails move onto the next
            try {
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");//try this method next
            } catch(e) {//if that also fails return false.
                xhr = false;
            }
        }
    }
    return xhr;//return the value of xhr
}
function askPhp()
{
    var url = "ajax.php";
    var ajaxRequest = getHTTPObject();
    ajaxRequest.open("POST", url, true);
    //Send the proper header information along with the request
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajaxRequest.setRequestHeader("Content-length", query.length);
    ajaxRequest.setRequestHeader("Connection", "close");

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4)
        {
			var message=document.getElementById('message')
            message.innerHTML=ajaxRequest.responseText;
        }
    }
	var question=document.getElementById('question')
    ajaxRequest.send("question="+question.value);

}
</script>
</head>
<body>
<div id="message">
No message Currently
</div>
<input type="text" id="question"/>
<input type="button" value="Click me to ask php a question" onclick="askPhp()"
</body>
</html>

The php page: (ajax.php)

<?php
$question=$_POST['question'];
echo "the question you sent was=".$question."sent at ".date("m.d.y"); 
?>

Explanation

This might look like a lot of code, but most of it is reusable for all your ajax projects. The first function, 'getHTTPObject' is just used to make an object that is able to communicate with php- but it has to try several different methods because of the way different browsers handle it.

There are two ways of sending information to php- GET and POST. This method is using POST, because it does not send the variables in the URL, which makes it more secure, and less prone to someone putting whatever input they want into it.

Next, I make the function 'askPhp', which will be called from the HTML button below.

var url = "ajax.php"; // We first make a url of where we're going to be sending the request

var ajaxRequest = getHTTPObject(); //We're going to create a variable for the httpRequest

The next four lines are setting up the connection

ajaxRequest.onreadystatechange = function() //this function is called any time the state of the connection changes. There are 4 different connection states, the 4th actually being when the connection is finished and the response is ready, so that is what we care about here.

if(ajaxRequest.readyState == 4) // When we get the response from our php page

var message=document.getElementById('message') //create a variable for the message div

message.innerHTML=ajaxRequest.responseText; // Assign the response from our php file to the message div's html

var question=document.getElementById('question') // Assign a variable to out question textarea

ajaxRequest.send("question="+question.value); //send the question from the textarea to our php file

For the php page:

$question=$_POST['question']; //we get the question that was sent by POST and assign it to a variable

echo "the question you sent was=".$question."sent at ".date("m.d.y") // We then echo out the question that was sent, plus the date, to show when the message was processed.

For more information and resources, look at both http://www.php.net, and now http://www.w3schools.com/Ajax/

Web Development

HTML CSS Javascript php AJAX

Game Development

OpenGL DirectX