jQuery Ajax

Ngày Đăng : 20/01/2017 - 3:05 PM

AJAX là từ viết tắt của Asynchronous JavaScript and XML và công nghệ này giúp chúng ta tải dữ liệu từ Server mà không cần Refresh trình duyệt.

Nếu bạn cảm thấy mới mẻ với AJAX, mình đề nghị bạn nên truy cập trang: Ajax Tutorialtrước khi theo dõi những gì được đề cập trong chương này.

jQuery là một công cụ tuyệt vời cung cấp một tập hợp các phương thức AJAX dồi dào để phát triển ứng dụng web.

Tải dữ liệu một cách đơn giản với jQuery

Nó là thực sự dễ dàng để tải bất kỳ dữ liệu tĩnh hoặc dữ liệu động bởi sử dụng jQuery AJAX. jQuery cung cấp phương thức load() để thực hiện công việc này:

Cú pháp

Sau đây là cú pháp đơn giản cho phương thức load() trong jQuery:

[selector].load( URL, [data], [callback] );

Miêu tả chi tiết về các tham số:

  • URL − URL của ngồn Server-Side để Yêu cầu (Request) được gửi tới. Nó có thể là CGI, ASP, JSP, hoặc PHP script mà tạo dữ liệu động hoặc ra khỏi database

  • data − tham số tùy ý này biểu diễn một đối tượng mà các thuộc tính của nó được xếp theo thứ tự vào trong các tham số được mã hóa một cách thích hợp để được truyền tới Yêu cầu (Request). Nếu được xác định, Request được tạo bởi sử dụng phương thức POST. Nếu bị bỏ qua, phương thức GET được sử dụng.

  • callback − Một hàm callback được gọi sau dữ liệu phản hồi đã được tải vào trong các phần tử của tập hợp đã kết nối. tham số đầu tiên được truyền tới hàm này là văn bản phản hồi từ Server và tham số thứ hai là mã hóa trạng thái.

Ví dụ

Bạn xem xét HTML file sau với một đoạn jQuery code nhỏ:

 

The jQuery Example type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ $('#stage').load('./result.html'); }); });

 

Click on the button to load result.html file −

id="stage" style="background-color:cc0;"> STAGE type="button" id="driver" value="Load Data" />

Ở đây, load() khởi tạo một AJAX request tới URL file đã xác định là ./result.html. Sau khi tải file này, tất cả nội dung sẽ được đưa đến vào trong phần tử

được tag với ID là stage. Giả sử, ./result.html file chỉ có một dòng HTML như sau:

 

 

THIS IS RESULT...

Khi bạn click vào nút đã cho, thì khi đó result.html được tải.

Nhận dữ liệu JSON trong jQuery

Có thể sẽ có một tình huống khi Server sẽ trả về chuỗi JSON cho yêu cầu của bạn. Hàm tiện ích jQuery getJSON() phân tích chuỗi JSON đã trả về và tạo chuỗi kết quả có sẵn cho hàm callback như là tham số đầu tiên để thực hiện các hành động khác xa hơn.

Cú pháp

Cú pháp của phương thức getJSON() trong jQuery là:

[selector].getJSON( URL, [data], [callback] );

Dưới đây là miêu tả chi tiết về các tham số:

  • URL − URL của nguồn Server-Side được kết nối thông qua phương thức GET.

  • data − Một đối tượng mà các thuộc tính của nó cung cấp cặp name/value được sử dụng để xây dựng một chuỗi truy vấn để được nối kết với URL, hoặc một chuỗi truy vấn được định dạng và được mã hóa trước.

  • callback − Một hàm được gọi khi Request hoàn thành. Giá trị dữ liệu kết quả từ phân tích thân phải hồi như là một chuỗi jQuery được truyền như là tham số đầu tiên tới callback này, và trạng thái là thứ hai.

Ví dụ

Bạn xem xét HTML file sau với một đoạn jQuery code nhỏ:

 

The jQuery Example type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ $.getJSON('../result.json', function(jd) { $('#stage').html('

Name: ' + jd.name + '

'); $('#stage').append('

Age : ' + jd.age+ '

'
); $('#stage').append('

Sex: ' + jd.sex+ '

'
); }); }); });

 

Click on the button to load result.json file −

id="stage" style="background-color:#eee;"> STAGE type="button" id="driver" value="Load Data" />

