LMLPHP后院

使用Form Iframe Request取代Ajax技术和Jquery的Ajax方法技术

maybe yes 发表于 2016-03-06 14:33

有个好的想法,如果所有网站都不使用 Ajax 技术,或者不再为了使用比较成熟的 Ajax 方法而去加载 JQuery。写这篇文章不是说用 Ajax 不好,而是从另外一方面去想,如果我们把东西做的足够简单,或者在特殊情况下可以不使用 Ajax 技术来达到和 Ajax 一样的用户体验。其实,是可以实现的,那就是使用 Iframe。

之前看过一篇文章,有人说过 Google 的天才们发明了 HtmlFile 的一个东西,当时不知所云。后来在一个偶然的机会,需要修改 QiboCms 系统,才发现里面的评论一处使用 Iframe 来作为局部刷新了,当时也是蛮佩服当时的作者的,这样的兼容性应该更好。如果一个程序员GB2312 编码程序网页上使用 Jquery 的 Ajax 功能,你会发现,你做不到,非常麻烦,要不是页面乱码就是服务器参数接收乱码,总之非常麻烦,Ajax 的 Header 里面添加编码信息也依然不能解决也许在当时浏览器技术还不是很成熟的年代,这样的方法才是最完美的了。

要实现这样的功能需要工程师必须了解 HTML 的 Form 表单是可以提交给同域名页面的 Iframe 的,但是由于当今的教材很少有提到过这点的,并且在一般的项目中非常不常见,所以一般的技术是不知道的。有个这样的设想后,在做项目的时候抽时间写了一个小小的函数示例,发现还蛮稳定的。

代码分享如下:

function form_iframe_get(action, callback){
	var time = new Date().getTime()
	,c_iframe = document.createElement('iframe')
	,c_form = document.createElement('form');
	c_iframe.className = 'hidden';
	c_iframe.name = 'request_iframe_'+time;
	c_form.className = 'hidden';
	c_form.id = 'request_form_'+time;
	c_form.method='get';
	c_form.target=c_iframe.name;
	c_form.action=action;
	
	document.body.appendChild(c_iframe);
	document.body.appendChild(c_form);
	c_form.submit();

	var loadedDo = function(){
		callback(c_iframe.contentWindow.document.body.innerHTML);
		c_form.parentNode.removeChild(c_form);
		c_iframe.parentNode.removeChild(c_iframe);
	};

	if(c_iframe.attachEvent){
		c_iframe.attachEvent("onload", function(){
			loadedDo();
		});
	} else {
		c_iframe.onload = function(){
			loadedDo();
		};
	}
}

调用示例参考:

form_iframe_get('<?php echo WEB_APP_PATH?>admin/archives/list', function(rs){
	document.getElementById('result').innerHTML = rs;
});
2021-11-28 04:38:29 1638045509 0.031754