开发者

Content Insensitive Autosave via XMLHttpRequest

开发者 https://www.devze.com 2023-03-19 23:23 出处:网络
I am trying to make an autosave that can be dropped into any of my forms and be \"self aware\" of the content in order to simulate an actual save. In addition, I want it to be able to notify the user

I am trying to make an autosave that can be dropped into any of my forms and be "self aware" of the content in order to simulate an actual save. In addition, I want it to be able to notify the user in the event of multiple failures of the autosave. The following is the come I have come up with, but I keep getting readyState = 4 and status = 500 as a result of my XMLHttpRequest.send(). When I "normally" click save with the form, the save works perfectly fine, but this code just doesn't seem to pass the data over correctly. Every page that has this code has a setTimeout(autosave,5000) to initialize the code. Can someone point me in the right direction of what I'm doing wrong? I'm new to XMLHttpRequest objects.

For what I can tell, last_params gets "sent" with the correct data, but when I get it via the request() (using classic ASP on the other end), the value is "" (blank). I'm thinking I have an order of execution problem, I just don't know what or where.

Quick footnote: I know that there are 'similar' functions with jQuery and other frameworks, but I do not feel comfortable enough with them yet. I want to start with something "simple".

var last_params = "";
var autosave_time = 61000;

var autosave_fail_check = 5;
var max_autosave_fail_check = 5;

var response_text = "";

function autosave() {

    var autosave_button_name = "save_button";

    var form_action = document.getElementById("formS").action;
    var form_data = document.getElementById("formS");
    var all_inputs = form_data.getElementsByTagName("input");
    var all_textareas = form_data.getElementsByTagName("textarea");

    var params = "";

    // Check all inputs for data        
    for (var i = 0; i < all_inputs.length; i++) {
        var current_item = all_inputs[i];
        if (current_item.type != "button" && current_item.type != "submit") {
            if (current_item.type != "checkbox") {
                params += current_item.name + "=" + current_item.value + "&";

            } else {
                params += current_item.name + "=" + current_item.checked + "&";
            }
        }       
    }

    // check all textareas for data
    for (var i = 0; i < all_textareas.length; i++) {
        var current_item = all_textareas[i];
        params += current_item.name + "=" + current_item.value + "&";
    }

    params += "autosave=1";

    if (params == last_params) {
        setTimeout(autosave, aut开发者_JAVA技巧osave_time);
        return;
    } else {
        last_params = params;
    }

    // Setup time
    var time = "";
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();

    if (minutes < 10) {
        minutes = "0" + minutes;
    }

    time = hours + ":" + minutes + ":" + seconds;

    if(hours > 11){
        time = time + "PM";
    } else {
        time = time + "AM";
    }

    var status = "[]";

    // **************************************************
    var http;

    try {
      // Gecko-based browsers, Safari, and Opera.
      http = new XMLHttpRequest();
    } catch(e) {
        try {
          // For Internet Explorer.
          http = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
            // Browser supports Javascript but not XMLHttpRequest.
            document.getElementById(autosave_button_name).value = "Autosave NOT Available";
            http = false;
        }
    }

    http.onreadystatechange = function()
    {
        if (http.readyState == 4 && http.status == 200) {
            autosave_fail_check = max_autosave_fail_check; // reset the fail check
        }
        status = " [" + http.readyState + " / " + http.status + "] ";
    }

    if (autosave_fail_check <= 0) {
        if (autosave_fail_check == 0) {
            document.getElementById(autosave_button_name).value = "Autosave FAILURE; Check Connection!";
            //alert("Autosave has FAILED! Please check your connection!");
        } 

        autosave_fail_check = -1;
    } else {
        autosave_fail_check--;  
    }

    var url = form_action;

    http.open("POST", url, true); // async set to false to prevent moving on without saving
    http.setRequestHeader("Content-type", "multipart/form-data");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");
    http.send(last_params);

    response_text = http.responseText;

    if (autosave_fail_check >= 0) {
        document.getElementById(autosave_button_name).value = "Last Saved: " + time + " [" + autosave_fail_check + "] " + status;
    } else {
        autosave_fail_check = -1;   
    }

    setTimeout(autosave, autosave_time);

} // end function autosave()
0

精彩评论

暂无评论...
验证码 换一张
取 消