Javascript 通过XMLHttpRequest进行内容不敏感的自动保存

我正在尝试制作一个自动保存，它可以放入我的任何表单中，并且对内容“自我感知”，以便模拟实际的保存。此外，我希望它能够在autosave出现多个故障时通知用户。下面是我想到的方法，但由于XMLHttpRequest.send（），我一直得到readyState=4和status=500。当我“正常”单击表单保存时，保存工作非常好，但这段代码似乎无法正确传递数据。每个包含此代码的页面都有一个setTimeout（autosave，5000）来初始化代码。有人能告诉我我做错了什么吗？我不熟悉XMLHttpRequest对象

据我所知，last_params使用正确的数据“发送”，但当我通过request（）获得它时（在另一端使用经典ASP），值为“”（空白）。我想我有一个执行顺序的问题，我只是不知道是什么或在哪里

快速脚注：我知道jQuery和其他框架有“类似”的函数，但我对它们还不够满意。我想从“简单”开始

var last_params=”“；
var自动保存时间=61000；
var自动保存失败检查=5；
var max_autosave_fail_check=5；
var响应_text=“”；
函数autosave（）{
var autosave_按钮\u name=“save_按钮”；
var form_action=document.getElementById（“formS”）.action；
var form_data=document.getElementById（“表单”）；
var all_inputs=form_data.getElementsByTagName（“输入”）；
var all_textareas=form_data.getElementsByTagName（“textarea”）；
var params=“”；
//检查所有输入的数据
对于（变量i=0；i11）{
时间=时间+“PM”；
}否则{
时间=时间+AM；
}
var status=“[]”；
// **************************************************
var-http；
试一试{
//基于Gecko的浏览器、Safari和Opera。
http=newXMLHttpRequest（）；
}捕获（e）{
试一试{
//对于Internet Explorer。
http=新的ActiveXObject（'Msxml2.XMLHTTP'）；
}捕获（e）{
//浏览器支持Javascript，但不支持XMLHttpRequest。
document.getElementById（自动保存按钮名称）。value=“自动保存不可用”；
http=false；
}
}
http.onreadystatechange=函数（）
{
如果（http.readyState==4&&http.status==200）{
autosave\u fail\u check=max\u autosave\u fail\u check；//重置失败检查
}
status=“[”+http.readyState+“/”+http.status+“]”；
}
如果（自动保存失败检查=0）{
document.getElementById（自动保存按钮名称）。value=“上次保存：“+time+”[“+autosave\u fail\u check+”]”+状态；
}否则{
自动保存失败检查=-1；
}
设置超时（自动保存，自动保存时间）；
}//结束函数autosave（）

在http.send（last\u params）之前，输出给您的

警报（params.length）

和

警报（last\u params）

是什么？readyState为4表示您的请求返回，但状态为500表示内部服务器错误。我的猜测是ASP端的代码没有正确处理您发送的内容。您能在服务器端进行调试，看看它是否抛出错误吗？我知道您正在使用ASP Classic，但在ASP.net中，如果您从ASMX web服务引发异常，它将返回500。@atlavis alert（params.length）为我提供327个长度，alert（last_params）为我提供“数据”，例如：a=1234&b=def&autosave=1@TomWinter在不滥发代码的情况下，asp get是需要更新的数据id

id=request（'id'）

和

如果id>=0则执行其他错误。raise

这就是出现错误的原因，它将id视为“空白”可能您的内容类型错误？在使用XHR进行post的代码中，我们使用“application/x-www-form-urlencoded”。我们不设置内容长度。在那之后我不知道该告诉你什么。我不再使用经典ASP。您需要搜索请求的预期外观，以正确填写request.form和request.querystring。

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, autosave_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()