Ở đây, phương thức tiện ích getJSON() trong jQuery khởi tạo một AJAX Request tới URL file đã xác định là result.json. Sau khi tải file này, tất cả nội dung sẽ được truyền tới hàm callback mà cuối cùng sẽ được đưa đến bên trong phần tử

được tag với ID là stage. Giả sử, result.json có nội dung json được định dạng là:

 

{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}

Khi bạn click vào nút đã cho, thì khi đó result.json được tải.

Truyền dữ liệu tới Server trong jQuery

Nhiều khi bạn thu thập input từ người sử dụng và bạn truyền những input này tới Server để tiến hành xử lý sâu hơn. jQuery AJAX làm nó đủ dễ dàng để truyền các dữ liệu đã thu thập tới Server bởi sử dụng tham số data của bất kỳ phương thức Ajax có sẵn nào.

Ví dụ

Ví dụ này minh họa cách truyền input từ người dùng tới một WebServer mà sẽ gửi kết quả trở lại và chúng ta sẽ in nó ra:

 
The jQuery Example type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} ); }); });
 

Enter your name and click on the button:

type="input" id="name" size="40" /> /> id="stage" style="background-color:cc0;"> STAGE
type="button" id="driver" value="Show Result" />

Còn đây là code được viết trong result.php script:;

php
if( $_REQUEST["name"] )
{
   $name = $_REQUEST['name'];
   echo "Welcome ". $name;
}
?> 

Bây giờ, bạn có thể nhập bất kỳ text nào vào trong hộp input đã cho và sau đó nhấn nút Show Result để xem những gì bạn đã nhập trong Input box.

Các phương thức jQuery AJAX

Bạn đã thấy khái niệm của AJAX sử dụng jQuery. Bảng sau liệt kê tất cả phương thức jQuery AJAX mà bạn có thể sử dụng tùy theo yêu cầu của bạn:

STT Phương thức & Miêu tả
1 jQuery.ajax( options )

Tải một trang từ xa bởi sử dụng một HTTP Request

2 jQuery.ajaxSetup( options )

Setup các thiết lập global cho AJAX Request

3 jQuery.get( url, [data], [callback], [type] )

Tải một trang từ xa bởi sử dụng một HTTP GET Request

4 jQuery.getJSON( url, [data], [callback] )

Tải dữ liệu JSON bởi sử dụng một HTTP GET Request

5 jQuery.getScript( url, [callback] )

Tải và thực thi một JavaScript file bởi sử dụng một HTTP GET request.

6 jQuery.post( url, [data], [callback], [type] )

Tải một trang từ xa bởi sử dụng một HTTP POST request.

7 load( url, [data], [callback] )

Tải HTML từ một file từ xa và inject nó vào trong DOM.

8 serialize( )

Sắp xếp theo thứ tự một tập hợp các phần tử input vào trong một chuỗi dữ liệu

9 serializeArray( )

Xếp theo thứ tự tất cả Form và phần tử Form như phương thức .serialize() nhưng trả về một cấu trúc dữ liệu JSON để bạn làm việc với nó.

Các sự kiện jQuery AJAX

Bạn có thể gọi nhiều phương thức jQuery đa dạng trong suốt vòng đời của tiến trình gọi AJAX. Dựa trên cơ sở các Event/Stage khác nhau, các phương thức sau là có sẵn:

Nguồn: http://vietjack.com/

Tin mới

jQuery Ajax

AJAX là từ viết tắt của Asynchronous JavaScript and XML và công nghệ này giúp chúng ta tải dữ liệu từ Server mà không cần Refresh trình duyệt.

>> Xem thêm >>

Hướng dẫn validate form sử dụng jQuery validate

Hướng dẫn validate form sử dụng jQuery validate

>> Xem thêm >>

Sử dụng Event trong Laravel

Trong bài này mình sẽ giới thiệu event, cách tạo event và bắt event trong Laravel. Không chỉ có Laravel mà ngay cả Zend, Phalcon đều có khái niệm này nên bạn có thể thấy tầm quan trọng của nó rồi đấy.

>> Xem thêm >>

Sử dụng Route::controller và Route::resource trong laravel

Sử dụng Route::controller và Route::resource trong laravel

>> Xem thêm >>

Tối ưu hóa câu truy vấn trên hệ quản trị MySQL

