Sunday, December 15, 2013
Trong
quá trình làm việc với ASP.NET và JQUERY, tôi phát hiện ra rằng có 5
chức năng khác nhau có thể được dùng để gọi Ajax đến một trang khác và
lấy dữ liệu từ trang đó. Tôi sẽ trình bày từng chức năng một.
Sau đây là danh sách các chức năng có sẵn trong thư viện JQuery để thực hiện cuộc gọi Ajax:
- Load
- getJson
- GET
- POST
- Ajax
Load:
Phương thức gọi Ajax đến trang và hỗ trợ gửi sử dụng phương thức khác là Get hoặc Post.
var
loadUrl = "TestPage.htm";$(document).ready(function ()
{$("#load_basic").click(function ()
{$("#result").html(ajax_load).load(loadUrl, function (response, status,
xhr) {if (status == "error") {var msg = "Sorry but there was an error:
";$("#dvError").html(msg + xhr.status + " " + xhr.statusText);}});return
false;});
Như
bạn có thể nhìn thấy trong đoạn mã trên, bạn có thể dễ dàng thực hiện
gọi đến bất kỳ trang nào bằng cách di chuyển qua nó một Url cố định.
Chức năng Call Back cung cấp Control nhiều hơn và cho phép xử lý lỗi
bất kỳ bằng cách sử dụng giá trị trạng thái.
Một
trong những điều quan trọng về phương pháp tải là nó cho phép tải một
phần của một trang chứ không phải là toàn bộ trang. Vì vậy, để thu hồi
một phần duy nhất của trang, cuộc gọi vẫn giữ nguyên nhưng url là:
var loadUrl = "TestPage.htm # dvContainer";
Vì
vậy, bằng việc thông qua địa chỉ trên phương thức tải nó chỉ tải các
nội dung của thẻ div có id=dvContainer. Kiểm tra đoạn code sau:
Firebug cho thấy response được trả lại khi chúng ta gọi trang theo phương thức tải.
Tính năng quan trọng:
- Cho phép thực hiện gọi với cả hai Request Get và Post
- Cho phép tải các phần của trang.
getJSON
Một
phương thức cho phép thu hồi các dữ liệu JSON bằng cách thực hiện gọi
Ajax đến trang. Phương thức này chỉ cho phép di chuyển các tham số bằng
cách sử dụng phương thức được đăng tải tham số là không được phép. Một
điều nữa là phương thức này cung cấp phản ứng bằng cách sử dụng định
dạng JSON.
var
jsonUrl = "Json.htm";$("#btnJson").click(function ()
{$("#dvJson").html(ajax_load);$.getJSON(jsonUrl, function (json) {var
result = json.name;$("#dvJson").html(result);});return false;});
Đoạn
mã trên làm cho việc sử dụng các chức năng getJSON và hiển thị dữ liệu
json lấy từ trang. Sau đây là dữ liệu json trả về bởi các tập tin
Json.htm.
{"name": "Hemang Vyas","age" : "32","sex": "Male"}
Bên dưới là hình ảnh hiển thị dữ liệu json được trả về như response:
Tình năng quan trọng:
- Chỉ gửi dữ liệu sử dụng phương thức Get; không chấp nhận phương thức Post.
- Trả lại Response data.
Get
Cho
phép chấp nhận gửi một yêu cầu Ajax với phương thức Get. Xử lý các phản
ứng trong nhiều định dạng bao gồm xml, html, Text, script, json, và
jonsp.
var
getUrl = "GETAndPostRequest.aspx";$("#btnGet").click(functi on ()
{$("#dvGet").html(ajax_load);$.get(getUrl, { Name: "Pranay" }, function
(result) {$("#dvGet").html(result);});return false;});
Trong
mã tôi di chuyển qua các tham số Name và các trang bằng cách sử dụng
yêu cầu có được. Về phía server, bạn có thể nhận được giá trị của tham
số Name trong một đối tượng request querycollection.
if (Request.QueryString["Name"]!=null){txtName.Text = Request.QueryString["Name"].ToString();}
Firebug cho thấy các tham số thông qua yêu cầu Get và giá trị của tham số này pranay.
Tính năng quan trọng:
- Có thẻ xử lý bất kỳ loại dữ liệu Response.
- Gửi dữ liệu bằng cách sử dụng phương thức duy nhất là get
Post
Cho
phép thực hiện một yêu cầu Ajax với phương thức post. Xử lý các phản
ứng trong nhiều định dạng bao gồm xml, html, Text, script, json, và
jonsp. (Post) giống như nhận được nhưng chỉ gửi dữ liệu bằng cách sử
dụng các phương thức Post.
var
postUrl = "GETAndPostRequest.aspx";$("#btnPost").click(funct ion ()
{$("#dvPost").html(ajax_load);$.post(postUrl, { Name: "Hanika" },
function (result) {$("#dvPost").html(result);});return false;});
Trong mã tôi di chuyển qua các tham số Name và các trang bằng cách sử dụng Request Post.
Về phía server, bạn có thể nhận được giá trị của tham số Name trong đối tượng response formcollection.
if (Request.Form["Name"] != null){ txtName.Text = Request.Form["Name"].ToString();} Firebug cho thấy các tham số thông qua yêu cầu Get và giá trị của tham số này là Hanika.
Tính năng quan trọng:
- Có thể xử lý bất lỳ loại dữ liệu.
- Gửi dữ liệu bằng cách sử dụng phương thức duy nhất là Post
Ajax
Cho
phép thực hiện cuộc gọi Ajax. Phương thức này cung cấp kiểm soát nhiều
hơn tất cả các phương thức khác mà chúng ta đã thấy. Bạn có thể tìm ra
sự khác biệt bằng cách kiểm tra danh sách các tham số.
var
ajaxUrl = "Json.htm";$("#btnAjax").click(function ()
{$("#dvAjax").html(ajax_load);$.ajax({type: "GET", //GET or POST or PUT
or DELETE verburl: ajaxUrl, // Location of the servicedata: "", //Data
sent to servercontentType: "", // content type sent to serverdataType:
"json", //Expected data format from serverprocessdata: true, //True or
Falsesuccess: function (json) {//On Successfull service callvar result =
json.name;$("#dvAjax").html(result);},error: ServiceFailed// When
Service call fails});return false;});
Trong đoạn mã trên, bạn có thể nhìn thấy tất cả các thông số và chú thích dành cho mỗi tham số bằng việc mô tả mục đích.
Firebug
hiển thị trang trở lại gọi dữ liệu json và chức năng Ajax xử lý các
respose như JSON bởi vì trong mã kiểu dữ liệu = json.
Tính năng quan trọng:
- Cung cấp kiểm soát nhiều hơn việc gửi dữ liệu và yêu cầu dữ liệu.
- Cho phép xử lý lỗi xảy ra trong suốt quá trình call.
- Cho phép xử lý dữ liệu nếu gọi đến trang thành công
Tóm tắt:
Mỗi phương thức của Jquery là khác nhau. Vì vậy, việc sử dụng cho từng mục đích cũng khác nhau.
Nguồn bài viết:
Dngaz.com
0 Comments:
Subscribe to:
Post Comments (Atom)