AJAX快取的使用方法-js教程-PHP中文網

這次帶給大家AJAX快取的使用方法，AJAX快取使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

做一個專案用到Ajax,開始覺得挺好，後來發現一個問題，例如刪除一項，恢復之後就不能再接著刪除，

必須要等一段時間，後來知道是IE快取的問題
AJAX快取頁面是一個剛接觸AJAX的人一定會遇到的問題，造成這個問題的關鍵性人物又是Ie...
在網路上找了很多資料後，總結一下
1:在AJAX請求的頁面後面加個隨機函數,我們可以使用隨機時間函數
在javascript發送的URL後加上t=Math.random()
當然，不是直接把t =Math.random()拷貝到URL後面,應該像這樣:URL "&" "t=" Math.random();
2:在XMLHttpRequest發送請求之前加上XMLHttpRequest.setRequestHeader("If-Modified- Since","0")
一般情況下,這裡的XMLHttpRequest不會直接使用
你應該可以找到這樣的程式碼
XXXXX.send(YYYYYY);
那麼,就把它變成
XXXXX.setRequestHeader("If-Modified-Since","0");
XXXXX.send(YYYYYY);
第二種方法感覺挺好
ajax 清除緩存的兩種方法
第一種：
模板上加上

<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

登入後複製

第二種：
url加上隨機數字變數
[AJAX介紹]
　　Ajax是使用客戶端腳本與Web伺服器交換資料的網頁應用程式開發方法。 Web頁面不用打斷互動流程進行重新加裁，就可以動態地更新。使用Ajax，使用者可以建立接近本機桌面應用程式的直接、高可用、更豐富、更動態的網路使用者介面。
　　非同步JavaScript和XML（AJAX）不是什麼新技術，而是使用幾種現有技術－包括級聯樣式表（CSS）、JavaScript、XHTML、XML和可擴展樣式語言轉換（XSLT），開發外觀及操作類似桌面軟體的Web應用軟體。
　　[AJAX執行原理]
　　一個Ajax互動從一個稱為XMLHttpRequest的JavaScript物件開始。如同名字所暗示的，它允許一個客戶端腳本來執行HTTP請求，並且將會解析一個XML格式的伺服器回應。 Ajax處理過程中的第一步是建立一個XMLHttpRequest實例。使用HTTP方法（GET或POST）來處理請求，並將目標URL設定到XMLHttpRequest物件上。
　　當你發送HTTP請求，你不希望瀏覽器掛起並等待伺服器的回應，取而代之的是，你希望透過頁面繼續響應用戶的介面交互，並在伺服器回應真正到達後處理它們。要完成它，你可以向XMLHttpRequest註冊一個回呼函數，並非同步地派發XMLHttpRequest請求。控制權馬上就被回到瀏覽器，當伺服器回應到達時，回呼函數將會被呼叫。
　　[AJAX實際應用]
　　1. 初始化Ajax
　　Ajax其實就是呼叫了XMLHttpRequest對象，那麼首先我們的就必須呼叫這個對象，我們建構一個初始化Ajax的函數： ##　　2. Ajax使用Get方式

　　現在我們第一步來執行一個Get請求，加入我們需要獲取/show.php?id=1的數據，那麼我們應該怎麼做呢？

　　假設有一個連結：新聞1，我點該連結的時候，不想任何刷新就能夠看到連結的內容，那我們該怎麼做呢？
//將連結改為：
//並且設定一個接收新聞的圖層，並且設定為不顯示：
　　同時建構對應的JavaScript函數：

/** 
* 初始化一个xmlhttp对象 
*/ 
function InitAjax() 
{ 
　var ajax=false; 
　try { 
　　ajax = new ActiveXObject("Msxml2.XMLHTTP"); 
　} catch (e) { 
　　try { 
　　　ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
　　} catch (E) { 
　　　ajax = false; 
　　} 
　} 
　if (!ajax && typeof XMLHttpRequest!='undefined') { 
　　ajax = new XMLHttpRequest(); 
　} 
　return ajax; 
}

