Sencha Touch - Télécharger et télécharger
Sencha Touch fournit une configuration XHR2 pour fonctionner avec le développement Ajax et Ajax2.
XHR2 est xmlHttpRequest niveau 2, qui utilisé pour demander des données au serveur. Pour toute application Web, les données résident sur le serveur et une fois la page chargée, les données doivent être accessibles à partir du serveur à l'aide de requêtes Ajax.
XHR2 dans Sencha Touch fournit la fonction de barre de progression, qui montre à l'utilisateur la quantité de données transférées pour une demande particulière. XHR2 est nouvellement ajouté, nous devons donc vérifier si le navigateur le prend en charge ou non.
Voici la fonction pour vérifier si le navigateur prend en charge XHR2 -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Nous pouvons même vérifier si le téléchargement progressif avec XHR2 est pris en charge par le navigateur ou non.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Diverses nouvelles fonctionnalités XHR2 sont incluses dans Sencha Touch.
| Sr. Non | Caractéristiques et description |
|---|---|
| 1 | XHR2: true Ceci est utilisé pour activer et désactiver la fonctionnalité XHR2 dans l'application. |
| 2 | Ext.field.File Un nouveau champ de fichier est ajouté pour donner plus de précision sur le type de champ. |
| 3 | Ext.field.FileInput Ceci pour fournir FileInput. |
| 4 | Ext.progressIndicator Il s'agit de fournir le pourcentage exact de données transférées en termes de barre de progression. |
| 5 | xtype: fileinput Pour créer une instance de la classe fileInput. |
| 6 | xtype: filefield Pour créer une instance de classe de fichier. |
| sept | responseType : value Ce paramètre autorise différents types de réponses sous forme de texte, document, blob, etc. |
Voici les exemples pour envoyer une simple requête ajax avec et sans paramètre et télécharger des fichiers à l'aide d'ajax.
Requête Ajax simple sans paramètres - Succès
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Il produira le résultat suivant -
L'exemple ci-dessus montre le succès de l'appel ajax car l'URL mentionnée est correcte. Dans cet exemple, nous ne transmettons aucun paramètre, c'est juste une simple requête ajax qui atteint l'URL mentionnée.
Si vous utilisez le navigateur Chrome dans l'outil de développement, accédez à la section réseau, vous pouvez voir la demande qui est envoyée et la réponse que nous obtenons.
Requête Ajax simple sans paramètres - Échec
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Il produira le résultat suivant -
Dans l'exemple ci-dessus, juste pour montrer comment fonctionne l'échec ajax, nous avons mentionné la mauvaise URL. Comparez ceci et l'exemple précédent, vous trouverez la différence.
Envoi de paramètres dans la requête Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var formData = new FormData();
formData.append("firstName", "Hi");
formData.append("lastName", "Reader");
// Request will be sent as part of the payload instead of standard post data
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
Ext.Msg.alert(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
Ext.Msg.alert('Ajax failed!');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Il produira le résultat suivant -
Dans cet exemple, nous passons des paramètres avec l'ajax en utilisant la propriété data de l'appel ajax.
Télécharger des fichiers à l'aide d'Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
progress:progressIndicator,
success: function(response) {
Ext.Msg.alert('File uploaded successfully.');
},
failure: function(response) {
Ext.Msg.alert('File upload failed.');
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Il produira le résultat suivant -
Cet exemple montre comment télécharger des données à l'aide d'un appel ajax. Dans cet exemple, nous utilisons l'indicateur de la barre de progression pour afficher la progression lors du téléchargement du fichier.