Thứ Năm, 24 tháng 12, 2015

Ajax 13

12/24/2015 10:01:00 SA    No comments
Untitled Document

Bài 13: Delay the keyup event for jquery ajax
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 17-09-2014 - Chuyên mục: PHP - View: 2348
Download Demo
Có thể nói ajax là một kỹ thuật được ứng dụng rất rộng rãi trong các ứng dụng web vì sự mượt mà của nó, nhất là kết hợp với các hiệu ứng jquery. Nhưng để xử lý tiến trình ajax thật sự rất mơ hồ với những bạn mới làm quen với ajax. Một ví dụ điển hình là xây dựng chức năng search cho sự kiện keyup event, nếu ta nhập dữ liệu liên tục thì nó sẽ gửi request liên tục lên server, điều này  không hay lắm, thay vào đó ta sẽ gửi một request cuối cùng (ký tự cuối cùng nhập vào sẽ gửi ajax). Vậy trong bài này ta sẽ tìm hiểu một kỹ thuật gọi là Delay the keyup event for jquery ajax. 
Trước khi vào vấn đề chính ta sẽ tạo một số file trong quá trình xử lý đã nhé.
Tạo file result.php: File này có nhiệm vụ là nhận nội dung cần tìm và trả về kết quả, nhưng để đơn giản không có sử dụng database thì tôi sẽ trả về kết quả của chuỗi nhận vào, nội dung như sau:


1
2
3

<?php
echo isset($_GET['title']) ? $_GET['title'] : '';
?>

Tạo file index.php: File này hiển thị input#title nhập dữ liệu tìm kiếm, một thẻ div#result dùng để hiển thị kết quả trả về, một đoạn mã script trong đó có sự kiện keyup. Và đương nhiên là không thể thiếu đoạn code import file jquery vào.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
    <head>
        <title>Delay the keyup event for jquery ajax</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="robots" content="noindex,nofollow"/>
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script language="javascript">
         
        $('#title').keyup(function()
        {
            // Nội dung search
        });
         
        </script>
    </head>
    <body>
        <a href="http://freetuts.net" title="Học lập trình online">Về trang chủ</a> <br/> <hr/>
        <input type="text" id="title" value=""/>
        <hr/>
        <div id="result"></div>
    </body>
</html>

Note: Nội dung trong bài có sử dụng ajax, nếu bạn chưa biết thì xem bài tìm hiểu ajax là gì.


1. Không sử dụng delay keyup event để gửi ajax

Cách này thì rất thông thường, ta chỉ cần bắt sự kiện keyup và lấy nội dung, sau đó gửi ajax.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$('#title').keyup(function()
{
    var data = {
        title : $('#title').val()
    };
    $.ajax({
        type : 'get',
        dataType : 'text',
        data : data,
        url : 'result.php',
        success : function (result){
            $('#result').html(result);
        }
    });
});

Nhược điểm của cách này là ajax sẽ gửi liên tục, mỗi khi nhập một ký tự vào nó sẽ gửi ajax nên sẽ tốn tài nguyên hệ thống và đôi khi hiển thị kết quả trả về lệch nhau do request trước trả kết quả về sau.  Với cách này tôi có viết một bài tương tự đó là bàiSearch Ajax Autocomplete.


2. Kỹ thuật Delay the keyup event for jquery ajax

Trước tiên bạn phải biết qua hàm setTimeout trong javascript dùng để thiết lập thời gian chạy một action nào đó và hàm clearTimeout dùng để bỏ đi sự kiện mà ta đã xử lý ở hàm setTimeout.
Ví dụ:


1
2
3
4
5
6
7
8
9
10

// Thiết lập trong thời gian 5 giây tới sẽ chạy đoạn code
// alert lên chuỗi 123
var timeout = setTimeout(function(){
    alert('123');
}, 5000);

 

// Clear đi đói tượng timeout, lúc này đoạn code
// alert sẽ không thực hiện được
clearTimeout(timeout);

Bây giờ ta sẽ ứng dụng 2 hàm này để thiết lập delay keyup event ajax:
Ý tưởng như sau, ở mỗi sự kienj keyup ta sẽ không gửi ajax liền mà ta sẽ dùng hàm setTimeout để thiết lập 1 giây sau mới gửi ajax tiếp, đồng thời trước khi thực hiện setTimeout thì ta sẽ dùng hàm clearTimeout để xóa đi những gì mà ta thiết lập trước đó. Như vậy khi ta gõ những ký tự gần nhau trong khoảng thời gian dưới 1 giây thì nó sẽ không gửi đi, chi khi nào ta dừng ko gõ thì 1 giây sau ajax sẽ được thực hiện. Đoạn code như sau:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// Delay the keyup event for jquery ajax
$(document).ready(function()
{
    // Khai báo đối tượng timeout để dùng cho hàm
    // clearTimeout
    var timeout = null;

    // Sự kiện keyup
    $('#title').keyup(function()
    {
        // Xóa đi những gì ta đã thiết lập ở sự kiện
        // keyup của ký tự trước (nếu có)
        clearTimeout(timeout);

        // Sau khi xóa thì thiết lập lại timeout
        timeout = setTimeout(function ()
        {
            // Lấy nội dung search
            var data = {
                title : $('#title').val()
            };

            // Gửi ajax search
            $.ajax({
                type : 'get',
                dataType : 'text',
                data : data,
                url : 'result.php',
                success : function (result){
                    $('#result').html(result);
                }
            });
        }, 1000);
    });
});

Qua phần comment tôi đã giải thích rõ rồi tôi không giải thích gì thêm, chú ý đoạn code jquery ajax rất quan trọng. Các bạn chỉ cần đọc code, xem demo và download về coi sẽ hiểu ra được vấn đề rất dễ dàng.
Và đây là hình hiển thị thành quả của chúng ta.
http://freetuts.net/upload/tut_post/images/2014/09/17/166/delay-the-keyup-event-for-jquery-ajax.png


3. Lời kết

Khi làm việc với ajax ta sử dụng những mẹo rất nhỏ để áp dụng vào thì tiến trình xử lý sẽ rất là mượt và đáp ứng được yêu cầu của hệ thống. Như ví dụ trên không phải là một thứ gì to tác mà chỉ là một kỹ thuật nho nhỏ với tên gọi Delay the keyup event for jquery ajax rất đơn giản mà hiệu quả.
Cũng còn có nhiều cách giải quyết vấn đề này nên nếu bạn có cách nào hay thì hãy chia sẻ cho mọi người nhé.

0 nhận xét:

Đăng nhận xét