Javascript-Local Refresh __java

javascript-Local Refresh Overview

To achieve local refresh, the general first is to refresh the local content with a certain ID of the div tag wrap Refresh method is generally divided into two types of timing refresh and event refresh. This article mainly explains the local refresh principle, the event refresh, the local refresh and the partial refresh promotion usage.

Refresh Principle

The refresh is done primarily through a JavaScript function, and a Web page file (. php,. html,. asp, etc.) to implement this

The functions of JS function are mainly:

1, by the ID of the div to be refreshed to lock the refreshed div

2. Specify the URL and display the contents of the specified URL on the refreshed div

3. Pass parameters to specified URL via get channel or post channel

(The URL you specify is typically a Web page file. PHP,. html,. asp, etc. path)

<script type="Text/javascript"> function Loadxmldoc() { var xmlhttp; if (window. XMLHttpRequest) { Code for ie7+, Firefox, Chrome, Opera, Safari XMLHTTP=new XMLHttpRequest(); }else{ Code for IE6, IE5 XMLHTTP=new activexobject("Microsoft.XMLHTTP");     } Xmlhttp.onreadystatechange=function () { if (xmlhttp.readystate=4&& xmlhttp.status= =) { document.getElementById("mydiv"). InnerHTML=xmlhttp.responsetext; }// 1, lock is refreshed div } Xmlhttp.open("Get","/dirname/file.htmla=123&b=456", true); // 2, specify the URL and display the contents of the specified URL on the refreshed Div //3, pass through get channel Xmlhttp.send(); } </script>

Passing parameters with post channels see:

Http://www.w3school.com.cn/tiy/t.asp?f=ajax_post2

You can also refer to the following code

Xmlhttp.open("POST","/ajax/demo_post2.asp", true); Xmlhttp.setrequestheader("Content-type","application/x-www-form-urlencoded"); Xmlhttp.send("fname=bill&lname=gates");

Event Refresh

Event refreshes actually take advantage of the tag's event properties, such as the <button> onclick event, which invokes a locally refreshed function such as:

<button onclick="Loadxmldoc ()"> ok </button>

timed Refresh

A special function is required for a timed refresh, which is the function of performing this function after a period of time.

SetTimeout(' Loadxmldoc () '); Unit is milliseconds

Here's an example of a timed refresh.

<script type="Text/javascript"> Flash_todonum(); Perform a refresh function first function flash_todonum() { var xmlhttp; if (window. XMLHttpRequest) {//code for ie7+, Firefox, Chrome, Opera, Safari XMLHTTP=new XMLHttpRequest(); }else{//code for IE6, IE5 XMLHTTP=new activexobject("Microsoft.XMLHTTP"); } Xmlhttp.onreadystatechange=function () { if (xmlhttp.readystate=4&& xmlhttp.status= =) { document.getElementById("Todo_num"). InnerHTML=xmlhttp.responsetext; } } Xmlhttp.open("POST","index.php?frame/"+"Todo_num", true); Xmlhttp.send(); SetTimeout(' flash_todonum () '); Re-execute the function in two seconds } </script>

Promotion

The URL of the refresh div can be data processing, then you can use an empty div (nothing displayed) through events, parameters and data processing

With jquery (JavaScript) library, the code is simpler and more convenient.