Sencha Touch - Unggah & Unduh
Sencha Touch menyediakan konfigurasi XHR2 untuk bekerja dengan pengembangan Ajax dan Ajax2.
XHR2 adalah xmlHttpRequest level 2, yang digunakan untuk meminta data dari server. Untuk aplikasi web apa pun, data berada di server dan setelah halaman dimuat, data harus diakses dari server dengan bantuan permintaan Ajax.
XHR2 di Sencha Touch menyediakan fitur bilah kemajuan, yang menunjukkan kepada pengguna jumlah data yang ditransfer untuk permintaan tertentu. XHR2 baru ditambahkan jadi kami perlu memeriksa apakah browser mendukungnya atau tidak.
Berikut adalah fungsi untuk memeriksa apakah browser mendukung XHR2 -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Kami bahkan dapat memeriksa apakah unggahan progresif dengan XHR2 didukung oleh browser atau tidak.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Berbagai fitur XHR2 baru disertakan dalam Sencha Touch.
| Sr Tidak | Fitur & Deskripsi |
|---|---|
| 1 | XHR2: true Ini digunakan untuk mengaktifkan dan menonaktifkan fungsionalitas XHR2 dalam aplikasi. |
| 2 | Ext.field.File Field file baru ditambahkan untuk memberikan lebih banyak informasi tentang jenis field. |
| 3 | Ext.field.FileInput Ini untuk menyediakan FileInput. |
| 4 | Ext.progressIndicator Ini untuk memberikan persentase persis data yang ditransfer dalam hal bilah kemajuan. |
| 5 | xtype: fileinput Untuk membuat instance kelas fileInput. |
| 6 | xtype: filefield Untuk membuat instance kelas file. |
| 7 | responseType : value Parameter ini memungkinkan berbagai jenis respons seperti teks, dokumen, blob, dll. |
Berikut adalah contoh mengirim request ajax sederhana dengan dan tanpa parameter dan mengupload file menggunakan ajax.
Permintaan Ajax sederhana tanpa parameter - Berhasil
<!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>Ini akan menghasilkan hasil sebagai berikut -
Contoh di atas menunjukkan keberhasilan panggilan ajax karena URL yang disebutkan benar. Dalam contoh ini, kami tidak meneruskan parameter apa pun, itu hanya permintaan ajax sederhana yang mengenai URL yang disebutkan.
Jika Anda menggunakan browser chrome di alat pengembang, navigasikan ke bagian jaringan, Anda dapat melihat permintaan yang dikirim dan tanggapan yang kami dapatkan.
Permintaan Ajax sederhana tanpa parameter - Kegagalan
<!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>Ini akan menghasilkan hasil sebagai berikut -
Dalam contoh di atas, hanya untuk menunjukkan cara kerja kegagalan ajax, kami telah menyebutkan URL yang salah. Bandingkan ini dan contoh sebelumnya, Anda akan menemukan perbedaannya.
Mengirim parameter dalam permintaan 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>Ini akan menghasilkan hasil sebagai berikut -
Dalam contoh ini, kami meneruskan parameter dengan ajax menggunakan properti data panggilan ajax.
Mengupload file menggunakan 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>Ini akan menghasilkan hasil sebagai berikut -
Contoh ini menunjukkan cara mengunggah data menggunakan panggilan ajax. Dalam contoh ini, kami menggunakan indikator bilah kemajuan untuk menunjukkan kemajuan saat mengunggah file.