Khi nói đến những dự án lớn thì một trong những vấn đề được các coder quan tâm hàng đầu đó là hiệu suất của dự án. Một site nhỏ với qui mô vài trăm user, dung lượng database chưa đáng kể thì thời gian truy vấn, tải trang chưa phải là vấn đề bạn cần quan tâm. Nhưng theo thời gian site phát triển với tốc độ chóng mặt, chẳng mấy chốc đã có tới hàng triệu users tham gia, tỉ lệ thuận với nó là bảng users có hàng triệu records, database phình to, dung lượng có thể lên đến hàng chục gigabyte thậm chí hàng trăm gigabyte… Lúc này, thì một vấn đề lớn đặt ra cho các coder chúng ta là làm sao để website với 1 database to như vậy vẫn chạy mượt mà như là database nhỏ!? Ngoài những vấn đề về đầu tư với server cấu hình cao, database server riêng rẽ, chuẩn hóa code thì yếu tố tối ưu truy vấn MySQL với một database lớn là một cách giải quyết.

>> Xem thêm >>

Mảng trong PHP và các hàm xử lý mảng

Trong PHP hỗ trợ một kiểu dữ liệu là dữ liệu kiểu mảng, còn gọi là ARRAY. Mảng là một biến danh sách. Nghĩa là biến thuộc mảng được tạo bởi một hoặc nhiều số hoặc kí tự, cho phép chúng ta lưu trữ, sắp xếp, truy cập các giá trị. Chú ý là mảng trong PHP phần tử bắt đầu luôn là phần tử thứ 0.

>> Xem thêm >>

Tin Tức khác

Giám khảo Bolero muốn mượn roi đánh cháu ruột ngay trên sân khấu

Ca sĩ Thái Châu, Giám khảo cuộc thi Tình Bolero, ngỏ ý muốn mượn cây roi để đánh ca sĩ Hà My, thí sinh cũng là cháu ruột, vì có tài mà không biết cố gắng, ăn chơi trác táng.

>> Xem thêm >>

Tài xế ôtô tức giận chặn đường xe máy vì vượt đèn đỏ bất thành

Tài xế Kia Sportage đang vượt đèn đỏ thì phải đánh lái tránh một xe máy cũng vượt đèn đỏ. Ôtô liên tục cài số tiến và lùi chặn không cho xe máy đi.

>> Xem thêm >>

Phạt tù kẻ quay cảnh ái ân với bé gái trong nhà nghỉ

Dụ bé gái 13 tuổi vào nhà nghỉ để "làm chuyện người lớn", Tuấn đã dùng điện thoại để quay lại cảnh ân ái giữa 2 người.

>> Xem thêm >>

Phá hơn 3.300 vụ phạm pháp hình sự trong tháng Tết

Theo Bộ Công an, phạm pháp hình sự trong tháng 2 được kiềm chế, an ninh trật tự dịp tết Nguyên đán Đinh Dậu đảm bảo tốt hơn năm trước.

>> Xem thêm >>

Trung Quốc sắp xây xong kho chứa tên lửa trên Biển Đông

Hai quan chức Mỹ cho biết Trung Quốc đang hoàn thành gần 20 công trình trên các đảo nhân tạo phi pháp ở Biển Đông được thiết kế để chứa tên lửa đất đối không.

>> Xem thêm >>

Malaysia: Nghi phạm vụ Kim Jong Nam làm tại ĐSQ Triều Tiên

Trong cuộc họp báo sáng 22/2, cảnh sát trưởng Malaysia thông báo thêm hai nghi phạm người Triều Tiên nữa trong vụ Kim Jong Nam. Cả hai người này đều đang ở Malaysia.

>> Xem thêm >>

Hướng dẫn validate form sử dụng jQuery validate

Hướng dẫn validate form sử dụng jQuery validate

>> Xem thêm >>

Sử dụng Event trong Laravel

Trong bài này mình sẽ giới thiệu event, cách tạo event và bắt event trong Laravel. Không chỉ có Laravel mà ngay cả Zend, Phalcon đều có khái niệm này nên bạn có thể thấy tầm quan trọng của nó rồi đấy.

>> Xem thêm >>

Sử dụng Route::controller và Route::resource trong laravel

Sử dụng Route::controller và Route::resource trong laravel

>> Xem thêm >>

Tối ưu hóa câu truy vấn trên hệ quản trị MySQL

Khi nói đến những dự án lớn thì một trong những vấn đề được các coder quan tâm hàng đầu đó là hiệu suất của dự án. Một site nhỏ với qui mô vài trăm user, dung lượng database chưa đáng kể thì thời gian truy vấn, tải trang chưa..

>> Xem thêm >>
^