Vì vậy, AJAX AJAX và AJAX, đó là những gì chúng ta làm rộng rãi những ngày này. Nó tiết kiệm thời gian, thêm động lực và cung cấp cho bạn một cảm giác bằng cách sử dụng một loại phần mềm ứng dụng của cảm giác. Có rất nhiều cách để sử dụng AJAX với nhiều thư viện. Nhưng như bạn có thể xem trang web này là dành cho jQuery, chúng ta sẽ xem xét cơ bản hoặc có lẽ một số tập quán AJAX tiên tiến.
Những gì chúng ta cần?
thư viện jQuery (tất nhiên)
Một kịch bản php nhỏ
Chúng ta hãy bắt đầu nói. Trong jQuery, có 6 loại cơ bản của phương pháp để làm các hoạt động AJAX. Đây là những
- $ Ajax (tùy chọn).
- $ (Url, dữ liệu, gọi lại)
- $ GetJSON (url, dữ liệu, gọi lại).
- $ GetScript (url, callback).
- load (url, dữ liệu, gọi lại)
- $ Post (url, dữ liệu, gọi lại,
Ngoài số 1, tất cả các phương pháp khác sử dụng $ ajax trong nội bộ. Vì vậy, điều đó có nghĩa là $. Ajax () là chức năng của chúng tôi mẹ cho các hoạt động AJAX jQuery. Hãy nhìn vào như thế nào $. Ajax () trông giống như
$. Ajax ({ , loại: "POST", , url: some.php ", , dữ liệu: "name = Peter & vị trí = NY", ( msg ) { thành công: chức năng (msg) { "Server Response " + msg ) ; alert ("Server Response" + msg); } });
Đó là khá nó. Tham số kiểu có "GET" hoặc "POST" có nghĩa là bạn có thể gửi requestion AJAX là POST hoặc GET (tôi thích POST luôn). Phần còn lại của các thông số khá tự giải thích nếu bạn có một cái nhìn vào mã một lần nữa.
Bây giờ chúng ta sẽ làm cho một kịch bản AJAX nhỏ mà đọc liên kết của các thẻ siêu liên kết (<a>) và tải các yêu cầu trên một số yếu tố div trong tài liệu.
Trước tiên chúng ta có một html bình thường của tài liệu php sẽ trông như thế này
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head> <title> Ajax liên kết thử nghiệm </ title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" <script type="text/javascript" src="jquery-1.2.6.min.js"> </ script> </ Head> <body> </ Body> </ html>
Bây giờ chúng ta hãy thêm một số liên kết để tài liệu. Đối với một loại menu của cái nhìn tốt hơn, chúng tôi sẽ sử dụng UL> LI và liên kết. Điều đó sẽ như thế này
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> tải trong Div 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> tải ở Div 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> tải trong Div 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> tải trong Div 4 </ a> </ li> </ Ul>
Như bạn có thể thấy chúng tôi đã đặt các liên kết trong danh sách các yếu tố bên trong một đối tượng danh sách có thứ tự. Hãy xem xét kỹ hơn tại các thuộc tính của tag <a>. Chúng tôi có href, lớp học và thuộc tính rel trông không có gì khác so với một liên kết bình thường. Nếu bạn thấy, chúng tôi đã đưa ra những thuộc tính rel một số tên div, là div1, div2 .. như vậy. Điều này có nghĩa là chúng tôi muốn phản ứng của href được nạp vào những divs. Làm thế nào để làm điều đó? Hãy thêm những divs đầu tiên
<span> Bảo hiểm tiền gửi Việt -1 </ span> <div id="div1" class="content_loader"> </ div> <span> Bảo hiểm tiền gửi Việt -2 </ span> <div id="div2" class="content_loader"> </ div> <span> Bảo hiểm tiền gửi Việt -3 </ span> <div id="div3" class="content_loader"> </ div> <span> Bảo hiểm tiền gửi Việt -4 </ span> <div id="div4" class="content_loader"> </ div>
Và phần thực hiện nay - chúng tôi đã cho các liên kết một lớp "ajax_link" Chúng tôi sẽ chỉ tự động thêm các hành động ajax chỉ liên kết có một tên lớp được gọi là "ajax_link". Địa ngục, chúng tôi không phải tất cả các liên kết của một trang có hành động ajax, làm chúng tôi?
Vì vậy, tải tài liệu, chúng tôi muốn làm điều này.
. ready ( function ( ) { $ (Tài liệu) đã sẵn sàng (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Click (function () { this ) ; Current_link = $ (this); $. Ajax ({ , loại: "bài", ( "href" ) , url: $ current_link attr ("href"). ( e ) { thành công: chức năng (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; $ ("#" + $ Current_link attr ("rel")) html (e).; } }); ; trả về false; }); });
Hãy để tôi giải thích kịch bản một chút. Sự kiện document.ready là một sự kiện được kích hoạt khi tải trang. Và sau đó chúng tôi đang giao một số loại mã sự kiện click vào các liên kết có một lớp "ajax_link". Việc làm này current_link = $ (this); cho phép có các đối tượng liên kết hiện có trong phạm vi chức năng gọi lại. Và chúng tôi có
$ ("#" + $ Current_link.attr ("rel")) html (e).
có nghĩa là ("div_id) html (server_response) và chúng tôi đã thiết lập các tham số url chức năng ajax động với url:.. current_link.attr (" href "). Vì vậy, bây giờ tất cả những phương tiện "Tất cả những liên kết có một lớp" ajax_link "- Thêm một xử lý sự kiện nhấp chuột sau đó thực hiện và AJAX yêu cầu các liên kết href poperty và tải các phản ứng vào một div có id phù hợp" rel "thuộc tính của liên kết ". Và sự trở lại sai lầm ngăn cản các công việc liên kết như liên kết bình thường 
Muốn nhìn thấy nó một hành động? nó đi.
Và bạn có thể tải về các nguồn là tốt.
Trong phần tiếp theo của ít hướng dẫn này chúng tôi sẽ được sử dụng điều tương tự nhưng với một chút thoải mái.
Áp dụng phương pháp dễ dàng hơn
Tất cả mọi thứ vẫn còn gần như giống nhau. Chúng tôi sẽ chỉ thay đổi phương pháp ajax ở đây. Vì vậy, thay vì viết $. Ajax toàn bộ khối, chúng ta có thể đạt được điều tương tự với sau đây.
. ready ( function ( ) { $ (Tài liệu) đã sẵn sàng (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Click (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . Tải $ ("#" + $ (này) attr ("rel")) ($ (này) attr ("href")); ; trả về false; }); });
Đó là ít hơn rất nhiều phức tạp hiện nay, phải không? Phương pháp tải tải các nội dung ajax trong phần tử nó gắn liền với. Nếu $ ("# somediv_id"). Tải ("mypage.php), nó sẽ cố gắng để tải mypage.php 'nội dung trong đó. Khá đơn giản, huh? Nhưng tôi đề nghị bạn sử dụng phương pháp chính (thể hiện trong phần đầu tiên).
Trong file zip có một tập tin gọi là ajax2.php mà minh chứng điều này methos trong đó có các kết quả tương tự.
Vì vậy, AJAX không phải là khó khăn vì nó, phải không? Khi bạn trở nên rất thông thạo với các hoạt động của AJAX, bạn sẽ tạo ra magics.
Cảm ơn bạn đã đọc btw.
Nhận xét gần đây