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="正在加载文章对象……"; } if(xmlHttp.readyState==2){ document.getElementById("stateStr").innerHTML="连接对象加载完毕!"; } if(xmlHttp.readyState==3){ document.getElementById("stateStr").innerHTML="数据获取中,请稍后……"; } 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]