We know that the common navigation is generally like <a href = "index. php"> homepage </a>. Click the tag to go to the next page. Recently I was learning Ajax, so I thought of doing a refreshing navigation to practice it. The operation is as follows:
Create an index.html file with the following code:
<HTML> <br/> <pead> <br/> <title> yizero Ajax learning </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> var http_request = false; // instantiate an XMLHTTP object. Due to the difference between IE and other browsers, you need to determine the user's browser before performing the corresponding instantiation operation <br/> If (window. XMLHttpRequest) {// Mozilla, Safari ,... <br/> http_request = new XMLHttpRequest (); <br/> If (http_request.overridemimetype) {<br/> http_request.overridemimetype ('text/xml '); <br/>}< br/>} else if (window. activexobject) {// ie <br/> try {<br/> http_request = new activexobject ("msxml2.xmlhttp"); <br/>} catch (E) {<br/> try {<br/> http_request = new activexobject ("Microsoft. XMLHTTP "); <br/>}catch (e) {}< br/>}< br/> function makerequest (serverpage, objid) {<br/> var OBJ = document. getelementbyid (objid); // obtain the DIV of the content to be displayed. <br/> http_request.open ("get", serverpage ); // open the specified page in get mode <br/> http_request.onreadystatechange = function () {<br/> If (http_request.readystate = 4) {// If the page has been fully loaded <br/> obj. innerhtml = http_request.responsetext; // display the loaded content in the specified Div <br/>}< br/> http_request.send (null ); <br/>}< br/> // --> </MCE: SCRIPT> <br/> <body onload = "makerequest('content1.html ', 'hw ') "> <br/> <Div align =" center "> <br/> <a href =" "onclick =" makerequest('content1.html ', 'hw'); Return false; "> page1 </a> <br/> <a href =" "onclick =" makerequest('content2.html ', 'hw'); Return false; "> page2 </a> <br/> <a href =" "onclick =" makerequest('content3.html ', 'hw'); Return false; "> page3 </a> <br/> <a href =" "onclick =" makerequest('content4.html ', 'hw'); Return false; "> page4 </a> <br/> <Div id =" HW "> </div> <br/> </body> <br/> </ptml>
After that, we recommend that you write different content to the corresponding content1.html, content2.html, content3.html, and content4.html.
In addition, the content returned by http_request.responsetext is UTF-8 encoded. If we use Dreamweaver to write HTML, the default encoding format is gb2312, which causes garbled characters. You can manually modify the Dreamweaver encoding format: Modify --> page properties --> title/encoding --> encoding, and then select UTF-8.
See yizero by yizero.com
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
