唠叨豆子 发表于 2012-10-24 00:43:45

ajax学习笔记(二)——AJAX详解

第一篇,理解了ajax是个什么东西,现在我们来好好探索一下它吧!
先发一个我自己做的小程序(简易百度搜索),我们再来一步步理解它:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><script type="text/javascript">      var xmlHttp=false;      /*@cc_on @*/      /*@if(@_jscript_version >= 5)      try{            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }catch(e){            try{                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");            }catch(e){                xmlHttp=false;            }      }         @end @*/      if(!xmlHttp && typeof XMLHttpRequest != 'undefined'){            xmlHttp=new XMLHttpRequest();      }      function callServer(){            var result=document.getElementById("Search").value;            if(result=="" || result==null) return;            var url="documentproc/processing1.ashx?key="+escape(result);            xmlHttp.open("GET",url,true);            xmlHttp.onreadystatechange=updatePage;            xmlHttp.send(null);                  }                function updatePage(){            if(xmlHttp.readyState==1){                document.getElementById("stateStr").innerHTML="正在加载文章对象&hellip;&hellip;";            }            if(xmlHttp.readyState==2){                document.getElementById("stateStr").innerHTML="连接对象加载完毕!";            }            if(xmlHttp.readyState==3){                document.getElementById("stateStr").innerHTML="数据获取中,请稍后&hellip;&hellip;";            }            if(xmlHttp.readyState==4){                if (xmlHttp.status==200){                  var result=xmlHttp.responseText.split("_");                  document.getElementById("stateStr").innerHTML=result[0];                }                else if (xmlHttp.status == 404){                  document.getElementById("stateStr").innerHTML="Request URL does not exist,发送的地址错了,没有此页面";                }                else if (xmlHttp.status == 403){                  document.getElementById("stateStr").innerHTML="Access denied.无权访问";                   }                else{                     document.getElementById("stateStr").innerHTML="Error: status code is " + xmlhttp.status;                }            }      }    </script>    <title>无标题页</title></head><body>    <input id="Search" type="text" style="width: 200px;" onkeyup="callServer();"/><span style=" font-size:12px; color:Red">*请输入字母a-e</span>    </br>    <span id="stateStr" style=" background-color:Yellow; color:Black;"></span></body></html>
页: [1]
查看完整版本: ajax学习笔记(二)——AJAX详解