The concept of AJAX is simple, data transport is not reliant on the time the data is sent out to be received. What does this allow you to do? Well it lets you query your php, asp, perl, py, or whatever pages and get data without having the user refresh. This can be extremely useful.

There are countless libraries that do ajax for you, and personally I believe you should be using at least one of them. But if you for some reason don't want to or cant, here is a very basic breakdown of how to build an AJAX request without any libraries.

First we need a page to grab the html or xml or whatever. In our case it will be a string but I will explain that later.

function loadHTML(url, dest_var){ dest_v = dest_var; if (window.XMLHttpRequest){ req = new XMLHttpRequest(); req.onreadystatechange = processStateChange; req.open("GET", url, true); req.send(null); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processStateChange; req.open("GET", url, true); req.send(); } } }

This function will accept "url" and load the page remotely. Remember that you can not access pages on different domains. So if you are on www.google.com you can not open the url google.com or mail.google.com. Only www.google.com. There is, however, a way to get arround this. read more.

The variable "dest_var" is the function we will execute afterwards. Next we need a function so figure out if the page has been loaded.

function processStateChange() { if (req.readyState == 4) { if (req.status == 200) { response = req.responseText; eval(dest_v + '(response);'); } } }

All this function does is says "If the page is done loading then execute the function and send it the response we got".

So what would the response function look like? Very very basic.

function responseReturn(ret) { var ret_lines = ret.split(';'); alert("Your first item was: " + ret_lines[0]); }

This takes the response we got. With this we assumed that we where getting the response back in a format that separates values by ";". No this is not good programing but it is fast dirty and doesn't require your users to download half a MB of javascript files. When passing back your response from the server, pass back an array separate by your character like this "valuea;valueb;valuec". This keeps the javascript from eating up all your cpu parsing stupid things on old computers.

Thats great by how about a way to call the function? Here.

function faxJax() { loadHTML("http://jmp2.net/?a=make&url=www.google.com","responseReturn"); }

Yay now i gave you an example in the completely wrong order.

Finished Product

function faxJax() { loadHTML("http://jmp2.net/?a=make&url=www.google.com","responseReturn"); return false; } function responseReturn(ret) { var ret_lines = ret.split(';'); alert("Your first item was: " + ret_lines[0]); } function processStateChange() { if (req.readyState == 4) { if (req.status == 200) { response = req.responseText; eval(dest_v + '(response);'); } } } function loadHTML(url, dest_var) { dest_v = dest_var; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = processStateChange; req.open("GET", url, true); req.send(null); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processStateChange; req.open("GET", url, true); req.send(); } } }

Cheers!