之乎者也2011

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

有两种方法,div层局部刷新和iframe嵌套刷新
div:定义div id 用js方法reload该div的id或者url即可
iframe:用js方法调用iframe的relocation方法即可

最好用jquery的load方法

如果不断刷新,用setinterval

另外上文的长连接,觉得也是个好办法!!

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

博客分类:

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

Html代码  收藏代码
  1. <iframe name="info" id="info" frameborder="0"  
  2.             src=""  
  3.             scrolling="no" width="100%" height="1000"></iframe>  

Html代码  收藏代码
  1. <form id="mapForm" name="mapForm" action="" method="post" [b]target="info"[/b]>  


2 使用ajax。以div域的局部刷新为例,假设页面中有
Html代码  收藏代码
  1. <div id="mapDiv" name="mapDiv">  
,在ajax的回调方法中,使用document.getElementById("mapDiv").innerHTML =xmlhttp.responseText即可实现该div区域的局部刷新。
birt结合ajax做报表区域局部刷新的例子:
http://www.roseindia.net/answers/viewanswers/1936.html
Javascript代码  收藏代码
  1. var xmlhttp = new getXMLObject();  
  2. function 调用ajax的函数() {  
  3.         if(xmlhttp) {   
  4.             //URL中带中文不行,故通过xmlhttp的send(params)来传递(中文)参数  
  5.             //var url = "<%=request.getContextPath()%>/preview?__report=rptfiles/tuition_map.rptdesign&startDate=${startDate}&endDate=${endDate}&province=" + encodeURIComponent(provinceName);  
  6.               
  7.             var url = "<%=request.getContextPath()%>/preview";  
  8.             var params = "__report=rptfiles/tuition_map.rptdesign&startDate=${startDate}&endDate=${endDate}&province=" + provinceName;  
  9.             //alert(url);  
  10.             //alert(params);  
  11.               
  12.             xmlhttp.open("POST",url,true);   
  13.             xmlhttp.onreadystatechange = handleServerResponse;  
  14.             xmlhttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded;charset=UTF-8');  
  15.             xmlhttp.send(params);   
  16.         }  
  17.     }  
  18.   
  19.     //XML OBJECT  
  20.     function getXMLObject() {  
  21.         var xmlHttp = false;  
  22.         try {  
  23.         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"// For Old Microsoft Browsers  
  24.         }  
  25.         catch (e) {  
  26.         try {  
  27.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"// For Microsoft IE 6.0+  
  28.         }  
  29.         catch (e2) {  
  30.         xmlHttp = false // No Browser accepts the XMLHTTP Object then false  
  31.         }  
  32.         }  
  33.         if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {  
  34.         xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers  
  35.         }  
  36.         return xmlHttp; // Mandatory Statement returning the ajax object created  
  37.     }  
  38.   
  39.     function handleServerResponse() {  
  40.         if (xmlhttp.readyState == 4) {  
  41.             //if(xmlhttp.status == 200) {  
  42.             //alert(xmlhttp.responseText);  
  43.             document.getElementById("mapDiv").innerHTML =xmlhttp.responseText;  
  44.             //}  
  45.             // else {  
  46.             // alert("Error during AJAX call. Please try again");  
  47.             // }  
  48.         }  
  49.     }  





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老是乱码:
Javascript代码  收藏代码
  1. var url = "<%=request.getContextPath()%>/preview?__report=rptfiles/tuition_map.rptdesign&startDate=${startDate}&endDate=${endDate}&province=" + provinceName;  
  2. xmlhttp.open("POST",url,true);   
  3. xmlhttp.onreadystatechange = 回调函数的名字;  
  4. xmlhttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded;charset=UTF-8');  
  5. xmlhttp.send(null);   
使用什么escape() encodeURI() encodeURIComponent()对url中的中文provinceName做转化都无法解决问题;

后改成通过XmlHttpRequest的send方法来传参,解决了这个乱码问题:
Javascript代码  收藏代码
  1. var url = "<%=request.getContextPath()%>/preview";  
  2. var params = "__report=rptfiles/tuition_map.rptdesign&startDate=${startDate}&endDate=${endDate}&province=" + provinceName;  
  3. xmlhttp.open("POST",url,true);   
  4. xmlhttp.onreadystatechange = 回调函数的名字;  
  5. xmlhttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded;charset=UTF-8');  
  6. xmlhttp.send(params);   

貌似得出的结论就是:
如果使用ajax做中文参数的传递,不要在url中做中文参数的追加,使用XmlHttpRequest.send(参数串)来传参,参数串里的中文就不会乱码。
posted on 2011-09-07 05:48  之乎者也2011  阅读(741)  评论(0编辑  收藏  举报