There is about overall refresh and partial refresh of the frameset window

In the project, often will encounter the page segmentation, the most common system or the main interface of the website. The main page is divided into the above system introduction, the following author introduction, the left system function menu, the right menu is the real display of the interface.

So when you see this kind of segmentation, the first thing that comes to mind is frameset, which is a simple way to use framset to split up a lot of frames. If you do not like the use of framset, like the foreground design people may choose p splicing, floating, which examines the basic CSS style.

This time I will focus on the local refresh problem. The requirement is: left frame, right frame.

You certainly doubt, so refresh no problem ah. That's true. Now I'm going to use framset, and I'm going to split the two frames, and I'm going to update them. The frame display menu on the right hand side shows you just update submit. There is no effect on the left frame.

LeftFrame on the left, RightFrame on the right, just for simplicity; If I submit the RightFrame page, I need to update the LeftFrame [dynamic] page. So how?

It's essentially rereading data from a database;

<FRAMESET cols = "280,*" frameborder=yes bordercolor=silver>
<FRAME SRC="modifyMenu!showTreeMenu" NAME="menuTree" SCROLLING="No" id="leftTree">
<FRAME SRC="showModifyMenu.jsp" NAME="main" SCROLLING="AUTO" id="showModifyMenu">
</FRAMESET>

The modifyMenu! ShowTreeMenu is directed to the tree.jsp page

Now in the project, the foreground USES struts2. When the data on the right page is submitted, the assumption is that it will then jump to the main interface again, which is equivalent to re-reading the data, but the main interface loaded is actually displayed in the right area, which makes two leftframes. Even changing the redirection of the resultType in Struts2 is not possible.

Finally, a simple JS solution.

On the right hand side of the commit page RightFrame, use JS to update the left LeftFrame. As follows:

Event of the body onload in rightFrame:

function init(){
//LeftTree is the id of the left Frame
//Reload the page
window.parent.frames[ "leftTree"].location.reload();
}

Window. The parent. Frames [r]. "leftTree" location. Reload ()

When you're at the end of your rope with one idea, try a different one.

The requirements are as follows: if the RightFrame page on the right is refreshed, only the left LeftFrame part is refreshed.

When you think of partial refreshes, you definitely think of Ajax partial refreshes.

Then we use pure js Ajax basic implementation:

function createXmlHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function init(){
//A local refresh is performed
var xmlHttpReq=createXmlHttpRequest(); 
//Gets the starting url, such as struts2 action or servlet or JSP page
var url="success.jsp";
xmlHttpReq.open("GET",url,true);

//Because you're making an asynchronous call,
//So you need to register a callback event handler that the XMLHttpRequest object will invoke
xmlHttpReq.onreadystatechange=function(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
//Use parent to get one of the p's on the left page, and then change the appearance of the presentation
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML=" test ";
}else{

alert(xmlHttpReq.status+xmlHttpReq.responseText);

}
}
};
xmlHttpReq.send(null); 
} 

Window. The parent. Frames [r]. "leftTree" document. The getElementById (pId) innerHTML = xmlHttpReq. The responseText

The method in the background action is as follows:

HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
out=response.getWriter();
out.print(" Incoming data from the background "); 

Two refresh methods, one is the overall refresh; A local refresh;