首頁 >web前端 >js教程 >淺談ajax的快取機制---IE瀏覽器方面

淺談ajax的快取機制---IE瀏覽器方面

青灯夜游
青灯夜游轉載
2018-10-17 18:02:131801瀏覽

這篇文章主要介紹了IE瀏覽器關於ajax的快取機制,文中給大家提到了Ajax解決瀏覽器的快取問題,解決方法有很多種。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

IE瀏覽器對於同一個URL只回傳相同結果。因為,在預設情況下,IE會快取ajax的請求結果。對於同一個URL位址,在快取過期之前,只有第一次請求會真正傳送到服務端。大多數情況下,我們使用ajax是希望實現局部刷新的,所以這就牽扯到一個改進的問題。

如果想每次都取得到最新數據,我們只需保證每次傳入的URL不一樣。最簡單的方法就是透過給url拼接參數。利用math函數的random()方法產生隨機數。

例如造訪百度www.baidu.com,我們就可以把位址寫成www.baidu.com?t=Math.random();或?t=new Date().getTime();

說到這裡,不妨複習一下ajax的基本用法。

*Ajax建立物件:   

 var xmlhttp;
 if (window.XMLHttpRequest){
  //IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else{
  //IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

*Ajax請求:

//GET请求:
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
//POST请求:
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

GET 還是POST?

與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能使用。

然而,在以下情況中,請使用POST 請求:

無法使用快取檔案(更新伺服器上的檔案或資料庫)
向伺服器發送大量資料(POST 沒有資料量限制)
發送包含未知字元的使用者輸入時,POST 比GET 更穩定也更可靠

*Ajax回應:

要獲得伺服器的回應,需要使用XMLHttpRequest 物件的responseText 或responseXML 屬性。

ResponseText:取得字串形式的回應資料。

document.getElementById("myp").innerHTML=xmlhttp.responseText;

#ResponseXML:取得XML形式的回應資料。

如果來自伺服器的回應是 XML,而且需要作為 XML 物件進行解析。

*Ajax - onreadystatechange : 

#當請求被傳送到伺服器時,我們需要執行一些基於回應的任務。

每當 readyState 改變時,就會觸發 onreadystatechange 事件。

在 onreadystatechange 事件中,我們規定當伺服器回應已做好被處理的準備時所執行的任務。

當readyState 等於4​​ 且狀態為200 時,表示回應已就緒:

xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("myp").innerHTML=xmlhttp.responseText;
  }
 }

補充:下方看下淺談Ajax解決瀏覽器的快取問題

Ajax能提高頁面載入速度的主要原因是透過Ajax減少了重複資料的載入,也即在載入資料的同時將資料快取到記憶體中,一旦資料被加載,只要沒有刷新頁面,這些數據就會一直被緩存在內存中,當提交的URL與歷史的URL一致時,就不需要提交給伺服器,也即不需要從伺服器獲取數據,雖然降低了伺服器的負載,提高了使用者體驗,但不能取得最新的數據。為了確保讀取的資訊都是最新的,需要禁止其快取功能。

解決方案有以下幾種:

① 在Ajax發送請求前加上anyAjaxObj.setRequestHeader("If-Modified-Since", "0")。

② 在Ajax發送請求前加上anyAjaxObj.setRequestHeader("Cache-Control", "no-cache")。

③ 在URL後面加上一個隨機數字:"fresh=" Math.random();。

④ 在URL後面加上時間搓:"nowtime=" new Date().getTime();。

⑤ 如果是使用jQuery,則用$.ajaxSetup({cache:false})。這樣頁面的所有Ajax都會執行該語句而不需要儲存快取記錄。

總結

以上所述是小編給大家介紹的IE瀏覽器關於ajax的快取機制,希望對大家有所幫助。更多相關教學請造訪AJAX基礎影片教學JavaScript影片教學bootstrap影片教學

以上是淺談ajax的快取機制---IE瀏覽器方面的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除