So verwenden Sie den AJAX-Cache

Dieses Mal erkläre ich Ihnen, wie Sie den AJAX-Cache verwenden Vorsichtsmaßnahmen Hier sind praktische Fälle, schauen wir uns das an.

Ich habe an einem Projekt mit Ajax gearbeitet, aber dann habe ich ein Problem festgestellt. Wenn ich beispielsweise ein Element lösche, kann ich es nicht mehr löschen 🎜>

Ich muss eine Weile warten, aber später habe ich herausgefunden, dass es sich um ein Problem mit dem IE-Caching handelt.

Die AJAX-Cache-Seite ist ein Problem, auf das AJAX-Neulinge auf jeden Fall stoßen werden. Die Schlüsselperson, die dieses Problem verursacht ist Dh...
Nachdem ich viele Informationen im Internet durchsucht hatte, kam ich zu dem Schluss: Werfen wir einen Blick darauf
1: Fügen Sie nach der von AJAX angeforderten Seite eine Zufallsfunktion hinzu. Wir können die Zufallszeitfunktion verwenden
Fügen Sie t=Math.random() nach der von Javascript gesendeten URL hinzu
Anstatt t =Math.random() direkt an das Ende der URL zu kopieren, sollte es natürlich so aussehen: URL+"&" +"t="+Math.random();
2: XMLHttpRequest.setRequestHeader("If- Modified-Since","0") hinzufügen
Unter normalen Umständen wird XMLHttpRequest hier nicht direkt verwendet
Sie sollten in der Lage sein, einen solchen Code zu finden:
XXXXX.send(YYYYYY); >XXXXX.send(YYYYYY);
Die zweite Methode fühlt sich gut an

ajax Zwei Möglichkeiten, den Cache zu leeren

Die erste:
Fügen Sie

<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">

zur Vorlage hinzu Der Zweite:
Zufallszahlenvariable zur URL hinzufügen
[Einführung in AJAX]

Ajax ist eine Webanwendungsentwicklungsmethode, die clientseitige Skripte verwendet, um Daten mit Webservern auszutauschen. Webseiten können dynamisch aktualisiert werden, ohne den Interaktionsprozess zum erneuten Schneiden zu unterbrechen. Mit Ajax können Benutzer direkte, hochverfügbare, umfangreichere und dynamischere Web-Benutzeroberflächen erstellen, die nativen Desktop-Anwendungen ähneln.

Asynchrones JavaScript und XML (AJAX) ist keine neue Technologie, sondern wird unter Verwendung mehrerer vorhandener Technologien entwickelt – darunter Cascading Style Sheets (CSS), JavaScript, XHTML, XML und Extensible Style Language Transformation (XSLT). Webanwendungssoftware, die aussieht und funktioniert wie eine Desktop-Software.
　[AJAX-Ausführungsprinzip]
Eine Ajax-Interaktion beginnt mit einem
JavaScript-Objekt
namens XMLHttpRequest. Wie der Name schon sagt, ermöglicht es einem clientseitigen Skript, HTTP-Anfragen auszuführen und eine XML-formatierte Serverantwort zu analysieren. Der erste Schritt bei der Ajax-Verarbeitung besteht darin, eine XMLHttpRequest-Instanz zu erstellen. Verwenden Sie die HTTP-Methode (GET oder POST), um die Anfrage zu verarbeiten und die Ziel-URL auf das XMLHttpRequest-Objekt festzulegen.
Wenn Sie eine HTTP-Anfrage senden, möchten Sie nicht, dass der Browser hängen bleibt und auf eine Antwort vom Server wartet. Stattdessen möchten Sie weiterhin auf die Schnittstelleninteraktionen des Benutzers über die Seite reagieren und die Serverantworten verarbeiten, sobald sie vorliegen tatsächlich ankommen. Um dies zu erreichen, können Sie eine
Rückruffunktion bei XMLHttpRequest registrieren und die XMLHttpRequest-Anfrage asynchron versenden. Die Kontrolle wird sofort an den Browser zurückgegeben, und wenn die Serverantwort eintrifft, wird die Rückruffunktion aufgerufen. 　[Praktische Anwendung von AJAX]
　1. Ajax initialisieren 　Ajax ruft tatsächlich das XMLHttpRequest-Objekt auf, daher müssen wir zuerst eine Funktion zum Initialisieren von Ajax erstellen:

/** 
* 初始化一个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; 
}

　2 . Ajax verwendet die Get-Methode
Jetzt besteht unser erster Schritt darin, eine Get-Anfrage auszuführen und die Daten hinzuzufügen, die wir zum Abrufen von /show.php?id=1 benötigen. Was sollen wir also tun?
Angenommen, es gibt einen Link: News 1 Wenn ich auf den Link klicke, kann ich den Inhalt des Links sehen Auffrischen. Was machen wir also? //Ändern Sie den Link zu:

//Und legen Sie eine Ebene fest, um Nachrichten zu empfangen, und stellen Sie ein, dass sie nicht angezeigt wird:
　Konstruieren Sie gleichzeitig die entsprechende JavaScript-Funktion:

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); 
}

Diese Methode eignet sich für jedes Element auf der Seite, einschließlich Formularen usw. Tatsächlich gibt es in Anwendungen viele Vorgänge für Formulare. Für Formulare wird häufiger die POST-Methode verwendet, die im Folgenden beschrieben wird.
3. Ajax verwendet die POST-Methode
Tatsächlich ähnelt die POST-Methode der Get-Methode, unterscheidet sich jedoch geringfügig bei der Ausführung von Ajax. Angenommen, es gibt ein Formular für Benutzer zur Eingabe von Informationen. Wir speichern die Benutzerinformationen ohne Aktualisierung in der Datenbank und geben dem Benutzer eine Erfolgsmeldung.

//构建一个表单，表单中不需要action、method之类的属性，全部由ajax来搞定了。 
<form name="user_info"> 
姓名：<input type="text" name="user_name" /><br /> 
年龄：<input type="text" name="user_age" /><br /> 
性别：<input type="text" name="user_sex" /><br /> 
<input type="button" value="提交表单" onClick="saveUserInfo()"> 
</form> 
//构建一个接受返回信息的层： 
<p id="msg"></p>

Wir sehen, dass es im obigen Formular nicht erforderlich ist, Ziel- und andere Informationen zu übermitteln, und dass die Art der Senden-Schaltfläche nur eine Schaltfläche ist, sodass alle Vorgänge von der Funktion saveUserInfo() im onClick-Ereignis ausgeführt werden . Beschreiben wir diese Funktion:

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中文网其它相关文章！

推荐阅读：

jQuery Ajax解析大全

jQuery+ajax功能实现

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den AJAX-Cache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!