hoocy 发表于 2013-2-7 20:49:14

Ajax简单实现(2)

收集一些好用的ajax例子,便于初学者学习
 
选项卡式显示不同页面内容
 
Path1_tabs.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"      "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>test tab</title><script type="text/javascript">    var req = null;    function processReqChange(){      if(req.readyState==4 && req.status==200)      {            var dobj = document.getElementById("tabDiv");            //在该元素显示接受到的文本            dobj.innerHTML = req.responseText;      }    }    function loadUrl(tab)    {      var url = window.location.toString();            url = url.replace(/Path1_tabs.html/,tab);          if (window.XMLHttpRequest) {                try {                  req = new XMLHttpRequest();                } catch(e) {                  req = false;                }            } else if (window.ActiveXObject) {                try {                  req = new ActiveXObject('Msxml2.XMLHTTP');                } catch(e) {                  try {                        req = new ActiveXObject('Microsoft.XMLHTTP');                  } catch(e) {                        req = false;                  }                }            }            if (req) {                req.onreadystatechange = processReqChange;                req.open('GET', url, true);                req.send('');            }    }      function tab1(){      loadUrl('pat1_tab1_content.html');          }    function tab2(){      loadUrl('pat2_tab2_content.html');    }</script></head><body>    <a href="javascript: void tab1();">Tab 1<a>    <a href="javascript: void tab2();">Tab 2<a>    <div id="tabDiv" style="border:1px solid #3333ff;padding:10px;">   </body></html> pat1_tab1_content.htm
 
页面一内容 
 pat2_tab2_content.html
 
页面二内容  
页: [1]
查看完整版本: Ajax简单实现(2)