Sencha Touch - อัปโหลดและดาวน์โหลด
Sencha Touch ให้การกำหนดค่า XHR2 เพื่อทำงานร่วมกับการพัฒนา Ajax และ Ajax2
XHR2 คือ xmlHttpRequest ระดับ 2 ซึ่งใช้ในการร้องขอข้อมูลจากเซิร์ฟเวอร์ สำหรับเว็บแอปพลิเคชันใด ๆ ข้อมูลจะอยู่ที่เซิร์ฟเวอร์และเมื่อโหลดเพจแล้วควรเข้าถึงข้อมูลจากเซิร์ฟเวอร์ด้วยความช่วยเหลือของคำขอของ Ajax
XHR2 ใน Sencha Touch มีคุณสมบัติแถบความคืบหน้าซึ่งแสดงให้ผู้ใช้เห็นจำนวนข้อมูลที่ถ่ายโอนสำหรับคำขอเฉพาะ XHR2 ถูกเพิ่มเข้ามาใหม่ดังนั้นเราจึงต้องตรวจสอบว่าเบราว์เซอร์รองรับหรือไม่
ต่อไปนี้เป็นฟังก์ชั่นตรวจสอบว่าเบราว์เซอร์รองรับ XHR2 หรือไม่ -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}เรายังสามารถตรวจสอบได้ว่าเบราว์เซอร์รองรับการอัปโหลดแบบโปรเกรสซีฟด้วย XHR2 หรือไม่
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}คุณสมบัติใหม่ของ XHR2 รวมอยู่ใน Sencha Touch
| ซีเนียร์ No | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | XHR2: true ใช้เพื่อเปิดและปิดฟังก์ชัน XHR2 ในแอปพลิเคชัน |
| 2 | Ext.field.File มีการเพิ่มฟิลด์ไฟล์ใหม่เพื่อเพิ่มความสามารถเพิ่มเติมเกี่ยวกับประเภทของฟิลด์ |
| 3 | Ext.field.FileInput สิ่งนี้เพื่อให้ FileInput |
| 4 | Ext.progressIndicator นี่คือการระบุเปอร์เซ็นต์ที่แน่นอนของข้อมูลที่ถ่ายโอนในแง่ของแถบความคืบหน้า |
| 5 | xtype: fileinput เพื่อสร้างอินสแตนซ์ของคลาส fileInput |
| 6 | xtype: filefield เพื่อสร้างอินสแตนซ์ของคลาสไฟล์ |
| 7 | responseType : value พารามิเตอร์นี้อนุญาตให้มีการตอบกลับประเภทต่างๆเป็นข้อความเอกสารหยด ฯลฯ |
ต่อไปนี้เป็นตัวอย่างในการส่งคำขอ ajax แบบธรรมดาที่มีและไม่มีพารามิเตอร์และการอัปโหลดไฟล์โดยใช้ ajax
คำขอ 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 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>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ตัวอย่างข้างต้นแสดงการเรียก ajax ที่ประสบความสำเร็จเนื่องจาก URL ที่กล่าวถึงนั้นถูกต้อง ในตัวอย่างนี้เราไม่ได้ส่งผ่านพารามิเตอร์ใด ๆ แต่เป็นเพียงคำขอ ajax ธรรมดา ๆ ที่ตรงกับ URL ที่กล่าวถึง
หากคุณใช้เบราว์เซอร์ Chrome ในเครื่องมือสำหรับนักพัฒนาให้ไปที่ส่วนเครือข่ายคุณจะเห็นคำขอที่กำลังส่งและการตอบกลับที่เราได้รับ
คำขอ 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 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>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ในตัวอย่างข้างต้นเพียงเพื่อแสดงให้เห็นว่า ajax failure ทำงานอย่างไรเราได้กล่าวถึง URL ที่ไม่ถูกต้อง เปรียบเทียบสิ่งนี้กับตัวอย่างก่อนหน้านี้คุณจะพบความแตกต่าง
การส่งพารามิเตอร์ในคำขอ 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>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ในตัวอย่างนี้เรากำลังส่งผ่านพารามิเตอร์ด้วย ajax โดยใช้ data property ของ ajax call
การอัปโหลดไฟล์โดยใช้ 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>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ตัวอย่างนี้แสดงวิธีการอัปโหลดข้อมูลโดยใช้ ajax call ในตัวอย่างนี้เรากำลังใช้ตัวบ่งชี้แถบความคืบหน้าเพื่อแสดงความคืบหน้าขณะอัปโหลดไฟล์