RSS

Category Archives: AJAX

AJAX

How to show loading image while making AJAX request?

http://itprism.com/blog/2-ajax-loading-overlay

Advertisements
 
Leave a comment

Posted by on May 19, 2014 in AJAX

 

Uploading Files with AJAX

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

https://www.box.com/shared/b8bx8jxxco

http://www.webinfopedia.com/upload-image-using-PHP-ajax.html

http://app.helponclick.com/

 

 
Leave a comment

Posted by on January 15, 2013 in AJAX

 

Loading Preloader Animation Image

AJAX Tutorial: In this post, we add something that make user know ajax still works. We called preloader. It will help user to know where part of page will change. It also add more attractive to our web.

You can use many preloader like this:

2342563277_bec8cc313a_o

2343392362_42524dcdc0_o
2342563375_645c5ae680_o
2343392474_5fb80f111e_o

Ok, we try to use it. Open test.php in previous practice. Replace with following code:

<html>
<head>
	<SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
</head>
<body onload="callAJAX('home.html','displaydiv' , '<center>
<img src=loading6.gif></center>')">
<a href="#" onclick="callAJAX('home.html','displaydiv', '<center>
<img src=loading6.gif></center>')">Home</a>
<a href="#" onclick="callAJAX('news.html','displaydiv', '<center><img 
src=loading6.gif></center>')">News</a>
<a href="#" onclick="callAJAX('about.html','displaydiv', '<center><img 
src=loading6.gif></center>')">About</a>
<table>
<tr>
<td id="displaydiv"></td>
</tr>
</table>

</body>
</html>

*****************************************************
 
Leave a comment

Posted by on December 3, 2012 in AJAX

 

Loading Web Content from Links

Ajax Tutorial: In this practice, we try build links in page. Then, from that links we call web content. This is basic and simple way to use ajax in our web. From this practice, we can see how ajax works.

We will modify from previous practice. Ok, open test.php, replace with following code:

***********************************************

<html>
<head>
	<SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
</head>
<body onload="callAJAX('home.html','displaydiv')"><b>
<a href="#" onclick="callAJAX('home.html','displaydiv')">Home</a>
<a href="#" onclick="callAJAX('news.html','displaydiv')">News</a>
<a href="#" onclick="callAJAX('about.html','displaydiv')">About</a></b>
<table>
<tr>
<td id="displaydiv"></td>
</tr>
</table>

</body>
</html>
****************************************
Create "news.html", enter following test code:
news page test
****************************************
Create "about.html" enter following test code:
about page test
****************************************
Now, point your browser to http://localhost/test/ajax/test.php. Try click link.
 
Leave a comment

Posted by on December 3, 2012 in AJAX

 

Shortcut to AJAX

AJAX Tutorial: In this post, We try to use Ajax in our simple application. First time, We will build simple ajax library. Then, we write page to load the ajax library. This is very basic application. You can still extend it for more complex web.

Ok, for this practice, we need 3 file (I create within www/test/ajax directory):

  1. ajax.js -> as ajax library
  2. test.php -> as main page
  3. home.html -> will be loaded as content

First, write below line codes within ajax.js

***********************************

function callAJAX(url, pageElement, callMessage) {
      document.getElementById(pageElement).innerHTML = callMessage;
      try {
        req = new XMLHttpRequest(); /* e.g. Firefox */
      } catch(e) {
          try {
          req = new ActiveXObject("Msxml2.XMLHTTP");
   /* some versions IE */
          } catch (e) {
              try {
              req = new ActiveXObject("Microsoft.XMLHTTP");
  /* some versions IE */
              } catch (E) {
                 req = false;
              }
          }
      }

      req.onreadystatechange = function() {responseAJAX(pageElement);};
 	 req.open("GET",url,true);
      req.send(null);

  }

function responseAJAX(pageElement) {
    var output = '';
    if(req.readyState == 4) {
         if(req.status == 200) {
              output = req.responseText;
              document.getElementById(pageElement).innerHTML = output;
            }
       }
   }
***********************************
then, we create test.php, enter following codes:
***********************************

<html>
<head>
	<SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
</head>
<body onload="callAJAX('home.html','displaydiv')">

<table>
<tr>
<td id="displaydiv"></td>
</tr>
</table>

</body>
</html>
****************************
last, we create home.html, enter following line code:
*******************************
front page test

Now, point your browser to http://localhost/test/ajax/test.php, you will get like this:
 
Leave a comment

Posted by on December 3, 2012 in AJAX

 

AJAX : Understanding AJAX

AJAX Tutorial: Nowdays, you can find AJAX topic everywhere. Yes, this method bring more advantage in internet word. Some people say AJAX is not new technology. It just a method. Other people say it is a technology. In this post, we talk about AJAX in preview.

AJAX is an acronym for Asynchronous JavaScript and XML. For me, it mean simple “empowered JavaScript”. What that mean? Mmm.. before talk what AJAX exactly, do you ever see (or taste) Yahoo Mail! Beta Version? Or Gmail (not HTML version)? At that web page, without reload full page, we can jump between pages.

It is a technique use JavaScript as client side to make background server calls and retrieve additional data as needed. It update certain portions of page without causing full reloads. This is little example web that apply AJAX:

  1. Google Suggest, check it out at http://www.google.com/webhp?complete=1
  2. Gmail, http://www.gmail.com
  3. Google Maps, http://maps.google.com

I think AJAX is smart web application. More responsive web page. I remember it is like ‘flash’! Yeah, we can build smart application like flash page. But, at AJAX, you don’t need install any extra modules. AJAX runs all modern web browsers, such as Mozilla Firefox, Internet Explorer, or Opera. Following the anatomy of AJAX:

  1. JavaScript, is essential of AJAX. We use for Client Side function and use Document Object Model (DOM) to manipulate parts of HTML page.
  2. The XMLHttpRequest object enable JavaScript to access server asynchronously.
  3. Server side technology to handle the request that come from the JavaScript Client, example PHP.
 
Leave a comment

Posted by on December 3, 2012 in AJAX