跨域提交

本文实现常用的跨域提交，并非ajax提交；

一、HTML表单：

<form id="fm" name="FM" action="server.aspx" method="post" target="ajaxiframe">
    <input type="text" name="tit" value="标题" />
    <input type="submit" value="提交" />
</form>

提交表单之后，数据传输如下：

二、只是提交还不能满足我们的需求，还必须有服务端的返回值；

这里用setInterval定时取值：

HTML表单：

<form id="fm" name="FM" action="server.aspx" method="post" target="ajaxiframe">
    <input type="text" name="tit" value="标题" />
    <input type="submit" value="提交" />
</form>
<iframe id="ajaxiframe" name="ajaxiframe" width="0" height="0"></iframe>

JS Code

<script type="text/javascript">
    (function (iframe) {
        var Timer = setInterval(function () {
            if (iframe.contentWindow) {
                clearInterval(Timer);
                //绑定事件
                if (iframe.attachEvent) {
                    //IE
                    iframe.attachEvent(‘onload‘, function () {
                        var result = iframe.contentWindow.document.documentElement.innerText;
                        if (result.length>0) {
                            alert(‘提交成功!(‘ + result + ‘)‘);
                        }
                    });
                } else {
                    iframe.addEventListener(‘load‘, function () {
                        var result = iframe.contentWindow.document.documentElement.textContent;
                        if (result.length > 0) {
                            alert(‘提交成功!(‘ + result + ‘)‘);
                        }
                    })
                }
                //解除事件
                if (iframe.detachEvent) {
                    iframe.detachEvent(‘onload‘, function () { });
                } else {
                    iframe.removeEventListener(‘load‘, function () { }, true);
                }

            }
        }, 0);
    })(document.getElementById(‘ajaxiframe‘));
</script>

三、结合以上方式，现在来拓展javascript实现；

<form id="fm" name="FM" action="server.aspx" method="post">
    <input type="text" name="tit" value="标题" />
    <input type="button" value="button" onclick="send(FM);" />
    提交结果：<span id="result"></span>
</form>

JS CODE 公共方法：

<script type="text/javascript">
    function XMLhttp() {
        this.request = null;
        this.post = null;

        //iframe set
        var div = document.createElement(‘div‘);
        div.innerHTML = ‘<iframe id="ajaxiframe" name="ajaxiframe" width="0" height="0"></iframe>‘;
        div.style.display = ‘none‘;
        document.body.appendChild(div);
        var iframe = div.firstChild;
        //post set
        this.post = function (fm, url, callback) {
            if (typeof url == ‘function‘) {
                callback = url;
            }
            if (typeof fm == ‘string‘) {
            //字符串提交，实例：ajax.send(‘a=1&b=2‘,‘/server.aspx‘, function (data) {});
                var f = document.createElement(‘form‘); //
                f.name = ‘ajaxform‘;
                f.target = ‘ajaxiframe‘;
                f.method = ‘post‘;
                f.action = url;
                var ds = fm.split("&");
                for (var i = 0; i < ds.length; i++) {
                    if (ds[i]) {
                        var v = ds[i];
                        var el = document.createElement(‘input‘);
                        el.type = ‘hidden‘;
                        el.name = v.substr(0, v.indexOf(‘=‘));
                        el.value = v.substr(v.indexOf(‘=‘) + 1);
                        f.appendChild(el);
                    }
                }
                document.body.appendChild(f);
                f.submit();
                document.body.removeChild(f);
            } else if (typeof fm == ‘object‘) {
            //表单提交，实例：ajax.send(document.getElementById(‘fm‘),‘/server.aspx‘, function (data) {});
                fm.target = ‘ajaxiframe‘;
                if (typeof url == ‘string‘) {
                    fm.setAttribute(‘action‘, url);
                }
                fm.submit();
                if (iframe.contentWindow) {
                    //绑定事件
                    if (iframe.attachEvent) {
                        //IE
                        iframe.attachEvent(‘onload‘, function () {
                            this.result = iframe.contentWindow.document.documentElement.innerText;
                            if (typeof callback == "function") {
                                callback(this.result);
                            }

                        });
                    } else {
                        iframe.addEventListener(‘load‘, function () {
                            this.result = iframe.contentWindow.document.documentElement.textContent;
                            if (typeof callback == "function") {
                                callback(this.result);
                            }
                        })
                    }
                    //解除事件
                    if (iframe.detachEvent) {
                        iframe.detachEvent(‘onload‘, function () { });
                    } else {
                        iframe.removeEventListener(‘load‘, function () { }, true);
                    }
                }
            }
        }
    }
    XMLhttp.prototype = {
        send: function (fm, url, callback) {
            ajax.post(fm, url, callback);
        }
    }
    var ajax = new XMLhttp();
    function send(s) {
        ajax.send(document.getElementById(‘fm‘), function (data) {
            document.getElementById("result").innerHTML = data;
        });
        ajax.send(‘tit=string tit‘,‘/server.aspx‘, function (data) {});
    }
</script>