登入後複製

　　這種方式適應於頁面中任何元素，包括表單等等，其實在應用程式中，對表單的操作是比較多的，針對表單，更多使用的是POST方式，這個下面將講述。 3. Ajax使用POST方式

　　其實POST方式跟Get方式是比較類似的，只是在執行Ajax的時候稍有不同，我們簡單講述一下。
　　假設有一個使用者輸入資料的表單，我們在無刷新的情況下把使用者資料儲存到資料庫中，同時給使用者一個成功的提示。

function getNews(newsID) 
{ 
　//如果没有把参数newsID传进来 
　if (typeof(newsID) == 'undefined') 
　{ 
　　return false; 
　} 
　//需要进行Ajax的URL地址 
　var url = "/show.php?id="+ newsID; 
　//获取新闻显示层的位置 
　var show = document.getElementById("show_news"); 
　//实例化Ajax对象 
　var ajax = InitAjax(); 
　//使用Get方式进行请求 
　ajax.open("GET", url, true); 
　//获取执行状态 
　ajax.onreadystatechange = function() { 
　　//如果执行是状态正常，那么就把返回的内容赋值给上面指定的层 
　　if (ajax.readyState == 4 && ajax.status == 200) { 
　　　show.innerHTML = ajax.responseText; 
　　} 
　} 
　//发送空 
　ajax.send(null); 
}

登入後複製

　　我們看到上面的form表單裡沒有需要提交目標等信息，並且提交按鈕的類型也只是button，那麼所有操作都是靠onClick事件中的saveUserInfo()函數來執行了。我們描述一下這個函數：

function saveUserInfo() 
{ 
　//获取接受返回信息层 
　var msg = document.getElementById("msg"); 
　//获取表单对象和用户信息值 
　var f = document.user_info; 
　var userName = f.user_name.value; 
　var userAge = f.user_age.value; 
　var userSex = f.user_sex.value; 
　//接收表单的URL地址 
　var url = "/save_info.php"; 
　//需要POST的值，把每个变量都通过&来联接 
　var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex; 
　//实例化Ajax 
　var ajax = InitAjax(); 
　//通过Post方式打开连接 
　ajax.open("POST", url, true); 
　//定义传输的文件HTTP头信息 
　ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
　//发送POST数据 
　ajax.send(postStr); 
　//获取执行状态 
　ajax.onreadystatechange = function() { 
　　//如果执行状态成功，那么就把返回信息写到指定的层里 
　　if (ajax.readyState == 4 && ajax.status == 200) { 
　　　msg.innerHTML = ajax.responseText; 
　　} 
　} 
}

登入後複製

　　4. 异步回调（伪Ajax方式）
　　一般情况下，使用Get、Post方式的Ajax我们都能够解决目前问题，只是应用复杂程度，当然，在开发中我们也许会碰到无法使用Ajax的时候，但是我们又需要模拟Ajax的效果，那么就可以使用伪Ajax的方式来实现我们的需求。
　　伪Ajax大致原理就是说我们还是普通的表单提交，或者别的什么的，但是我们却是把提交的值目标是一个浮动框架，这样页面就不刷新了，但是呢，我们又需要看到我们的执行结果，当然可以使用JavaScript来模拟提示信息，但是，这不是真实的，所以我们就需要我们的执行结果来异步回调，告诉我们执行结果是怎么样的。
　　假设我们的需求是需要上传一张图片，并且，需要知道图片上传后的状态，比如，是否上传成功、文件格式是否正确、文件大小是否正确等等。那么我们就需要我们的目标窗口把执行结果返回来给我们的窗口，这样就能够顺利的模拟一次Ajax调用的过程。
　　以下代码稍微多一点，并且涉及Smarty模板技术，如果不太了解，请阅读相关技术资料。
　　上传文件：upload.html

