NOTE : Ajax is not one technology, but a group of technologies. Ajax uses HTML, JavaScript, CSS, XML etc.
This example, shows the relationship between getting data of form and checking:
Step 1 is, users type something or not!
Step 2 is, the system checks what the data is or, is there any typed data?
Well, let's do our pages. For that we create three files,
- example.html
- kitchen.php
- lib.ajax.js
// JavaScript Document
//What does JaX stand for? is the function we use for ajax object
function JaX() {
var httpObject = null;
var httpBrowser = navigator.appName;
if(httpBrowser == "Microsoft Internet Explorer") {
httpObject = new ActiveXObject("Microsoft.XMLHTTP");
} else {
httpObject = new XMLHttpRequest();
}
return httpObject;
}
function UJaX(subject, method, path, more, func, statu) {
//subject is object of ajax
//method is the method of getting variables
//path is the path of file
//func is the function you use on it
//statu can be true or false
ajaxObject = JaX();
if(method == 'POST') {
if(ajaxObject != null) {
ajaxObject.onreadystatechange = func;
ajaxObject.open('POST', path, statu);
header = "application/x-www-form-urlencoded";
ajaxObject.setRequestHeader("Content-Type", header);
ajaxObject.send(more);
} else {
alert("Error(1)->The System Cannot Be Opened!");
}
} else {
if(ajaxObject != null) {
ajaxObject.onreadystatechange = func;
ajaxObject.open('GET', path+'?'+more, statu);
ajaxObject.send(null);
} else {
alert("Error(2)->The System Cannot Be Opened!");
}
}
}
example.html
var ajaxObject;
function CheckItOut() {
subject = ajaxObject;
method = 'GET';
path = 'kitchen.php';
func = sonuc;
dataMore = document.getElementById("data").value;
more = 'data=' + dataMore;
statu = "true";
UJaX(subject, method, path, more, func, statu);
}
function sonuc() {
if(ajaxObject.readyState == 4) {
if(ajaxObject.status == 200) {
DM = ajaxObject.responseText;
//DM = document.form1.data.value;
if(DM == "You must write something!")
document.getElementById("MyButton").disabled = true;
else
document.getElementById("MyButton").disabled = false;
} else
DM = "Error = Nu/1";
} else
DM = "Loading...";
document.getElementById("MyLabel").innerHTML = DM;
}
< form name="form1" method="GET">
< input name="data" type="text" id="data" onChange="CheckItOut();">
< input name="MyButton" type="button" id="MyButton" value="I'm Ok!">
< /form>
 |
| Preview example.html page |
And php page, kitchen.php
$DataOfForm = $_REQUEST["data"];
if(!$DataOfForm == 1) {
print "You must write something!";
} else {
print "You said:".$DataOfForm."";
}
And yes! We just finished our script! go to example.html page and write something;
 |
| When you typing |
If we don't type anything on this, we'll see like down here:
 |
| When you type none. |
Like you see, "Button" is disabled when you type none. Because of it is DM variable of javascript.
If you want to see this project, you can click Demo!
We'll see you next article!
