ajaxmail.js

有关ajax的开发方法以及源码,希望对大家有所帮组。

//URLs
var sAjaxMailURL = "AjaxMailAction.php";
var sAjaxMailNavigateURL = "AjaxMailNavigate.php";
var sAjaxMailAttachmentURL = "AjaxMailAttachment.php";
var sAjaxMailSendURL = "AjaxMailSend.php";
var sImagesDir = "images/";
var sRestoreIcon = sImagesDir + "icon_restore.gif";
var sDeleteIcon = sImagesDir + "icon_delete.gif";
var sInfoIcon = sImagesDir + "icon_info.gif";
var sErrorIcon = sImagesDir + "icon_alert.gif";
var aPreloadImages = [sRestoreIcon, sDeleteIcon, sInfoIcon, sErrorIcon];

//Strings
var sEmptyTrashConfirm = "You are about to permanently delete everything in the Trash. Continue?";
var sEmptyTrashNotice = "The Trash has been emptied.";
var sDeleteMailNotice = "The message has been moved to Trash.";
var sRestoreMailNotice = "The message has been moved to Inbox.";
var sTo = "To ";
var sCC = "CC ";
var sBCC = "BCC ";
var sFrom = "From ";
var sRestore = "Restore";
var sDelete = "Move to Trash";

//Timeout Settings
var iShowNoticeTime = 5000;

//Folders
var INBOX = 1;
var TRASH = 2;
var aFolders = ["","Inbox", "Trash"];

//preload the images
for (var i=0; i < aPreloadImages.length; i++) {
    var oImg = new Image();
    oImg.src = aPreloadImages[i];
}

/**
 * The mailbox.
 */
