In-depth discussion on the overall refresh and partial refresh frameset windows

In projects, page separation is often encountered, the most common system or website main interface. The home page is divided into the above system introduction, the following author introduction, the system function menu on the left, and the menu on the right are the real Display Interfaces.

When we encounter this split page, the first thought is frameset. framset is used to split multiple frames. This method is simple. If you do not like framset, people who like front-end design may choose div splicing and floating, which will examine the knowledge of css styles.
This article mainly explains the issue of partial refresh. Requirement: frame on the left and frame on the right.

You are sure you have doubts. There is no problem with this refresh. Indeed. Framset is used to split two frames and update each frame. The right frame display menu can be updated and submitted. It does not affect the frame on the left.

For ease of understanding, the left Frame is LeftFrame, And the right Frame is RightFrame. If I submit a RightFrame page, I need to update the LeftFrame [dynamic] Page. What should we do?
In fact, it is to re-read data from the database;Copy codeThe Code is as follows: <FRAMESETcols = "280, *" frameborder = yesbordercolor = silver>
<FRAMESRC = "modifyMenu! ShowTreeMenu "NAME =" menuTree "SCROLLING =" No "id =" leftTree ">
<FRAMESRC = "showModifyMenu. jsp" NAME = "main" SCROLLING = "AUTO" id = "showModifyMenu">
Lt;/FRAMESET>

Here, modifyMenu! ShowTreeMenu is directed to the tree. jsp page.
In the current project, the foreground uses struts2. When the data on the right page is submitted, it is assumed that the page is redirected to the main interface again, which is equivalent to re-reading data, but the loaded main interface is displayed in the right area, in this way, two leftframes are created. You cannot change the redirection of the resultType in Struts2.

Finally, a simple JS solves the problem.
On the right-side page of the submission page, use JS to update the left-side LeftFrame. As follows:
The onload event of the body in the rightFrame:Copy codeThe Code is as follows: functioninit (){
// LeftTree indicates the id of the Frame on the left.
// Reload the page
Window. parent. frames ["leftTree"]. location. reload ();
}

Window. parent. frames ["leftTree"]. location. reload ()
At that time, when you were struggling with a certain idea, you could try to find another idea, which would also be a bit different.
The requirement is as follows: if you refresh the right RightFrame page, refresh only some left LeftFrame [refresh a div ].
When it comes to partial refresh, it must be considered Ajax partial refresh.
Then we use the Ajax basic implementation of pure js:Copy codeThe Code is as follows: functioncreateXmlHttpRequest (){
If (window. XMLHttpRequest ){
ReturnnewXMLHttpRequest ();
} Elseif (window. ActiveXObject ){
ReturnnewActiveXObject ("Microsoft. XMLHTTP ");
}
}
Functioninit (){
// Partial refresh
VarxmlHttpReq = createXmlHttpRequest ();
// Obtain the starting url, such as the struts2 action or servlet or jsp page
Varurl = "success. jsp ";
XmlHttpReq. open ("GET", url, true );
// Because you are making an asynchronous call,
// You need to register an XMLHttpRequest object to call the callback event Processor
XmlHttpReq. onreadystatechange = function (){
If (xmlHttpReq. readyState = 4 ){
If (xmlHttpReq. status = 200 ){
// Use parent to obtain a div on the Left page, and then change the display appearance.
Window. parent. frames ["leftTree" 2.16.doc ument. getElementById (divId). innerHTML = "test ";
} Else {
Alert (xmlHttpReq. status + xmlHttpReq. responseText );
}
}
};
XmlHttpReq. send (null );
}

Window. parent. frames ["leftTree" 2.16.doc ument. getElementById (divId). innerHTML = xmlHttpReq. responseText
The background action is written as follows:Copy codeThe Code is as follows: 01. HttpServletResponseresponse = ServletActionContext. getResponse ();
Response. setContentType ("text/html; charset = UTF-8 ");
Out = response. getWriter ();
Out. print ("data imported from the background ");

Two refresh Methods: one is overall refresh and the other is partial refresh;