ajax在firefox中提交數據報NS_ERROR_DOCUMENT_NOT_CACHED錯誤

原由

爲了仿真接口的返回數據，組裏寫了一個自動填充數據頁面，每次走到這個頁面都須要人工點擊返回。頁面上有2個form，target都指向_self, 今天寫了一個利用js分別提交這2個表單的實現，功能很直接，也沒有細想，就提交了代碼。在ie和chrome下均可以工做，可是在firefox下，2個表單只提交了一個。利用httpfox抓包一看，提示了一個錯誤: POST (Aborted) NS_BINDING_ABORTED. 下面簡要記錄下處理的過程.

最初的代碼：

window.onload =  autoReturn;

function autoReturn()
{
    var value = window.confirm("auto return or not?");
	if(value==true)
    {
	ajaxNotify();
	//return form
	document.return_form.submit();
    }
}

function ajaxNotify()
{
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
	 xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function()
    {
	 if(xmlhttp.readyState==4 && xmlhttp.status==200)
	 {
	 	console.log(xmlhttp.responseText);
	 }
    }
    //notify form
    var form = document.notify_form;
    var inputs = form.getElementsByTagName('input');
    var postData = '';
    for(var i=0, len=inputs.length; i<len; i++)
    {
        if(i!=0)
	    postData += '&';
        postData += inputs[i].name + '=' + inputs[i].value;
    }
    xmlhttp.open("POST", form.action, true);
    xmlhttp.send(postData);
    console.log("postData=" + postData);
}

上面是最初的代碼，因爲頁面很簡單，這裏並無用jquery等插件。在Firefox中反覆測試了幾回，發現利用ajax POST方法提交的表單老是沒法提交，一直顯示: POST (Aborted) NS_BINDING_ABORTED, httpfox請求包中Content的內容爲： Error loading content (NS_ERROR_DOCUMENT_NOT_CACHED)。在網上搜了一番，發現有很多人遇到NS_ERROR_DOCUMENT_NOT_CACHED的錯誤，大都和fire cache參數的配置有關，具體的能夠參考httpfox討論。但是這個問題和我遇到的並不一致，在@yuanbo同窗的提醒下，用js的encodeURIComponent方法，對數據字段作一次encode，並設置了http 頭信息，代碼以下:

encode以後：

//notify form
    var form = document.notify_form;
    var inputs = form.getElementsByTagName('input');
    var postArr = [];
    for(var i=0, len=inputs.length; i<len; i++)
    {
	postArr.push(inputs[i].name + "=" + encodeURIComponent(inputs[i].value));
    }
    xmlhttp.open("POST", form.action, true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send(postArr.join('&'));
    console.log("postData=" + postArr.join('&'));

但是，問題依然存在。沒辦法了，只好先註釋掉提交頁面的代碼，僅提交POST部分，居然能夠提交。這時候就會發現專業的力量了，@yuanbo指出，是否是firefox提交表單時，把以前的POST取消掉了？這一分析與以前提示的錯誤信息恰好吻合。按照這個思路對代碼做進一步調整: 等post方法返回後再提交，並設置timeout，強行提交頁面.

最終的代碼爲:

window.onload =  autoReturn;

function autoReturn()
{
    var value = window.confirm("auto return or not?");
    if(value==true)
    {
	ajaxNotify();
    }
}

function ajaxNotify()
{
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
	xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function()
    {
	document.return_form.submit();
	if(xmlhttp.readyState==4 && xmlhttp.status==200)
	{
	    console.log(xmlhttp.responseText);
	}
    }
    //notify form
    var form = document.notify_form;
    var inputs = form.getElementsByTagName('input');
    var postArr = [];
    for(var i=0, len=inputs.length; i<len; i++)
    {
	postArr.push(inputs[i].name + "=" + encodeURIComponent(inputs[i].value));
    }
    xmlhttp.open("POST", form.action, true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlhttp.send(postArr.join('&'));
    setTimeout(function(){
	document.payment_return.submit();
    }, 500);
    console.log("postData=" + postArr.join('&'));
}

小結：

前端代碼與瀏覽器息息相關，瞭解瀏覽器的基本原理能夠寫出更健壯的代碼。