If you want to have an AJAX application, this simple code is what you must have first.
var xml = make_xml();Save the code in "ajax.js" and call it in your HTML <head> section like this:
function make_xml () {
if (typeof XMLHttpRequest == 'undefined') {
objects = Array(
'Microsoft.XMLHTTP',
'MSXML2.XMLHTTP',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.5.0'
);
for (i in objects) {
try {
return new ActiveXObject(objects[i]);
} catch (e) {}
}
} else {
return new XMLHttpRequest();
}
}
<script language="javascript" type="text/javascript"Next, you need to have a handle to handle submitted forms like this:
src="ajax.js"></script>
function handle_submit () {
xml.open('post', root + '/');
xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xml.onreadystatechange = function () {
if (xml.readyState == 4) {
data = xml.responseText.split ( "[BRK]" );
get('div1').innerHTML = data[0];
get('div2').innerHTML = data[1];
} else {
get('div1').innerHTML = 'Please wait';
get('div2').innerHTML = 'Please wait';
}
}
if (window.encodeURI(get('action').value) == 'action1') {
xml.send('action=' + window.encodeURI(get('action').value) + '&javascript=1&
field1=' + window.encodeURI(get('field1').value) + '&field2=' +
window.encodeURI(get('field2').value));
} else if (window.encodeURI(get('action').value) == 'action2') {
xml.send('action=' + window.encodeURI(get('action').value) + '&javascript=1');
}
return false;
}In order to save time, I prefer to replace the long "document.getElementById" with a simple get() function, like this: function get (id) {
return document.getElementById(id);
}Next, you need to have a handle to load onsubmit action, like this: function load_handler () {
get('action1').onsubmit = handle_submit;
}Don't forget to call the handle during page load, like this: window.onload = load_handler;
Using this basic AJAX code, you may do all the web interactivity using AJAX, easily.
All the other codes didn't change at all, including HTML forms, PHP codes, etc. All you have to do is just synchronize the ID's of your HTML forms with your "ajax.js" ID's, otherwise it won't recognize your request.
Any questions, please write on the comment form. Good luck!
5 comments:
That's where jQuery easily jumps in:
GET
$.get('url', {id: id}, function(data) {
$('#id').html(data);
});
POST
$.post('url', {id: id}, function(data) {
$('#id').html(data);
});
Done!
Or even use jQuery.ajax and complementary handlers...
Thanks for the tips, I'll try it out. ;)
Damn, i'm bad at this, but you give some basic information here. Thanks a lot Imam.
Best regards,
Zaldy
Your AJAX codes are really helping with something but i'm just wondering this codeL
data = xml.responseText.split ( "[BRK]" );
What are the messages returning from the PHP function?
In my case, i'm using PHP function to return an array message. So how can I use javascript to split the message according the each name of the array message?
Thanks alot!!
You may use implode("[BRK]",$array)
Post a Comment