Maison > Article > interface Web > Comment utiliser le cache AJAX

Comment utiliser le cache AJAX

php中世界最好的语言original: 2018-04-24 15:07:321746parcourir

Cette fois, je vais vous expliquer comment utiliser le cache AJAX. Quelles sont les précautions lors de l'utilisation du cache AJAX. Voici des cas pratiques, jetons un coup d'œil.

Je travaillais sur un projet utilisant Ajax. Au début, je pensais que c'était bien, mais ensuite j'ai trouvé un problème. Par exemple, si je supprime un élément, je ne peux plus le supprimer après l'avoir restauré. 🎜>

Je dois attendre un moment, mais j'ai découvert plus tard qu'il s'agissait d'un problème avec le cache IE

La page de cache AJAX est un problème que les personnes qui découvrent AJAX rencontreront certainement la personne clé à l'origine de ce problème. c'est-à-dire...
Après avoir cherché beaucoup d'informations sur Internet, j'ai conclu Jetons un coup d'oeil
1 : Ajouter une fonction aléatoire après la page demandée par AJAX. On peut utiliser la fonction de temps aléatoire
. Ajoutez t=Math.random() après l'URL envoyée par javascript
Bien sûr, au lieu d'ajouter directement t =Math.random() est copié à la fin de l'URL, cela devrait ressembler à ceci : URL+"&" +"t="+Math.random();
2 : Ajoutez XMLHttpRequest.setRequestHeader("If- Modified-Since","0")
Dans des circonstances normales, le XMLHttpRequest ici ne sera pas utilisé directement
Vous devriez pouvoir trouver un tel code
XXXXX.send(YYYYYY);
Ensuite, il devient
XXXX.setRequestHeader("If-Modified-Since","0"); >XXXX.send(YYYYYY);
La deuxième méthode fait du bien

ajax Deux façons de vider le cache
La première : Ajouter

au modèle ; le deuxième :

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

Ajouter une variable de nombre aléatoire à l'url

[AJAX Introduction]
Ajax est une méthode de développement d'applications Web qui utilise des scripts côté client pour échanger des données avec des serveurs Web. . Les pages Web peuvent être mises à jour dynamiquement sans interrompre le processus d'interaction pour le recoupage. Grâce à Ajax, les utilisateurs peuvent créer des interfaces utilisateur Web directes, hautement disponibles, plus riches et plus dynamiques, proches des applications de bureau natives.
JavaScript et XML asynchrones (AJAX) ne sont pas une nouvelle technologie, mais sont développés à l'aide de plusieurs technologies existantes, notamment les feuilles de style en cascade (CSS), JavaScript, XHTML, XML et le logiciel d'application Web Extensible Style Language Transformation (XSLT) qui ressemble et fonctionne comme un logiciel de bureau.
　[Principe d'exécution AJAX]
Une interaction Ajax commence par un
objet JavaScript
appelé XMLHttpRequest. Comme son nom l'indique, il permet à un script côté client d'effectuer des requêtes HTTP et d'analyser une réponse du serveur au format XML. La première étape du traitement Ajax consiste à créer une instance XMLHttpRequest. Utilisez la méthode HTTP (GET ou POST) pour gérer la demande et définissez l'URL cible sur l'objet XMLHttpRequest. Lorsque vous envoyez une requête HTTP, vous ne voulez pas que le navigateur se bloque et attende une réponse du serveur, vous souhaitez plutôt continuer à répondre aux interactions de l'interface utilisateur via la page et traiter les réponses du serveur une fois qu'elles sont reçues. effectivement arriver. Pour ce faire, vous pouvez enregistrer une fonction de rappel
avec XMLHttpRequest et envoyer la requête XMLHttpRequest de manière asynchrone. Le contrôle est immédiatement rendu au navigateur et lorsque la réponse du serveur arrive, la fonction de rappel sera appelée. 　[Application pratique d'AJAX] 　1. Initialiser Ajax
　Ajax appelle en fait l'objet XMLHttpRequest, nous devons donc d'abord appeler cet objet Nous construisons une fonction pour initialiser Ajax :

　2. Ajax utilise la méthode Get

Maintenant, notre première étape consiste à exécuter une requête Get et à ajouter les données dont nous avons besoin pour obtenir /show.php?id=1, alors que devons-nous faire ?

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

Supposons qu'il y ait un lien : News 1 Lorsque je clique sur le lien, je peux voir le contenu du lien sans aucun lien. rafraîchir. Alors, que faisons-nous ?

//Changez le lien en :
//Définissez un calque pour recevoir des actualités et définissez-le pour qu'il ne s'affiche pas :
　En même temps, construisez la fonction JavaScript correspondante :

Cette méthode convient à n'importe quel élément de la page, y compris les formulaires, etc. En fait, dans les applications, il existe de nombreuses opérations sur les formulaires. Pour les formulaires, la méthode POST est principalement utilisée, qui sera décrite ci-dessous.

3. Ajax utilise la méthode POST

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

En fait, la méthode POST est similaire à la méthode Get, mais elle est légèrement différente lors de l'exécution d'Ajax.

Supposons qu'il existe un formulaire permettant aux utilisateurs de saisir des informations. Nous enregistrons les informations utilisateur dans la base de données sans actualiser et donnons à l'utilisateur une invite de réussite.

Nous voyons qu'il n'est pas nécessaire de soumettre la cible et d'autres informations dans le formulaire ci-dessus, et le type de bouton de soumission est uniquement un bouton, donc toutes les opérations sont effectuées par la fonction saveUserInfo() dans l'événement onClick. Décrivons cette fonction :

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

Articles Liés

Voir plus