Firefox
You can use firebug for firefox addons for seeing ajax request that sent to server and see the server response, the advantage using firebug than the webkit inspect element is you can see the server response as a simple text or as an html, but on my firefox sometimes it got some error (nothing wrong with the server but server response not displaying on firebug). After you installing firebug restart the firefox and click on the firebug icon on the right bottom.

Google Chrome and Safari
Google Chrome and Safari basically using the same popular engine namely webkit, and it used to in many mobile web browser. You don’t need any extension to see ajax request on this two browser, all you have to do is right click on your mouse and choose the “inspect element” option, and choose “Resource” Tab if you haven’t enable resource tracking you will see a screen like below.

The click the button “Enable resource tracking” then it will become like this one an you can see on the sub tab “XHR” that the ajax request that have been called to the server.

Opera
Opera use a tool called dragonfly to inspecting web page element, the way you to inspecting element is similar like chrome and safari, just right click on the opened tab and choose “inspect element” option, if you are first time using this opera will load the dragon fly for the first time use, not so long you can see a windows on the bottom, and for seeing the ajax request you can see on the Network Tab.

Well that what I always do when debugging the ajax request but too bad I haven’t found it for IE, Web Developer feature on IE seems cannot analyzing ajax request yet, and hoping a better ajax tool in IE9.

01. Plupload

Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads,  Plupload is currently separated into a Core API  and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation, demo.

02. Ajax Upload by Andrew Valums

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and doesn’t require any library to run. AJAX Upload doesn’t pollute the global namespace, and is tested with jQuery, Prototypejs. This plugin is one of the most famous jquery uploader that require no flash. demo

03. Ajax File Upload

This AjaxFileUpload Plugin is a hacked version of Ajaxupload plugin created by yvind Saltvik, which is really good enought for normal use. Its idea is to create a iframe and submit the specified form to it for further processing, demo.

03. jQuery Multiple File Upload Plugin by Fyneworks.com

The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form.

04. jQuery Form Plugin – File Upload by malsup.com

This plugin is a part of jQuery Form Plugin it make you easier to submitting form using Ajax including the input file, and required no flash, demo.

05 . Uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website.  It requires Flash and any backend development language.  An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it. Uploadify free to be used in a number of applications and commercial products, demo.

06. SWFUpload jQuery Plugin by Adam Royle

This plugin created based on SWFUpload and Jquery, it support both single or mutiple file upload, and require flash, demo.

07. jqswfupload by Alexandre Magno

This plugin is the easier way to make a multiple file upload using swfupload library. You can create a complete interface for multiupload files based on Flickr in just one line of code and them make custom settings to controll how works all the features, demo.

08. jcUpload

It’s a small free plugin, that enables ajax-like file upload. It requires Adobe Flash player and jQuery JavaScript library. Plugin is freeware, demo.

09. jqUploader

jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader. This plugin required flash, demo.

10. jqupload by jQframework

From the site it got following feature Easy to integate to your application, easy to define your own logic. lightweight form uploader plugin, source file is just 2k, free and free of charge under the MIT License, demo.

11. uploadprogress

Plugin to augment a standard file upload form with transparent background upload and add uploadprogress meter to keep client informed of progress. This is not really the plugin for uploading file, but just to help inform the progress of uploading file, demo.

Other source that might be useful

http://kisdigital.wordpress.com/2010/03/30/easy-jquery-mutlifile-uploader/

http://docs.jquery.com/Tutorials:Multiple_File_Upload_Magic

http://www.fullfatcode.com/2009/06/06/jquery-ajax-uploader-plugin/

So lets start, here’s the php code

<?php

$data = array(
    0 => array('post' => 'Post Number 0')
);

for ($i=1; $i<=50; $i++) {
    $tmp_data = array(
        $i => array('post' => 'Post Number ' . $i)
    );
    $data = array_merge($data, $tmp_data);
}

// get next 10 row data,
if (isset($_GET['act'])) {
    $start = ($_GET['page'] * 10) + 1;
    $finish = $start + 10;
    if ($finish <= count($data)) {
        echo '<div class="data newhead">Loaded Data &darr;</div>';
        for ($i=$start; $i<$finish; $i++) {
            echo '<div class="data">'.$data[$i]['post'].'</div>';
        }
    } else {
        echo 'stop';
    }
    exit;
}

?>

In the php code the data created with array format, the conditional “if” statement called when the new data need to be loaded (it fetch 10 row data/load), and another conditional “if” inside the first statement is to check whether the max row data have been reached, then if max row have been reached there’s no need to output the data. Now the javascript using Extcore, like usual include the Extcore first

<script type="text/javascript" src="extcore/ext-core.js"></script>
<script type="text/javascript">
/* code from :

http://james.padolsey.com/javascript/get-document-height-cross-browser/

*/
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight,
            D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight,
            D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight,
            D.documentElement.clientHeight)
    );
}
var page = 1;
var onLoad = false;
Ext.onReady(function() {
    Ext.fly(window).on("scroll", function() {
        var scrollY;
        var winHeight;
        var docHeight;
        if (!Ext.isIE) {
            scrollY = Ext.fly(window).dom.scrollY;
            winHeight = Ext.fly(window).dom.innerHeight;
        } else {
            scrollY = document.documentElement.clientHeight;
            winHeight = document.documentElement.scrollTop;
        }
        docHeight = getDocHeight();
        if (docHeight <= scrollY + winHeight) {

            Ext.Ajax.on('beforerequest', function(){
                Ext.fly('loading').setVisible(true);
                onLoad = true;
            });
            Ext.Ajax.on('requestcomplete', function() {
                Ext.fly('loading').setVisible(false);
                onLoad = false;
            });

            if (!onLoad) {
                Ext.Ajax.request({
                    url: 'main.php?act=getData&page='+page,
                    method: 'post',
                    success: function(o) {
                        if (o.responseText != 'stop') {
                            Ext.fly('boxdata').insertHtml('beforeEnd', o.responseText);
                            page = page + 1;
                        } else {
                            html = '<div class="data newhead">No More Data !</div>';
                            Ext.fly('boxdata').insertHtml('beforeEnd', html);
                        }
                    }
                });
            }
        }
        return false;
    });
});
</script>

The first function in code above is to get the value of document height thanks to james.padolsey.com for this function cause the function to get this value is difference in IE, Opera, but Firefox and Webkit browser is almost the same. In Extcore I didn’t find the function to get this value, so also for the window height and window scroll height, maybe this is why jquery better than Extcore (don’t compare jquery with the full stack Extjs, this is absolutely different). So Extcore function that I use is to trigger event, ajax request and append new html element. Now this is the CSS code to make it a bit pretty

<style type="text/css">
    * { font-size: 24px; }

    div {
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #000;
    }

    .head {
        padding: 10px;
        background: #333;
        color: #fff;
    }
    .head a {
        color: #ddd;
    }
    .data {
        background: #f3f3f3;
    }
    .newhead {
        background: #d3d3d3;
    }
    #loading {
        display: none;
        background: #fff;
        border: none;
        font-size: 62px;
    }
</style>

And the last is the html code

<body>
    <div class="head">
        This is example for load scroll using Extcore
    </div>
    <div id="boxdata">
        <?php for($i=0; $i<=10; $i++) { ?>
        <div class="data">
            <?php echo $data[$i]['post']; ?>
        </div>
        <?php } ?>
    </div>
    <div id="loading">
        <img src="img/27.gif" alt="loading"/>
        &nbsp;
        Please Wait...
    </div>
</body

Yup that’s all hope this useful for you and you can download all the code example or view the live demo

DOWNLOAD SOURCE

VIEW DEMO