Programmer un bouton en AJaX

Yoanlibert · 27 Novembre 2013

Bonjour,

Voila, comment programmer un bouton afficher afin que lorsque je clique sur lui le contenu du fichier dont l’adresse est donnée dans le champs de saisie soit affiché et tt ça avec AJaX bien sur ?

Merci !

Yoanlibert · 27 Novembre 2013

Re: AJaX !

Sacahnt que j'ai déjà ça et que je dois intercepter les exceptions susceptibles d'être déclenchées par l’objet xhr et de les
afficher dans un alert() :

function createXhrObject() {
if (window.XMLHttpRequest)
return new XMLHttpRequest();

if (window.ActiveXObject) {
var names = [
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP"
];
for(var i in names) {
try {
return new ActiveXObject(names);
} catch(e) {}
}
}
return null; // not supported
}

Supermaury · 28 Novembre 2013

Bonjour.

Tu peux essayer le code qui suit. Il permet de lire des fichiers .txt situés sur le même site, dans le même répertoire que la page qui le contient.

Ca ne fonctionne qu'une fois placé sur un serveur.

@++

Code:

<html>
	<head>
		<script language="javascript">
			//Fonction escapeHtml() par https://github.com/janl/mustache.js/blob/master/mustache.js#L82
			var escapeHtmlMap = {
				"&": "&amp;",
				"<": "&lt;",
				">": "&gt;",
				'"': '&quot;',
				"'": '&#39;',
				"/": '&#x2F;'
			};
			function escapeHtml(string) {
				return String(string).replace(/[&<>"'\/]/g, function (s) {
					return escapeHtmlMap[s];
				});
			}
			//
			function getFile() {
				document.getElementById("contentLoaded").innerHTML="";
				var myFile;
				myFile = document.fileForm.fileName.value;
				if(!myFile) {
					alert('Tapez un nom de fichier.');
				} else {
					var xmlhttp;
					if (window.XMLHttpRequest) {
						xmlhttp = new XMLHttpRequest();
					} else if (window.ActiveXObject) {
						var names = [
						"Msxml2.XMLHTTP.6.0",
						"Msxml2.XMLHTTP.3.0",
						"Msxml2.XMLHTTP",
						"Microsoft.XMLHTTP"
						];
						for(var i in names) {
							try {
								xmlhttp = new ActiveXObject(names[i]); 
							} catch(e) {
								alert('Ajax non supporté.');
							}
						}
					}
					xmlhttp.onreadystatechange = function() {
						if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
							document.getElementById("contentLoaded").innerHTML = escapeHtml(xmlhttp.responseText).replace(/\n/g,"<br />"); 							
						} else if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {
							document.getElementById("contentLoaded").innerHTML = 'Fichier non trouvé.';
						}
					};
					xmlhttp.open("GET",encodeURIComponent(document.fileForm.fileName.value)+"?t="+Date(),true);
					xmlhttp.send()
				}
				return false;
			}
		</script>
	</head>
	<body>
		<noscript>Merci d'activer Javascript.</noscript>
		<form id="fileForm" name="fileForm" action="#" method="get" onSubmit="return getFile();">
			<input type="text" maxlength="300" id="fileName" name="fileName" value="text.txt" />
			<input type="submit" value="Charger" />
		</form>
		<div id="contentLoaded">J'attends mon fichier :)</div>
	</body>
</html>