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.