javascript中ajax框架及解決緩存帶來的問題

首先,在這裏,我不會 對ajax異步更新的概念什麼的進行解釋,主要通過下面的框架,進行解釋,並且解決常見的瀏覽器緩存問題

	<script type="text/javascript">
	   function ajax(url,fnSuccess,fnEnd){

            if(window.XMLHttpRequest)
         		{
         			var oAjax=new XMLHttpRequest();
         		}
         		else{
         			var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
         		}

                //鏈接服務器
         		oAjax.open("GET",url,true);

         		//發送請求
         		oAjax.send();
         		//接收返回 
         		oAjax.onreadystatechange=function(){
         			if(oAjax.readyState==4) //讀取完成
         			{
                      if(oAjax.status==200)  //讀取成功
                      {
                      	fnSuccess(oAjax.responseText);
                      }else{
                      	if(fnEnd)
                      	{fnEnd(oAjax.status);}
                      	
                      }
         			}
         		};

	   }
         window.οnlοad=function(){
         	var oBtn=document.getElementById('a');
         	oBtn.click=function(){
              ajax('a.txt?='+new Date().getTime(),function(str){});
         	};
         };

	</script>


在上面的代碼中,我對ajax的主體部分進行了一個函數的封裝,變爲之傳遞三個參數,分別爲要讀取的文件url,第二個在是讀取成功的時候調用的函數,第三則是失敗時執行的行數;

而ajax函數體中的,首先進行一個兼容性的判定,主要是爲了兼容低版本ie爲進行XMLHttpRequest 的定義,而執行else部門,在這裏我們需要主要的是裏面的window對象;

由於低版本ie中未定義XMLHttpRequest,而任何對象屬性都可以是window對象的屬性,所以相當於我們對之進行了定義,要不然低版本ie會報錯;


oAjax.open()該函數可接受三個參數,第一個爲請求的方式(GET或POST),第二個爲要打開的文件,第三個true 或flase,表示是否異步執行;

後面的由於時間關係就不多解釋了


跟着在爲點擊時間添加函數體的時候,我們可以看到'a.txt?='+new Date().getTime(),這部分只要是通過不斷的獲取一個時間戳來進行頁面的刷新,解決緩存帶來的問題/

發佈了42 篇原創文章 · 獲贊 1 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章