Home Grown : 3. A simple AJAX Example
For AJAX you need two things - Some JavaScript on the frontend to make an Asynchronous Request and Something on the Server side to handle that request.
We create a XMLHttpRequest object and send a request to the server. When we receive the response, we use JavaScript to modify the page according to the server response.
I hope you've gotten and installed the tutorial project and have it working proper.
So here we have a button which calls a JavaScript function to make the xmlhttprequest. On server side we have a simple PHP page that replies with some text. Our JavaScript then modifies the page(Or in this case the text input field).
That's all AJAX. How can this small technique help us?
Well, if you're good with JavaScript and have some innovative mind you can make magic with AJAX. Have you seen the so called infolinks? These are double underlined words on some websites that open a small pop-up (Usually an advertisement) related to that word. See how beautiful this is. You have a double underlined word, you hover your mouse over it and voilla you're presented with something related to that word. And since the result is coming from the server you can use all kind of metadata to provide something as good as the user is expecting.
You must have seen Google's new image search? See how beautifully it arranges the images. And the pop-up effect. And the dynamic loading of pages. It's the beauty of AJAX. If you have the imagination, the creativity you can make magic. So pull out those JavaScript books and start messing the webpages.
Download the Project from
HERE .
We create a XMLHttpRequest object and send a request to the server. When we receive the response, we use JavaScript to modify the page according to the server response.
I hope you've gotten and installed the tutorial project and have it working proper.
So here we have a button which calls a JavaScript function to make the xmlhttprequest. On server side we have a simple PHP page that replies with some text. Our JavaScript then modifies the page(Or in this case the text input field).
That's all AJAX. How can this small technique help us?
Well, if you're good with JavaScript and have some innovative mind you can make magic with AJAX. Have you seen the so called infolinks? These are double underlined words on some websites that open a small pop-up (Usually an advertisement) related to that word. See how beautiful this is. You have a double underlined word, you hover your mouse over it and voilla you're presented with something related to that word. And since the result is coming from the server you can use all kind of metadata to provide something as good as the user is expecting.
You must have seen Google's new image search? See how beautifully it arranges the images. And the pop-up effect. And the dynamic loading of pages. It's the beauty of AJAX. If you have the imagination, the creativity you can make magic. So pull out those JavaScript books and start messing the webpages.
Download the Project from
HERE .
Comments
Post a Comment