//上传表单，指定target属性为浮动框架iframe1 
<form action="/upload.php" method="post" enctype="multipart/form-data" name="upload_img" target="iframe1"> 
选择要上传的图片：<input type="file" name="image"><br /> 
<input type="submit" value="上传图片"> 
</form> 
//显示提示信息的层 
<p id="message" style="display:none"></p> 
//用来做目标窗口的浮动框架 
<iframe name="iframe1" width="0" height="0" scrolling="no"></iframe> 
<?php 
/* 定义常量 */ 
//定义允许上传的MIME格式 
define("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png"); 
//图片允许大小，字节 
define("UPLOAD_IMAGE_SIZE", 102400); 
//图片大小用KB为单位来表示 
define("UPLOAD_IMAGE_SIZE_KB", 100); 
//图片上传的路径 
define("UPLOAD_IMAGE_PATH", "./upload/"); 
//获取允许的图像格式 
$mime = explode(",", USER_FACE_MIME); 
$is_vaild = 0; 
//遍历所有允许格式 
foreach ($mime as $type) 
{ 
　if ($_FILES[&#39;image&#39;][&#39;type&#39;] == $type) 
　{ 
　　$is_vaild = 1; 
　} 
} 
//如果格式正确，并且没有超过大小就上传上去 
if ($is_vaild && $_FILES[&#39;image&#39;][&#39;size&#39;]<=USER_FACE_SIZE && $_FILES[&#39;image&#39;][&#39;size&#39;]>0) 
{ 
　if (move_uploaded_file($_FILES['image']['tmp_name'], USER_IMAGE_PATH . $_FILES['image']['name'])) 
　{ 
　　$upload_msg ="上传图片成功！"; 
　} 
　else 
　{ 
　　$upload_msg = "上传图片文件失败"; 
　} 
} 
else 
{ 
　$upload_msg = "上传图片失败，可能是文件超过". USER_FACE_SIZE_KB ."KB、或者图片文件为空、或文件格式不正确"; 
} 
//解析模板文件 
$smarty->assign("upload_msg", $upload_msg); 
$smarty->display("upload.tpl"); 
?> 
{if $upload_msg != ""} 
callbackMessage("{$upload_msg}"); 
{/if} 
//回调的JavaScript函数，用来在父窗口显示信息 
function callbackMessage(msg) 
{ 
　//把父窗口显示消息的层打开 
　parent.document.getElementById("message").style.display = "block"; 
　//把本窗口获取的消息写上去 
　parent.document.getElementById("message").innerHTML = msg; 
　//并且设置为3秒后自动关闭父窗口的消息显示 
　setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000); 
}

登入後複製

　　[结束语]
　　这是一种非常良好的Web开发技术，虽然出现时间比较长，但是到现在才慢慢火起来，也希望带给Web开发界一次变革，让我们朝RIA（富客户端）的开发迈进，当然，任何东西有利也有弊端，如果过多的使用JavaScript，那么客户端将非常臃肿，不利于用户的浏览体验，如何在做到快速的亲前提下，还能够做到好的用户体验，这就需要Web开发者共同努力了。
　　使用异步回调的方式过程有点复杂，但是基本实现了Ajax、以及信息提示的功能，如果接受模板的信息提示比较多，那么还可以通过设置层的方式来处理，这个随机应变吧。模板文件：upload.tpl　　处理上传的PHP文件：upload.php　　大致使用POST方式的过程就是这样，当然，实际开发情况可能会更复杂，这就需要开发者去慢慢琢磨。　　那么当，当用户点击“新闻1”这个链接的时候，在下面对应的层将显示获取的内容，而且页面没有任何刷新。当然，我们上面省略了show.php这个文件，我们只是假设show.php文件存在，并且能够正常工作的从数据库中把id为1的新闻提取出来。

<a href="#" onClick="getNews(1)">新闻1</a> 
<p id="show_news"></p>

登入後複製

　　你也许会说，这个代码因为要调用XMLHTTP组件，是不是只有IE浏览器能使，不是的经我试验，Firefox也是能使用的。
那么我们在执行任何Ajax操作之前，都必须先调用我们的InitAjax()函数来实例化一个Ajax对象。
url = "xxx.asp?" + Math.round(Math.random()*100) 强制刷新

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！