Người Viết : ViKiMi Editor
Hướng dẫn sử dụng jQuery AJAX phương thức $.ajax() một cách tốt nhất, hiệu quả nhất
Thực thi jQuery AJAX giúp Website hoạt động với khả năng mở rộng tốt hơn, cho phép có nhiều lưa chọn để tạo ra các chức năng theo yêu cầu. Phương thức $.ajax() được cung cấp bởi jQuery Ajax và phương thức này có khả năng giúp bạn thực thi các chức năng một cách linh động. Điều này cho chúng ta thêm nhiều phương án trong thiết kế Website.
CÚ PHÁP của phương thức $.ajax()
$.ajax({name:value, name:value, … })
1 ) Tham số được sử dụng :
+ Đó là một hoặc nhiều cặp name / value cho yêu cầu AJAX. Cách sử dụng tham số của phương thức $.ajax() sẽ trình bày tại các Ví Dụ.
* Phương thức $.ajax() cho phép thực thi một yêu cầu AJAX (HTTP không đồng bộ). Điều này cho phép Website luôn hoạt động ngay cả khi xảy ra những lỗi trong quá trình xử lý. Nhờ vậy, Website không bị ngưng hoạt động hoàn toàn khi có lỗi xảy.
* Tất cả các phương thức của jQuery AJAX đều sử dụng phương thức $.ajax(); Phương thức này được chọn cho các yêu cầu xử lý khi mà những phương thức khác không sử dụng được.
Đó chính là điểm mạnh của phương thức $.ajax() và thông thường Nhà phát triển Website sẽ chọn + sử dụng phương thức này. Vì tính chất thực thi được mọi yêu cầu xử lý.
2 ) Những Tham Số (name / value) Thường Được Sử Dụng :
2.1 )
Name : async
Value : Giá Trị được sử dụng là true hoặc false. Cho biết có yêu cầu có được xử lý bất đồng bộ hay không? Mặc định sẽ là true, có nghĩa là xử lý bất đồng bộ. Tất cả sẽ đều chọn xử lý bất đồng bộ, chỉ có những Example thì có thể lựa chọn xử lý đồng bộ.
2.2 )
Name : datatype
Value : kiểu dữ liệu sẽ phản hồi từ máy chủ
2.3 )
Name : error(xhr,status,error)
Value : Một Function sẽ thực thi khi yêu cầu xử lý thất bại
2.4 )
Name : success(result,status,xhr)
Value : Một Function sẽ thực thi khi yêu cầu xử lý thành công
2.5 )
Name : url
Value : Chỉ định URL để gửi yêu cầu đi. Mặc định là trang hiện tại
2.6 )
Name : xhr
Value : Một Function sử dụng để tạo đối tượng XMLHttpRequest
2.7 )
Name : type
Value : Giá trị chỉ định kiểu yêu cầu dữ liệu (GET hoặc POST)
2.8 )
Name : username
Value : Tên của người dùng sẽ được sử dụng trong yêu cầu xác thực quyền truy cập
2.9 )
Name : password
Value : Mật khẩu sẽ được sử dụng trong yêu cầu xác thực quyền truy cập
2.10 )
Name : processData
Value : Giá trị Boolean chỉ định có hay không việc dữ liệu gửi đi với yêu cầu được chuyển thành chuỗi truy vấn. Mặc định là True ( Có ).
2.11 )
Name : data
Value : Chỉ định dữ liệu sẽ gửi tới Máy Chủ / Server để xử lý
2.12 )
Name : context
Value : Chỉ định giá trị “this” cho tất cả Callback Function liên quan đến AJAX
2.13 )
Name : complete(xhr,status)
Value : Một Function sẽ chạy khi yêu cầu hoàn thành ( Nó Thực thi sau Function success và error)
2.14 )
Name : beforeSend(xhr)
Value : Một Function sẽ thực thi trước khi Yêu Cầu / Request được gửi đi
2.15 )
Name : jsonp
Value : Chuỗi ghi đè Callback Function trong yêu cầu jsonp
2.16 )
Name : jsonpCallback
Value : Chỉ định tên cho Callback Function trong yêu cầu jsonp
Trên đây là những tham số (name : value) thông thường được sử dụng. Nó khá là đơn giản và dễ dùng. Vì nó tương tự như khi bạn sử dụng AJAX với Javascript. Nhưng khi bạn sử dụng jQuery AJAX thì rõ ràng khả năng làm việc đem lại khiến bạn hài lòng. Tất cả thật đơn giản và dễ dàng. 3 ) EXAMPLE
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ async: false, type : "post", url: "myfile.txt", data : {mydata_1: "one", mydata_2 : "two"}, /* Minh Hoạ Dữ Liệu Gửi Theo Request */ success: function(result){ $("#div1").html(result); }, error: function(xhr){ $("#div1").html("An error occured: " + xhr.status + " " + xhr.statusText); }, complete: function(xhr,status){ $("#div2").html("Complete "+ status); } }); }); }); </script> </head> <body> <p> Your Contents </p> <div id="div1"></div> <div id="div2"></div> <button> Get info </button> </body>
Trên đây là một Ví Dụ cơ bản nhất về Đọc Dữ Liệu tại File myfile.txt tại máy chủ / Server. Cho phép bạn đọc dữ liệu tương tự các ví dụ trước đây. Tuy nhiên, khác biệt là bạn sử dụng với phương thức $.ajax() mang lại nhiều hiệu quả hơn, thân thiện hơn, dễ dàng hơn và đồng thời trong ví dụ này có minh hoạ cách xử lý gửi data tới Máy Chủ / Server. Sẽ trình bày rõ ràng trong các Ví Dụ tiếp theo.
