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

Ajax 7

12/24/2015 09:15:00 SA    No comments
Untitled Document

Bài 07: Sử dụng Ajax lấy danh sách thành viên kết quả trả về dạng XML

  0  


 Google +0  

   0
Đăng bởi: TheHalfHeart - Vào ngày: 10-08-2014 - Chuyên mục: PHP - View: 2980
Download Demo
Đây là bài cuối cùng tôi đề cập đến vấn đề định dạng kiểu dữ liệu trả về khi gọi ajax và bài này tôi sẽ nói về XML. Trước khi vào bài này bạn quay lại bài "Sử dung ajax lấy danh sách thành viên kết quả trả về dạng text" để tạo database vì trong bài này chúng ta sử dụng dữ liệu đó.
Nhưng trước khi tìm hiểu về kỹ thuật Ajax thì chúng ta cùng tìm hiểu khái niệm sơ lược về XML đã nhé.

1. Giới thiệu sơ lược về XML

XML là viết tắt của chữ "Extensible Markup Language" có nghĩa là ngôn ngữ đánh dấu mở rộng. Với XML thì chúng ta có thể tự định nghĩa những thẻ bất kì theo ý của mình, mỗi thẻ sẽ có một thẻ mở <tenthe> thẻ đóng </tenthe> và những thuộc tính nằm bên trong thẻ mở. Bản thân HTML cũng là một dạng XML vì nó có các thẻ mở và thẻ đóng và mỗi thẻ có những thuộc tính riêng như href, src, ...
Khi khai báo một file là XML thì bắt buộc phải có phần header khai báo, nội dung header đó là "<?xml version="1.0" encoding="UTF-8"?>" nên các bạn cần lưu ý thêm đoạn code này nằm trên phía trên cùng của kết quả. 

2. Tạo trang hiển thị danh sách thành viên.

Bạn tạo một file index.php với nội dung 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    </head>
    <body>
        <div id="result1">TEXT</div>
        <div id="result2">JSON</div>
        <div id="result3">XML</div>
        <br/>
        <input type="button" name="clickme" id="text-click" value="Get List By Text"/>
        <input type="button" name="clickme" id="json-click" value="Get List By Json"/>
        <input type="button" name="clickme" id="xml-click" value="Get List By XML"/>
        <script language="javascript">
            $('#xml-click').click(function()
            {
                $.ajax({
                    url : 'xml.php',
                    type : 'get',
                    dataType : 'xml',
                    success : function (result)
                    {
                        // HTML lúc đầu
                        var html = '';
                        html += '<table border="1" cellspacing="0" cellpadding="10">';
                        html += '<tr>';
                           html += '<td>';
                                html += 'Username';
                                html += '</td>';
                                html += '<td>';
                                html += 'Email';
                           html += '</td>';
                        html += '<tr>';
                         
                        // Lặp để lấy data
                        $(result).find('items').each (function (key, val){
                             html +=  '<tr>';
                                html +=  '<td>';
                                    html +=  $(val).find('username').text();
                                html +=  '</td>';
                                html +=  '<td>';
                                    html +=  $(val).find('email').text();
                                html +=  '</td>';
                            html +=  '<tr>';
                        });
                         
                        html +=  '</table>';
                         
                        $('#result3').html(html);
                    }
                });
            });   
        </script>
         
    </body>
</html>

Mọi thứ có vẻ khó dần rồi nhỉ, trong đoạn code xử lý ajax ở phần success các bạn cần chú ý các dòng sau:

  • $(result).find('items').each (function (key, val) : lặp qua từng thẻ items từ kết quả trả về và mỗi vòng lặp sẽ gán kết quả vào val, hàm này khá giống với vòng lặp foreach trong php.
  • $(val).find('username').text() Vì biến val lúc này là item của mỗi vòng lặp nên ta sử dụng hàmfind('username') để tìm username. 
  • $(val).find('email').text() Tương tự chúng ta tìm email.

Rất đơn giản phải không nào? Nếu bạn thắc mắc items là gì thì bạn xem file dưới đây sẽ rõ.

3. Tạo trang lấy danh sách thành viên và trả về định dạng xml

Bạn tạo file xml.phpvới nội dung như sau:


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

<?php
// Connect Database
$conn = mysqli_connect('localhost', 'root', 'vertrigo', 'test') or die ('Can not connect to mysql');

// Get List Member
$query = mysqli_query($conn, 'select * from member');

echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<root>';
if (mysqli_num_rows($query) > 0)
{
    while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
        echo '<items>';
            echo '<username>'.$row['username'].'</username>';
            echo '<email>'.$row['email'].'</email>';
        echo '</items>';
    }
}
echo '</root>';

?>

Trong file này bạn cần chú ý tôi có echo ra một dòng echo '<?xml version="1.0" encoding="UTF-8"?>' là dùng để khai báo đây là định dạng XML. Còn bên trong vòng lặp thì rất đơn giản, tôi lặp và tạo ra từng thẻ items, và mỗi thẻ items tôi lại tạo ra 2 thẻ username và email. Đây chính là tên key mà bên file xử lý ajax dùng để lấy giá trị tương ứng.
Bạn chạy file index.php lên và click vào button XML thì trình duyệt sẽ hiển thị như hình dưới đây:
http://freetuts.net/upload/tut_post/images/2014/08/10/98/ajax-hien-thi-danh-sach-thanh-vien-dang-xml.png

4. Lời kết

Vậy là bạn đã học được ba định dạng mà thông thường Ajax sử dụng để lấy kết quả trả về, tương ứng với mỗi định dạng thì phía PHP phải có những cách sử lý sao cho trùng khớp với định dạng đó thì chương trình mới không bị lỗi.
Định dang XML hiện nay rất khi khi sử dụng mà người ta sử dụng JSON hoặc TEXT vì sẽ nhanh hơn nên bạn cần lưu ý điểm này nhé.

0 nhận xét:

Đăng nhận xét