淺析IE瀏覽器關(guān)于ajax的緩存機(jī)制
IE瀏覽器對于同一個(gè)URL只返回相同結(jié)果。因?yàn)椋谀J(rèn)情況下,IE會(huì)緩存ajax的請求結(jié)果。對于同一個(gè)URL地址,在緩存過期之前,只有第一次請求會(huì)真正發(fā)送到服務(wù)端。大多數(shù)情況下,我們使用ajax是希望實(shí)現(xiàn)局部刷新的,所以這就牽扯到一個(gè)改進(jìn)的問題。
如果想每次都獲取到最新數(shù)據(jù),我們只需保證每次傳入的URL不一樣。最簡單的方法就是通過給url拼接參數(shù)。利用math函數(shù)的random()方法生成隨機(jī)數(shù)。
比如訪問百度www.baidu.com,我們就可以把地址寫成www.baidu.com?t=Math.random();或者?t=new Date().getTime();
********************************分割線**********************************
說到這里,不妨復(fù)習(xí)一下ajax的基本用法。
*Ajax創(chuàng)建對象:
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 請求:
無法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫)
向服務(wù)器發(fā)送大量數(shù)據(jù)(POST 沒有數(shù)據(jù)量限制)
發(fā)送包含未知字符的用戶輸入時(shí),POST 比 GET 更穩(wěn)定也更可靠
*Ajax響應(yīng):
要獲得服務(wù)器的響應(yīng),需要使用XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
ResponseText:獲得字符串形式的響應(yīng)數(shù)據(jù)。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
ResponseXML:獲得XML形式的響應(yīng)數(shù)據(jù)。
如果來自服務(wù)器的響應(yīng)是 XML,而且需要作為 XML 對象進(jìn)行解析。
*Ajax - onreadystatechange :
當(dāng)請求被發(fā)送到服務(wù)器時(shí),我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
每當(dāng) readyState 改變時(shí),就會(huì)觸發(fā) onreadystatechange 事件。
在 onreadystatechange 事件中,我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)。
當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí),表示響應(yīng)已就緒:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
補(bǔ)充:下面看下淺談Ajax解決瀏覽器的緩存問題
Ajax能提高頁面載入速度的主要原因是通過Ajax減少了重復(fù)數(shù)據(jù)的載入,也即在載入數(shù)據(jù)的同時(shí)將數(shù)據(jù)緩存到內(nèi)存中,一旦數(shù)據(jù)被加載,只要沒有刷新頁面,這些數(shù)據(jù)就會(huì)一直被緩存在內(nèi)存中,當(dāng)提交的URL與歷史的URL一致時(shí),就不需要提交給服務(wù)器,也即不需要從服務(wù)器獲取數(shù)據(jù),雖然降低了服務(wù)器的負(fù)載,提高了用戶體驗(yàn),但不能獲取最新的數(shù)據(jù)。為了保證讀取的信息都是最新的,需要禁止其緩存功能。
解決方案有如下幾種:
① 在Ajax發(fā)送請求前加上anyAjaxObj.setRequestHeader("If-Modified-Since", "0")。
② 在Ajax發(fā)送請求前加上anyAjaxObj.setRequestHeader("Cache-Control", "no-cache")。
③ 在URL后加上一個(gè)隨機(jī)數(shù):"fresh=" + Math.random();。
④ 在URL后加上時(shí)間搓:"nowtime=" + new Date().getTime();。
⑤ 如果是使用jQuery,則用$.ajaxSetup({cache:false})。這樣頁面的所有Ajax都會(huì)執(zhí)行該語句而不需要保存緩存記錄。
總結(jié)
以上所述是小編給大家介紹的IE瀏覽器關(guān)于ajax的緩存機(jī)制,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
ztree+ajax實(shí)現(xiàn)文件樹下載功能
這篇文章主要為大家詳細(xì)介紹了ztree+ajax實(shí)現(xiàn)文件樹下載功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05淺談Ajax相關(guān)及其優(yōu)缺點(diǎn)
最近在學(xué)習(xí)有關(guān) AJAX 的知識,上網(wǎng)查閱了一些有關(guān) AJAX 的資料,主要是有關(guān) AJAX的技術(shù)簡介及其優(yōu)缺點(diǎn)等。在這里,我想對我收集的資料做一些小小的總結(jié),大部分資料都來自網(wǎng)上,本人在此只做分類總結(jié),希望對和我一樣正在學(xué)習(xí) AJAX 的朋友有一定的幫助。2015-06-06react axios 跨域訪問一個(gè)或多個(gè)域名問題
這篇文章主要介紹了react axios 跨域訪問一個(gè)或多個(gè)域名問題,本文通過實(shí)例代碼截圖的形式給大家展示的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04ajax請求返回的數(shù)據(jù)看不到回調(diào)函數(shù)沒有執(zhí)行也沒報(bào)錯(cuò)
ajax請求返回的數(shù)據(jù)看不到回調(diào)函數(shù)沒有執(zhí)行,哪里都沒有報(bào)錯(cuò),有類似情況的朋友可以參考下本文2014-01-01Ajax異步請求的五個(gè)步驟及實(shí)戰(zhàn)案例
通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax可以使網(wǎng)頁實(shí)現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于Ajax異步請求的五個(gè)步驟及實(shí)戰(zhàn)案例的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08ajax類AJAXRequest v0.8.01 2008-01-31 最新版附使用幫助
2008-02-02解決微信返回上一頁,頁面中的AJAX的請求,對Get請求無效的問題
這篇文章給大家介紹微信返回上一頁,頁面中的AJAX的請求,對Get請求無效的問題分析及解決方法,需要的朋友參考下2017-01-01