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('&'));
}

小结：

前端代码与浏览器息息相关，了解浏览器的基本原理可以写出更健壮的代码。