Sencha Touch - Tải lên và Tải xuống
Sencha Touch cung cấp cấu hình XHR2 để hoạt động với sự phát triển của Ajax và Ajax2.
XHR2 là xmlHttpRequest cấp 2, được sử dụng để yêu cầu dữ liệu từ máy chủ. Đối với bất kỳ ứng dụng web nào, dữ liệu nằm tại máy chủ và khi trang được tải, dữ liệu sẽ được truy cập từ máy chủ với sự trợ giúp của các yêu cầu Ajax.
XHR2 trong Sencha Touch cung cấp tính năng thanh tiến trình, hiển thị cho người dùng lượng dữ liệu được truyền cho một yêu cầu cụ thể. XHR2 mới được thêm vào nên chúng ta cần kiểm tra xem trình duyệt có hỗ trợ hay không.
Sau đây là chức năng để kiểm tra xem trình duyệt có hỗ trợ XHR2 hay không -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Chúng tôi thậm chí có thể kiểm tra xem tải lên liên tục với XHR2 có được trình duyệt hỗ trợ hay không.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Nhiều tính năng XHR2 mới khác nhau được bao gồm trong Sencha Touch.
| Sr.No | Tính năng & Mô tả |
|---|---|
| 1 | XHR2: true Điều này được sử dụng để bật và tắt chức năng XHR2 trong ứng dụng. |
| 2 | Ext.field.File Trường tệp mới được thêm vào để cung cấp thêm tính xác thực về loại trường. |
| 3 | Ext.field.FileInput Điều này để cung cấp FileInput. |
| 4 | Ext.progressIndicator Điều này là để cung cấp phần trăm dữ liệu chính xác được truyền về thanh tiến trình. |
| 5 | xtype: fileinput Để tạo thể hiện của lớp fileInput. |
| 6 | xtype: filefield Để tạo thể hiện của lớp tệp. |
| 7 | responseType : value Tham số này cho phép các loại phản hồi khác nhau như văn bản, tài liệu, đốm màu, v.v. |
Sau đây là các ví dụ để gửi yêu cầu ajax đơn giản có và không có tham số và tải tệp lên bằng ajax.
Yêu cầu Ajax đơn giản không có tham số - Thành công
<!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>Nó sẽ tạo ra kết quả sau:
Ví dụ trên cho thấy lệnh gọi ajax thành công vì URL được đề cập là đúng. Trong ví dụ này, chúng tôi không chuyển bất kỳ tham số nào, đó chỉ là một yêu cầu ajax đơn giản truy cập vào URL được đề cập.
Nếu bạn đang sử dụng trình duyệt chrome trong công cụ dành cho nhà phát triển, hãy điều hướng đến phần mạng, bạn có thể xem yêu cầu đang được gửi và phản hồi mà chúng tôi nhận được.
Yêu cầu Ajax đơn giản không có tham số - Không thành công
<!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>Nó sẽ tạo ra kết quả sau:
Trong ví dụ trên, chỉ để hiển thị cách hoạt động của lỗi ajax, chúng tôi đã đề cập đến URL sai. So sánh ví dụ này và ví dụ trước, bạn sẽ tìm thấy sự khác biệt.
Gửi tham số trong yêu cầu 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>Nó sẽ tạo ra kết quả sau:
Trong ví dụ này, chúng ta đang truyền các tham số với ajax bằng cách sử dụng thuộc tính dữ liệu của lệnh gọi ajax.
Tải lên tệp bằng 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>Nó sẽ tạo ra kết quả sau:
Ví dụ này cho thấy cách tải dữ liệu lên bằng lệnh gọi ajax. Trong ví dụ này, chúng tôi đang sử dụng chỉ báo trên thanh tiến trình để hiển thị tiến trình trong khi tải tệp lên.