Jquery Ajax Asp.net Part III

Web Services đã có một chặng đường phát triển khá dài, từ lúc bắt đầu phát triển, XML được chọn là định dạng dữ liệu giao tiếp mặc định cho môi trường này, tuy nhiên với nhiều phức tạp trong cấu trúc và thiếu các tiêu chuẩn mở rộng, XML đã dần đi đến giai đoạn thoái trào, giờ đây người lập trình cảm thấy XML làm dữ liệu của họ trở nên cồng kềnh và chiếm nhiều băng thông không cần thiết.
Trong lập trình Ajax, JSON có hiệu quả vượt trội hơn hẳn XML, giữ lại được những lợi thế cạnh tranh của XML như tính dễ đọc, dễ viết, dễ dàng chuyển đổi …, bản thân JSON là ngôn ngữ vay mượn từ khá nhiều ngôn ngữ khác như C#, Java, Python, Js … điều đó làm nó trở nên thân thiện và quen thuộc hơn đối với phần lớn lập trình viên.

Phát triển theo xu hướng này, dữ liệu lưu chuyển được định nghĩa mặc định cho ASP.NET 3.5 WebService là JSON.

Phần 2: Ajax với jQUery và ASP.NET WebServices
2.1 Tương tác ASP.NET WebService với jQuery
2.1.1 Gửi một request đến Services
jQuery.ajax() là một cài đặt AJAX được cài đặt ở mức thấp, được sử dụng để khởi tạo một request HTTPRequest, có thể tham khảo các cài đặt trừu tượng mức cao hơn (high-level) như $.get, $.post, dễ hiểu và dễ dùng hơn so với jQuery.ajax(), tuy nhiên, nó không có nhiều các phương thức hữu dụng, ví như “error callbacks” – được sử dụng để chỉ ra hàm sẽ “handler” khi xẩy ra lỗi trong quá trình request, được cài đặt trong jQuery.ajax() nhưng không có trong $.get hay $.post. Phương thức $.ajax() khởi tạo và trả về một đối tượng XMLHttpRequest. Trong hầu hết các trường hợp thì ta không cần thao tác trực tiếp đến đối tượng này. Phương thức này nhận vào các tham số là mỗi cặp key/value, được sử dụng để khởi tạo và điều khiển request.

Để hiểu rõ hơn, ta tiếp cận một ví dụ đơn giản, code bên dưới miêu tả một Service với một WebMethod HelloWorld() trả về chuỗi “HelloWorld” khi được gọi đến, hàm này không chứa tham số.

Lưu ý rằng, cần gán cho Service attribute ScriptService để nó có thể tương tác với JavaScript Client.

[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class SampleService : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return “Hello World”;
}
}
Ở client, để tiếp cận WebMethod trên ta “thiết kế” một phương thức như sau :

$(function() {
$(‘#btnCallAjax’).click(function() {
$.ajax({
type: “POST”,
url: “../SampleService.asmx/HelloWorld”,
data: “{}”,
dataType: “json”,
contentType: “application/json; charset=utf-8”,
success: onSuccess,
error: onFail
})
})
})

function onSuccess(result) {
alert(result.d);
}
function onFail(result) {
alert(result.d);
}

Sử dụng Add-on FireBug để xem kết quả trả về trong Response :

Jquery
Cần lưu ý rằng, khi thao tác Ajax với ASP.NET WebService, phương thức truyền dữ liệu luôn là POST, vì tính bảo mật, ASP.NET WebService từ chối các request với phương thức GET, nếu bạn thiết lập một request với phương thức GET sẽ nhận được một lỗi, kết quả trả về trong responseText là đoạn mã HTML báo lỗi của trang ASP.NET.

Đoạn mã trên mô tả một cài đặt $.ajax với khá nhiều các tuỳ chọn, như type định nghĩa phương thức truyền dữ liệu, url định nghĩa đường dẫn phía server … Các tuỳ chọn này sẽ được mô tả kỹ hơn ngay sau đây. Option data trong cài đặt trên được gán là “{}“, được hiểu là dùng để gọi một webmethod không có tham số, để gọi các WebMethod có tham số, thì các tham số này sẽ được đưa vào option data này, chi tiết sẽ được mô tả ở mục sau.

2.1.2 Gửi tham số đến các WebMethod có tham số
Trong cài đặt $.ajax(), option data được sử dụng để truyền các tham số cho phương thức ở WebService, data là một chuỗi định dạng JSON chứa các tham số đó. Khi không cần truyền bất cứ tham số nào thì gán giá trị cho data là “{}”, lưu ý rằng request sẽ gặp lỗi khi cố tình gán giá trị null hay undefined cho data.
Để gửi các tham số tới WebService, ở Client ta cần tạo đối tượng với các thuộc tính có tên trùng với các tham số của WebMethod ở Service, chẳng hạn, với WebMethod :

[WebMethod]
public static void PostMessage
(DateTime timestamp, string author, string message)
{

}

Cấu tạo của đối tượng chứa tham số cần gửi cho WebMethod trên có dạng như sau :

var message = {
timestamp: new Date(),
author: “Chris”,
message: “Tag! You’re it.”
};

Đối tượng này sẽ được serialize về định dạng JSON bằng phương thức JSON.stringify(object) và sau đó được gửi bởi option data của cài đặt $.ajax(). Luôn nhớ rằng, tên các thuộc tính trong object đó phải trùng với tên các tham số trong WebMethod, tuy nhiên, không nhất thiết phải sắp xếp theo đúng thứ tự.

$.ajax({
type: “POST”,
url: “Sample.asmx/PostMessage”,
data: JSON.stringify(message),
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function() {
alert(“Message posted”);
}
});

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

3 Responses to Jquery Ajax Asp.net Part III

  1. L nói:

    ở ví dụ truyền tham số, mình làm giống hướng dẫn của bạn. Nhưng chỗ data: JSON.Stringify thì sao ko thấy có sẵn trong vsdoc.js (inteligense). Nếu để như vậy chạy, khai bao thêm error: function() { alert(‘lỗi’); } thì sẽ hiện lên lỗi, tức là câu lệnh $.ajax() ko success

  2. Bùi Hữu Linh nói:

    Cám ơn bạn

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: