原生态Ajax

(JQuery Ajax : http://jun1986.iteye.com/blog/1399242 和 http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html)

返回方式：

　　网页片段

　　javascript片段

　　数据 （JSON、XML）

 

 

	<script type="text/javascript">
	   
	   //XHR的状态
	   var XHR_STATE_UNINITIALIZED=0;  //XHR.open()还没被调用
	   var XHR_STATE_LOADING=1;        //XHR.open()已经被执行
	   var XHR_STATE_LOADED=2;         //XHR.send()已经被执行
	   var XHR_STATE_INTERACTIVE=3;    //XHR发觉server的数据已经返回了一部分
	   var XHR_STATE_COMPLETE=4;       //XHR发现server已经对请求作出响应,并返回了所有内容,操作结束.
	   
	   //获得XMLHttpRequest对象
	   function getXMLHttpRequest(){
	     var xhr=null;
	     if(window.XMLHttpRequest){
	        xhr=new XMLHttpRequest(); // for firefox/IE7
	       // alert("firefox");
	     }else {
	        xhr=new ActiveXObject("Microsoft.XMLHTTP"); // for IE.
	      //  alert("IE");
	     }
	     return xhr;
	   }
	   
	   /**
	    xhr: xhr object
	    url:
	    */
	   function sendRequest(url)
	   {
	      var xhr=getXMLHttpRequest(); //got a XHR instance.
	      

	      
	      xhr.onreadystatechange=function(){
	                               var state=xhr.readyState;
	                               if(state==XHR_STATE_COMPLETE){
	                                  var status=xhr.status; //获得HTTP STATUS
	                                  if(status>=200 && status<=299){
	                                     parseCompletedResponse(xhr);
	                                  }else
	                                     alert("xhr request error!");
	                               }else{
	                                    document.getElementById('result').innerText="please wait...stateid:"+state;
	                                    //alert("please wait...stateid:"+state);
	                               }
	                             };  
	      
	     /*
	     xhr.open(methodtype,url,isAsynchronous); 
	     methodType: GET/POST/...
	     url:
	     isAsynchronous: 如果为true,则为异步.
	     
	     xhr.send
	                
          xhr.setRequestHeader(
	          'Content-type',
	          'application/x-www-form-urlencoded'
	      );*/  
	     // alert("xhr="+xhr+",url="+url);             
	      xhr.open('GET',url,true);	      
	      xhr.send(null);
	   }
	   
	   
	   // dom操作, 把得到响应内容写入对应位置
	   function parseCompletedResponse(xhr)
	   {
	       var storeDiv=document.getElementById('result');
	       storeDiv.innerHTML=xhr.responseText;
	   }
	   
	   function getUrl()
	   {
	     //document.getElememtById -> object
	     //document.getElementsByName -> object[]
	      var num=document.getElementsByName("num")[0].value;
	      return "calc?num="+encodeURI(num);
	   }
	   
	   
	</script>



<body>
    求平方<br>
    <form action="" method="post">
       数字:<input type="text" name="num"/>
          <button onclick="sendRequest(getUrl());">计算</button>
      <div id="result"/>
    </form>
    <a onclick="alert(getXMLHttpRequest());" href="#">test XHR</a>
    <a onclick="alert(getUrl());" href="#">Generate Url</a>
  </body>

　　

posted @ 2015-05-08 10:56  QinH  阅读(191)  评论(0)    收藏  举报