页面局部刷新的两种方式：form+iframe 和 ajax

1 使用form做提交，target设为iframe的name:

引用

 <iframe name="info" id="info" frameborder="0"
        		src=""
        		scrolling="no" width="100%" height="1000"></iframe>

<form id="mapForm" name="mapForm" action="" method="post" [b]target="info"[/b]>

2 使用ajax。以div域的局部刷新为例，假设页面中有

<div id="mapDiv" name="mapDiv">

，在ajax的回调方法中，使用document.getElementById("mapDiv").innerHTML =xmlhttp.responseText即可实现该div区域的局部刷新。
birt结合ajax做报表区域局部刷新的例子：
http://www.roseindia.net/answers/viewanswers/1936.html

var xmlhttp = new getXMLObject();
function 调用ajax的函数() {
		if(xmlhttp) { 
			//URL中带中文不行,故通过xmlhttp的send(params)来传递（中文）参数
			//var url = "<%=request.getContextPath()%>/preview?__report=rptfiles/tuition_map.rptdesign&startDate=${startDate}&endDate=${endDate}&province=" + encodeURIComponent(provinceName);
			
			var url = "<%=request.getContextPath()%>/preview";
			var params = "__report=rptfiles/tuition_map.rptdesign&startDate=${startDate}&endDate=${endDate}&province=" + provinceName;
			//alert(url);
			//alert(params);
			
			xmlhttp.open("POST",url,true); 
			xmlhttp.onreadystatechange = handleServerResponse;
			xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
			xmlhttp.send(params); 
		}
	}

	//XML OBJECT
	function getXMLObject() {
		var xmlHttp = false;
		try {
		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers
		}
		catch (e) {
		try {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+
		}
		catch (e2) {
		xmlHttp = false // No Browser accepts the XMLHTTP Object then false
		}
		}
		if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
		xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers
		}
		return xmlHttp; // Mandatory Statement returning the ajax object created
	}

	function handleServerResponse() {
		if (xmlhttp.readyState == 4) {
			//if(xmlhttp.status == 200) {
			//alert(xmlhttp.responseText);
			document.getElementById("mapDiv").innerHTML =xmlhttp.responseText;
			//}
			// else {
			// alert("Error during AJAX call. Please try again");
			// }
		}
	}

Q & A：Div as Form Target，Possible？
Q：

引用

Does anyone know how to target a <DIV...>. I want to put an HTML form
in a DIV. When it's submitted, the results should show up within that
same DIV. Possible?

A：

引用

You can't target a div the way you can a frame;
you'd have to use AJAX techniques: have a button that triggers,
instead of a form submission, a call to a JavaScript function that
manually assembles and POSTs the same query that the browser would
assemble if you had really submitted the form, with a callback to a
JavaScript function that populates the div with the results.  There
are JavaScript libraries that make this task easier (dojo, Yahoo!,
etc), but you still need to know how to program...

关于ajax乱码问题：
使用以下代码，传给birt的中文省名provinceName老是乱码：

var url = "<%=request.getContextPath()%>/preview?__report=rptfiles/tuition_map.rptdesign&startDate=${startDate}&endDate=${endDate}&province=" + provinceName;
xmlhttp.open("POST",url,true); 
xmlhttp.onreadystatechange = 回调函数的名字;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
xmlhttp.send(null); 

使用什么escape() encodeURI() encodeURIComponent()对url中的中文provinceName做转化都无法解决问题；

后改成通过XmlHttpRequest的send方法来传参，解决了这个乱码问题：

var url = "<%=request.getContextPath()%>/preview";
var params = "__report=rptfiles/tuition_map.rptdesign&startDate=${startDate}&endDate=${endDate}&province=" + provinceName;
xmlhttp.open("POST",url,true); 
xmlhttp.onreadystatechange = 回调函数的名字;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
xmlhttp.send(params); 

貌似得出的结论就是：
如果使用ajax做中文参数的传递，不要在url中做中文参数的追加，使用XmlHttpRequest.send(参数串)来传参，参数串里的中文就不会乱码。

评论

1 楼 a535114641 2015-03-25  

LZ你好， 用了这个方法后子页面里的JS方法就全不能用了呀