var oMailbox = {

    //-----------------------------------------------------
    // Properties
    //-----------------------------------------------------
    
    //folder-related information
    info: new Object(),   //information about the mail being displayed
    processing: false,    //determines if processing is taking place
    message: new Object(),//information about the current message    
    nextNotice: null,    //information to be displayed to the user

    //-----------------------------------------------------
    // Data-Related Methods
    //-----------------------------------------------------
    
    /**
     * Moves a message to the trash.
     * @scope protected
     * @param sId The ID of the message.
     */
    deleteMessage: function (sId) {
        this.nextNotice = sDeleteMailNotice;
        this.request("delete", loadAndRender, sId);        
    },
    
    /**
     * Moves a message to the trash.
     * @scope protected
     * @param sId The ID of the message.
     */
    emptyTrash: function () {
        if (confirm(sEmptyTrashConfirm)) {
            this.nextNotice = sEmptyTrashNotice;
            if (this.info.folder == TRASH) {
                this.request("empty", loadAndRender);          
            } else {
                this.request("empty", execute);
            }      
        }
    },
    
    /**
     * Retrieves messages for the current folder and page.
     * @scope protected
     * @param iFolder The folder to retrieve.
     * @param iPage The page in that folder to retrieve.
     */
    getMessages: function (iFolder, iPage) {
        this.info.folder = iFolder;
        this.info.page = iPage;
        this.navigate("getfolder");
    },    
            
    /**
     * Loads data from the server into the mailbox.
     * @scope protected
     * @param vInfo A JSON-encoded string containing mailbox information or an info object.
     */
    loadInfo: function (vInfo) {
        if (typeof vInfo == "string") {
            this.info = JSON.parse(vInfo);  
        } else {
            this.info = vInfo;
        }  
    },    
    
    /**
     * Loads message data from the server into the mailbox.
     * @scope protected
     * @param vMessage A JSON-encoded string containing message information or a message object.
     */
    loadMessage: function (vMessage) {
        if (typeof vMessage == "string") {
            this.message = JSON.parse(vMessage);  
        } else {
            this.message = vMessage;
        }  
    },       
    
    /**
     * Makes a request to the server.
     * @scope protected
     * @param sAction The action to perform.
     * @param fnCallback The function to call when the request completes.
     * @param sId The ID of the message to act on (optional).
     */
    navigate: function (sAction, sId) {
        if (this.processing) return;
        try {
            this.setProcessing(true);
            var sURL = sAjaxMailNavigateURL + "?folder=" +this.info.folder + "&page=" + this.info.page + "&action=" + sAction;
            if (sId) {
                sURL += "&id=" + sId;
            }
            this.iLoader.src = sURL;
        } catch (oException) {
            this.showNotice("error", oException.message);
        }
    },        
    
    /**
     * Retrieves messages for the next page in the current folder.
     * @scope protected
     * @param iFolder The folder to retrieve.
     * @param iPage The page in that folder to retrieve.
     */
    nextPage: function () {
        this.getMessages(this.info.folder, this.info.page+1);
    },
        
    /**
     * Retrieves messages for the previous page in the current folder.
     * @scope protected
     * @param iFolder The folder to retrieve.
     * @param iPage The page in that folder to retrieve.
     */
    prevPage: function () {
        this.getMessages(this.info.folder, this.info.page-1);
    },   
    
    /**
     * Begins download of the given message.
     * @param sId The message ID to retrieve.
     */
    readMessage: function (sId) {
        this.navigate("getmessage", sId);
    },    
    
    /**
     * Refreshes the current folder's view.
     * @scope protected
     * @param iFolder The ID of the new folder to refresh.
     */
    refreshFolder: function (iFolder) {
        this.info.folder = iFolder;
        this.info.page = 1;
        this.request("getfolder", loadAndRender);     
    },        
    
    /**
     * Makes a request to the server.
     * @scope protected
     * @param sAction The action to perform.
     * @param fnCallback The function to call when the request completes.
     * @param sId The ID of the message to act on (optional).
     */
    request: function (sAction, fnCallback, sId) {
        if (this.processing) return;
        try {
            this.setProcessing(true);
            var oXmlHttp = zXmlHttp.createRequest();
            var sURL = sAjaxMailURL + "?folder=" +this.info.folder + "&page=" + this.info.page + "&action=" + sAction;
            if (sId) {
                sURL += "&id=" + sId;
            }

            oXmlHttp.open("get", sURL, true);
            oXmlHttp.onreadystatechange = function (){
                try {
                    if (oXmlHttp.readyState == 4) {
                        if (oXmlHttp.status == 200) {   
                            fnCallback(oXmlHttp.responseText);                     
                        } else {
                            throw new Error("An error occurred while attempting to contact the server. The action (" + sAction + ") did not complete.");
                        }
                    }
                } catch (oException) {
                    oMailbox.showNotice("error", oException.message);
                }
            };
            oXmlHttp.send(null);
        } catch (oException) {
            this.showNotice("error", oException.message);
        }
    },            
        
    /**
     * Moves a message from the trash to the inbox.
     * @scope protected
     * @param sId The ID of the message.
     */
    restoreMessage: function (sId) {
        this.nextNotice = sRestoreMailNotice;
        this.request("restore", loadAndRender, sId);        
    },  
    
    /**
     * Makes a request to the server.
     * @scope protected
     * @param sAction The action to perform.
     * @param fnCallback The function to call when the request completes.
     * @param sId The ID of the message to act on (optional).
     */
    sendMail: function () {
        if (this.processing) return;
        this.divComposeMailForm.style.display  = "none";
        this.divComposeMailStatus.style.display = "block";
        
        try {
            this.setProcessing(true);
            var oXmlHttp = zXmlHttp.createRequest();
            var sData = getRequestBody(document.forms["frmSendMail"]);

            oXmlHttp.open("post", sAjaxMailSendURL, true);
            oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                 
            oXmlHttp.onreadystatechange = function (){
                try {
                    if (oXmlHttp.readyState == 4) {
                        if (oXmlHttp.status == 200) {   
                            sendConfirmation(oXmlHttp.responseText);                     
                        } else {
                            throw new Error("An error occurred while attempting to contact the server. The mail was not sent.");
                        }
                    }
                } catch (oException) {
                    oMailbox.showNotice("error", oException.message);
                }
            };
            oXmlHttp.send(sData);
        } catch (oException) {
            this.showNotice("error", oException.message);
        }
    },              
    
    /**
     * Sets the UI to be enabled or disabled.
     * @scope protected
     * @param bProcessing True to enable, false to disable.
     */
    setProcessing: function (bProcessing) {
        this.processing = bProcessing;
        this.divFolderStatus.style.display = bProcessing ? "block" : "none";
    },
        
    /**
     * Switches the view to a new folder.
     * @scope protected
     * @param iNewFolder The ID of the new folder to switch to.
     */
    switchFolder: function (iNewFolder) {
        this.getMessages(iNewFolder, 1);        
    },        
        
    //-----------------------------------------------------
    // UI-Related Methods
    //-----------------------------------------------------
        
    /**
     * Cancels the reply and sends back to read mail view.
     * @scope protected
     */
    cancelReply: function () {
        history.go(-1);
    },    
            
    compose: function () {
        this.navigate("compose");
    },    
    
    displayCompose: function () {
        this.displayComposeMailForm("", "", "", ""); 
    },
    
    displayComposeMailForm: function (sTo, sCC, sSubject, sMessage) {
        this.txtTo.value = sTo;
        this.txtCC.value = sCC;        
        this.txtSubject.value = sSubject;
        this.txtMessage.value = sMessage;
        this.divReadMail.style.display = "none";
        this.divComposeMail.style.display = "block";     
        this.divFolder.style.display = "none";
        this.setProcessing(false);        
    },
        
    displayFolder: function (oInfo) {
        this.loadInfo(oInfo);
        this.renderFolder();
        this.setProcessing(false);
    },
    
    displayForward: function () {
        this.displayComposeMailForm("", "", 
                     "Fwd: " + this.message.subject,
                     "---------- Forwarded message ----------\n" + this.message.message);   
    },    
    
    displayMessage: function (oMessage) {
        this.loadMessage(oMessage);        
        this.renderMessage();
        this.setProcessing(false);
    },
   
    displayReply: function () {
        var sTo = this.message.from;
        var sCC = "";
    
        this.displayComposeMailForm(sTo, sCC, "Re: " + this.message.subject,
            "\n\n\n\n\n" + this.message.from + "said: \n" + this.message.message);
    
    },
    
    displayReplyAll: function () {
        var sTo = this.message.from + "," + this.message.to;
        var sCC = this.message.cc;
    
        this.displayComposeMailForm(sTo, sCC, "Re: " + this.message.subject,