Thông tin tài liệu
AJAX 1. Giới thiệu và phương thức hoạt động của AJAX: a. Khái niệm AJAX: AJAX là từ viết tắt của Asynchronous Javascript And XML. AJAX là một kỹ thuật cho phép tạo ra các trang Web tạo ra các trang Web nhanh chóng và năng động. AJAX cho phép các trang Web được cập nhật không đồng đều bằng cách trao đổi một lượng nhỏ dữ liệu với máy chủ qua hoạt cảnh. Điều đó có nghĩa là nó cho phép cập nhật từng phần của trang Web mà không cần tải lại toàn bộ trang. Điều mà trong các Website trước đây phải tải lại toàn bộ trang web nếu nội dung của nó cần sự thay đổi. Hiện nay AJAX được sử dụng với Google Maps, Gmail, Youtube, Facebook… b. Hoạt động của AJAX c. AJAX dựa trên các chuẩn cơ bản của Internet với sự kết hợp của: - Đối tượng XMLHttpRequest (trao đổi dữ liệu không đồng bộ với một máy chủ). - JavaScript/DOM (để hiển thị/ tương tác với thông tin). - Css (kiểu trình bày trang). - XML (thường được sử dụng như là định dạng để chuyển đổi dữ liệu). d. Ứng dụng: AJAX được sử dụng phổ biến từ năm 2005 trong các trang của Google, Google Suggest. Họ đã sử dụng AJAX để tạo ra một giao diện trang Web rất năng động. Khi bạn bắt đầu gõ vào ô tìm kiếm của Google, một đoạn Javascript được gửi về máy chủ và máy chủ trả về một danh sách các gợi ý. 2. Thao tác AJAX với JavaScript: Giả sử chúng ta cho một nút và một phần tử div sẽ được sử dụng để hiển thị thông tin tải về từ máy chủ khi nút được nhấp: <html> <body> <button type=”button” onclick=”taitrang()”>Tải trang</button> <div id=”noidung”>Nội dung trang được tải khi bấn Button</div> </body> </html> Bây giờ, ta tạo thêm một thẻ <script> trong phần <head> để tạo một hàm kịch bản taitrang() <head> <script type=”text/javascript”> function taitrang() { //Đoạn mã AJAX được trình bày dưới đây. } </head> a. Tạo đối tượng XMLHttpRequest: Hầu hết các trình duyệt hiện nay đều hỗ trợ đối tượng XMLHttpRequest (riêng đối với IE5 và IE6 sử dụng đối tượng ActiveXObject). Đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với máy chủ sau hoạt cảnh. Điều này có nghĩa là nó có thể cập nhật các phần của trang Web mà không cần phải tải lại toàn bộ trang. - Cú pháp tạo đối tượng XMLHttpRequest: tên_biến = new XMLHttpRequest(); - Riêng đối với các trình duyệt IE5 hoặc IE6 ta tạo một đối tượng ActiveXObject: tên_biến = new ActiveXObject(“Microsoft.XMLHTTP”); Và để tổng quát cho tất cả các trình duyệt ta dùng đoạn lệnh sau: var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } b. Gửi yêu cầu về máy chủ: Để gửi yêu cầu về máy chủ chúng ta sử dụng các phương thức open() và close() của đối tượng XMLHttpRequest: Phương thức open(): dùng để xác định loại yêu cầu, Đường dẫn đến nơi yêu cầu, và yêu cầu cần xử lý thông tin đồng bộ hay không. Cú pháp xmlhttp.open(method,url,async); Trong đó: - method: xác định loại yêu cầu: là GET hay POST. GET POST GET là đơn giản và nhanh hơn POST, và được sử dụng trong hầu hết các trường hợp. Tuy nhiên có một số trường hợp ta luôn luôn sử dụng POST: - Tập tin lưu trữ không phải chỉ có một lựa chọn (như trong trường hợp cập nhật một tập tin hay cơ sở dữ liệu trên máy chủ). - Gửi một lượng lớn dữ liệu lên máy chủ (POST không giới hạn kích thước). - Gửi dữ liệu từ người dùng nhập vào (đòi hỏi mã hóa để giữ bí mật), POST mạnh mẽ và an toàn hơn GET. GET thường gắn thêm ID Ví dụ: xmlhttp.open("GET","demo_get2.asp? fname=Henry&lname=Ford",true); xmlhttp.send(); POST đơn giản chỉ cần đường dẫn. Đồng thời chúng ta có thể thêm một tiêu đề HTTP với setRequestHeader(tiêu_đề,giá_trị). Đồng thời chỉ định dữ liệu muốn gửi trong phương thức send(). Ví dụ: xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content- type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford"); - url: xác định vị trí của tập tin cần cập nhật trên máy chủ. Các tập tin có thể có định dạng .txt, .xml hoặc các tập tin kịch bản như .asp, .php (có thể thực hiện hành động trên máy chủ trước khi gửi phản hồi lại). - async: để xác nhận xem có cần cập nhật thông tin đồng bộ hay không. Nó nhận giá trị true hoặc false. Gửi yêu cầu không đồng bộ là một cải tiến lớn cho các nhà phát triển web. Một trong những công dụng rất lớn của nó là tiết kiệm thời gian thực hiện trên máy chủ. Trước khi có AJAX, hoạt động này có thể gây ra việc treo và dừng lại của ứng dụng. Với AJAX, JavaScript không chờ đợi phản ứng máy chủ, mà nó có thể: + Thực hiện các kịch bản khác trong khi chờ đợi phản hồi từ máy chủ. + Đối phó với những tình huống có thể xảy ra. true false Khi sử dụng true, bạn có thể đưa ra các hàm chức năng trong khi chờ đợi máy chủ phản hồi lại. Khi đó các hàm sẽ được viết trước khi sử dụng phương thức open() và nhìn chung đều nhằm sử lý trong trường hợp xảy ra sự cố khi máy chủ nhận và phản hồi thông tin.Ví dụ: xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerH TML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); Khi bạn sử dụng false, các đoạn Javascript sẽ không được thực hiện cho đến khi máy chủ trả về phản hồi. Cho nên các hàm bạn phải viết sau phương thức send(). Khi đó, nếu máy chủ đang bận hoặc chậm, ứng dụng sẽ bị treo hay dừng lại. Ví dụ: xmlhttp.open("GET","ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHT ML=xmlhttp.responseText; Phương thức send(): dùng để gửi yêu cầu về máy chủ. Cú pháp: xmlhttp.send(string); Trong đó: string chỉ được sử dụng nếu loại yêu cầu là POST. c. Phản hồi từ máy chủ: Để nhận được phản hồi từ máy chủ, ta có thể sử dụng các thuộc tính responseText hoặc responseXML của đối tượng XMLHttpRequest. responseText responseXML Chỉ nhận phản hồi dữ liệu như một chuỗi. Ví dụ: <!DOCTYPE html> <html> <head> <script type="text/javascript"> Chỉ nhận phản hồi sữ liệu như dữ liệu XML. Ví dụ: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHT ML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html> function loadXMLDoc() { var xmlhttp; var txt,x,i; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST") ; for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML =txt; } } xmlhttp.open("GET","cd_catalog.xml",true); xmlhttp.send(); } </script> </head> <body> <h2>My CD Collection:</h2> <div id="myDiv"></div> <button type="button" onclick="loadXMLDoc()">Get my CD collection</button> </body> </html> Với tập tin cd_catalog.xml d. Sự kiện readyState: Khi một yêu cầu tới máy chủ được gửi đi, chúng ta muốn thực hiện một số hành động cơ bản để dựa trên kết quả phản hồi. Sự kiện onreadystatechange được kích hoạt mỗi khi readyState thay đổi. Các thuộc tính readyState xác định trạng thái của XMLHttpRequest. Ba thuộc tính quan trọng của đối tượng XMLHttpRequest: onreadystatechange tập hợp các hàm (hoặc tên của một hàm) được gọi tự động mỗi lần thay đổi thuộc tính readyState. readyState Xác định trạng thái của XMLHttpRequest. Nó có thể nhận giá trị từ 0 đến 4. 0 Không yêu cầu khởi tạo 1 Đã kết nối được với máy chủ 2 Yêu cầu đã nhận được 3 Đang xử lý yêu cầu 4 Đã xử lý xong và sẵn sàng phản hồi lại yêu cầu. status 200: “OK”. 404: không tìm thấy trang. Ví dụ: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html> e. Sử dụng một hàm gọi lại: Một hàm gọi lại được xác đinh như là một tham số được truyền vào một hàm khác. Nếu bạn có nhiều hơn một nhiệm vụ AJAX trên trang web của bạn, bạn nên sử dụng một hàm tiêu chuẩn để tạo ra đối tượng XMLHttpRequest. và gọi cho mỗi nhiệm vụ AJAX. Những lần gọi hàm chức năng nên có các URL và những gì cần làm trên onreadystatechange (mà có lẽ là khác nhau cho mỗi lần gọi). Ví dụ: <!DOCTYPE html> <html> <head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url,cfunc) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="myFunction()">Change Content</button> </body> </html> 3. Thao tác AJAX với jQuery: jQuery cung cấp một tập các phương thức viết tắt(shorthand), thuận tiện(convenient) cho việc phát triển ứng dụng web với AJAX mà không cần lo lắng về sự thiếu nhất quán của trình duyệt web. Với jQuery AJAX, bạn có thể yêu cầu(request) dữ liệu TXT, HTML, XML hay JSON từ server bằng hai phương pháp Get hoặc Post của HTTP. Và bạn có thể tải dữ liệu từ xa, trực tiếp vào phần tử HTML được chọn trong trang web của bạn! Các phương thức gửi yêu cầu tới server bằng kỹ thuật AJAX trong jQuery: Tên hàm Cú pháp GET POST .load() .load(url[,data][,callback]) x x $.getJSON() $.getJSON(url[,data][,callback]) x 0 $.getScript() $.getScript(url[,callback]) 0 0 $.get() $.get(url[,data][,callback][,type]) x 0 $.post() $.post(url[,data][,callback][,type]) 0 x $.ajax() $.ajax(options) x x Lưu ý: Hàm jQuery toàn cục Cho đến thời điểm này, những phương thức mà chúng ta sử dụng được gán vào một đối tượng jQuery mà chúng ta tạo ra bằng cách sử dụng hàm $(). Bộ chọn cho phép chúng ta chọn ra một điểm trong DOM để các phương thức của chúng ta làm việc trên chúng. Nhưng hàm $.getJSON thì lại khác. Nó sẽ không được áp dụng lên bất cứ phần tử DOM nào, đối tượng trả về phải được sử dụng cho đoạn mã chứ không phải là chèn vào trang. Chính vì lý do này mà hàm getJSON() được định nghĩa là phương thức đối tượng jQuery toàn cục (một đối tượng được gọi bởi jQuery hoặc được $ xác định một lần bởi jQuery) chứ không phải một phiên bản đối tượng jQuery (đối tượng được chúng ta tạo với hàm $(). Nếu JavaScript có class như những ngôn ngữ lập trình hướng đối tượng khác, thì chúng ta sẽ gọi $.getJSON() là một phương thức class. Do vậy chúng ta gọi phương pháp dạng này là hàm toàn cục, trong thực tế, nó là những hàm sử dụng dấu cách jQuery để tránh bị xung đột với tên của các hàm khác. Để sử dụng hàm này, chúng ta truyền qua tên file như trước. Ví dụ: $(document).ready(function() { $('#letter-b a').click(function() { $.getJSON('b.json'); return false; }); }); 1. Phương thức load(): cho phép tải nội dung HTML trả về từ server vào phần tử được chọn. Cú pháp: $(selector).load(url, [data], [callback]) Trong đó: + url: là một chuỗi URL mà yêu cầu (request) được gửi đến. (Nó có thể là một trang ASP, JSP, hoặc PHP) + data: là một đối tượng mà các thuộc tính của nó được chia thành các cặp key/value như là các tham số được gắn cùng với yêu cầu để gửi lên server. + callback: là một hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành. Hàm này gồm: function(responseText, textStatus, xhr) ∙ responseText: Chứa dữ liệu kết quả từ yêu cầu(request). ∙ textStatus: chứa trạng thái của yêu cầu gồm: "success", "notmodified", "error", "timeout", or "parsererror". ∙ xhr: chứa đối tượng XMLHttpRequest Lưu ý: Nếu tham số data của phương thức load() không được chỉ ra, yêu cầu được gửi tới server theo phương pháp GET, ngược lại, dữ liệu gửi cùng yêu cầu theo phương pháp POST <data> <sales> <item> <firstname>John</firstname> <lastname>Brown</lastname> </item> <item> <firstname>Marc</firstname> <lastname>Johnson</lastname> </item> </sales> </data> Câu hỏi đặt ra là làm thế nào để chuyển dịch cấu trúc sang javascript / JSON: var data = { "sales": [ { "firstname" : "John", "lastname" : "Brown" }, { "firstname" : "Marc", "lastname" : "Johnson" } ] // end of sales array } Thể hiện là một cặp tên - giá trị cú pháp với dấu hai chấm ở giữa. Dấu ngoặc vuông định nghĩa một mảng, các dấu ngoặc nhọn xác định bắt đầu và kết thúc của một đối tượng JSON. Lưu ý rằng trong javascript các mục tag là bị mất. Đối tượng sales có thể được truy cập như sau : alert("first item: " +employees.sales[0]); var extraSales = { "firstname" : "Mary", "lastname" : "Doe"}; data.sales[employees.sales.length] = extraSales; // add extra sales record (with index 2) alert("extra sales from: " +data.sales[2].firstname); // shows "Mary" Các bản ghi JSON được truy cập bằng cách sử dụng một chỉ số bắt đầu từ số không. Điều này cũng tương tự như truy cập vào các thẻ mục trong xml sử dụng XPath . Trong trường hợp đó chỉ số bắt đầu từ một. Ngoài ra một cấu trúc con JSON phải được tạo ra đầu tiên trước trường con của nó có thể được truy cập hoặc thiết lập. Ví dụ: data.sales[3]= extraSales; // or: data.sales.push(extraSales); // the next statement is ok because sales[3] is has been created before data.sales[3].firstname = "Pete"; Ví dụ gửi yêu cầu tải một file text từ Server <script> $(document).ready(function(){ $ ("div").load("files/message.txt"); }); </script> <body> <h1>Sử dụng hàm load()</h1> Nội dung được tải từ server <div></div> </body> Yêu cầu được gửi tới server theo phương thức GET Có thể sử dụng tham số thứ hai của phương thức load() để gửi dữ liệu cùng với yêu cầu tới server như hai ví dụ sau: $('div').load('register.php', 'firstname=Jame&lastname=Bonds'); Hoặc $('div').load('register.php', { firstname: 'Jame', lastname: 'Bonds' }); Ví dụ: <script> $(document).ready(function(){ $("div").load("poster.php", {data: 1}); }); </script> <body> <h1>Sử dụng hàm load()</h1> Lấy nội dung từ server <div></div> </body> Lấy nội dung từ server <div></div> Tập tin poster.php <?php if ($_POST["data"] == "1"){ echo 'You sent the server a value of 1'; } if ($_POST["data"] == "2") { echo 'You sent the server a value of 2'; } ?> Yêu cầu được gửi tới server theo phương thức POST Có thể tải một một phần trong tài liệu $(#result).load('ajax/test.html #container'); Câu lệnh trên khi thực hiện, jQuery parser tìm phần tử có ID là container trong file ajax/test.html, nội dung của phần tử này được trả về và chèn vào phần tử có ID là result Ví dụ: truyền một mảng dữ liệu tới server $("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } ); Ví dụ Gửi dữ liệu tới server bằng phương pháp POST $("#load_post").click(function(){ $("#result").html(ajax_load).load(loadUrl, {language: "php", version: 5}); }); <!DOCTYPE html> <html> <head> <style> body{ font-size: 12px; font-family: Arial; } </style> <script s"></script> </head> <body> <b>Footer navigation:</b> <ol id="new-nav"></ol> <script> $("#new-nav").load("/ #jq-footerNavigation li"); </script> </body> </html> Ví dụ sử dụng với hàm callback <b>Successful Response (should be blank):</b> <div id="success"></div> <b>Error Response:</b> <div id="error"></div> <script> $("#success").load("/notExists.php", function(response, status, xhr) { if (status == "error") { var msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); } }); </script> Successful Response (should be blank): Error Response: Sorry but there was an error: 404 Not Found 3. Hàm serialize() và serializeArray() Là hai hàm tiện ích trợ giúp cho việc gửi (submit) dữ liệu của form tới server. Hàm serialize() tạo và trả về một chuỗi theo dạng query string chứa tất cả các dữ liệu được nhập trên các phần tử của form Tên_phần_tử_1=Giá_trị_1&Tên_phần_tử_2=Giá_trị_2& … Hàm serializeArray() tạo và trả về một mảng các đối tượng JavaScript (nó tương tự như một chuỗi JSON). [ { name: "tên_phần_tử_1", value: "Giá_trị_1" } , { name: "tên_phần_tử_2", value: "Giá_trị_2" } , ] Ví dụ sử dụng hàm serialize() <form id="myForm"> <input type="text" name="a" value="1" id="a" /> <input type="text" name="b" value="2" id="b" /> <input type="hidden" name="c" value="3" id="c" /> <textarea name="d" rows="8" cols="40">4</textarea> <select name="e"> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> </select> <input type="checkbox" name="f" value="8" id="f" /> <input type="submit" name="g" value="Submit" id="g" /> </form> $('form').submit(function() { alert($(this).serialize()); return false; }); Ví dụ sử dụng hàm serializeArray() <form id="myForm"> <input type="text" name="a" value="1" id="a" /> <input type="text" name="b" value="2" id="b" /> <input type="hidden" name="c" value="3" id="c" /> <textarea name="d" rows="8" cols="40">4</textarea> <select name="e"> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> </select> <input type="checkbox" name="f" value="8" id="f" /> <input type="submit" name="g" value="Submit" id="g" /> </form> $(#result).load("myFormProcessor.php", $("#myForm").serializeArray()); [ { name: "a", value: "1" } , { name: "b", value: "2" } , { name: "c", value: "3" } , { name: "d", value: "4" } , { name: "e", value: "5" } ] Xử lý trường hợp người dùng vô hiệu hóa(disable) JavaScript Với người dùng vô hiệu JavaScript: tạo ra các liên kết cho người dùng bấm để tải thông tin theo hình thức cũ (tải đồng bộ). Với người dùng không vô hiệu hóa JavaScript, chúng ta ngăn liên kết tự động tải nội (sự kiện mặc định của link). Các liên kết <div id="footer"> <ul> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> Viết ajax với jQuery cho các liên kết $(document).ready(function() { $('#footer a').click(function(e) { var url=$(this).attr('href'); //Get the url to load $('#section').load(url); // Call the load method with the right URL e.preventDefault(); // Calling preventDefault() prevents the user from following the hyperlink }); }); 4. Phương thức $. get() Phương thức sử dụng một GET HTTP request để tải dữ liệu từ server. Phương thức trả về một đối tượng XMLHttpRequest Cú pháp $.get( url, [data],[success(data,textStatus,jqXHR)], [dataType] ); Returns: jqXHR url: là một chuỗi URL mà yêu cầu (request) sẽ gửi đến đó. data: là dữ liệu sẽ gửi tới server. Dữ liệu được biểu diễn theo từng cặp key/value success(data, textStatus, jqXHR): là một hàm callback được thực thi khi dữ liệu được tải thành công dataType: là kiểu dữ liệu được trả về (response) cho hàm callback như: xml, html, text, script, json, hoặc jonsp Ví dụ: Yêu cầu trang test.php bỏ qua kết quả trả về $.get("test.php"); Yêu cầu trang test.php kèm với dữ liệu, bỏ qua kết quả trả về $.get("test.php", { name: "John", time: "2pm" } ); Gửi một mảng dữ liệu tới server $.get("test.php", { 'choices[]': ["Jon", "Susan"]} ); Hiển thị kết quả trả về bằng hộp thoại $.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); }); $. get() là một shortcut của hàm ajax() như : $.ajax({ url: url, data: data, success: success, dataType: dataType }); Hàm callback success được truyền cho dữ liệu trả về và tình trạng(status) đáp ứng từ server ở dạng text. Dữ liệu trả về truyền cho hàm callback có thể là phần tử gốc XML, file JavaScript, đối tượng JSON hoặc một chuỗi văn bản, tùy thuộc vào kiểu MIME của response. The jqXHR Object As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.get() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). For convenience and consistency with the callback names used by $.ajax(), it provides .error(), .success(), and .complete() methods. These methods take a function argument that is called when the request terminates, and the function receives the same arguments as the correspondingly-named $.ajax() callback. The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including $.get(), to chain multiple .success(), .complete(), and .error() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately. // Assign handlers immediately after making the request, and remember the jqxhr object for this request var jqxhr = $.get("example.php", function() { alert("success"); }) .success(function() { alert("second success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); }); // perform other work here // Set another completion function for the request above jqxhr.complete(function(){ alert("second complete"); }); Example: Assuming we have following PHP content in /jquery/result.php file: <?php if( $_REQUEST["name"] ) { $name = $_REQUEST['name']; echo "Welcome ". $name; } ?> Following is a simple example a simple showing the usage of this method: <html> <head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ $.get( "/jquery/result.php", { name: "Zara" }, function(data) { $('#stage').html(data); } ); }); }); </script> </head> <body> <p>Click on the button to load result.html file:</p> <div id="stage" style="background-color:blue;"> STAGE </div> <input type="button" id="driver" value="Load Data" /> </body> </html> 5. Phương thức $. post() Phương thức sử dụng một POST HTTP request để tải dữ liệu từ server. Phương thức trả về một đối tượng XMLHttpRequest Cú pháp $.post( url, [data],[success(data,textStatus,jqXHR)], [dataType] ); Returns: jqXHR url: là một chuỗi URL mà yêu cầu (request) sẽ gửi đến đó. data: là dữ liệu sẽ gửi tới server. Dữ liệu được biểu diễn theo từng cặp key/value success(data, textStatus, jqXHR): là một hàm callback được thực thi khi dữ liệu được tải thành công dataType: là kiểu dữ liệu được trả về (response) cho hàm callback như: xml, html, text, script, json, hoặc jonsp $. post() là một shortcut của hàm ajax() như : $.ajax({ type: 'POST‘, url: url, data: data, success: success, dataType: dataType }); Hàm callback success được truyền cho dữ liệu trả về và tình trạng(status) đáp ứng từ server ở dạng text. Dữ liệu trả về truyền cho hàm callback có thể là phần tử gốc XML, file JavaScript, đối tượng JSON hoặc một chuỗi văn bản, tùy thuộc vào kiểu MIME của response. The jqXHR Object As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.get() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). For convenience and consistency with the callback names used by $.ajax(), it provides .error(), .success(), and .complete() methods. These methods take a function argument that is called when the request terminates, and the function receives the same arguments as the correspondingly-named $.ajax() callback. The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including $.get(), to chain multiple .success(), .complete(), and .error() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately. // Assign handlers immediately after making the request, and remember the jqxhr object for this request var jqxhr = $.get("example.php", function() { alert("success"); }) .success(function() { alert("second success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); }); // perform other work here // Set another completion function for the request above jqxhr.complete(function(){ alert("second complete"); }); Example: Assuming we have following PHP content in /jquery/result.php file: <?php if( $_REQUEST["name"] ) { $name = $_REQUEST['name']; echo "Welcome ". $name; } ?> Following is a simple example a simple showing the usage of this method: <html> <head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#driver").click(function(event){ $.get( "/jquery/result.php", { name: "Zara" }, function(data) { $('#stage').html(data); } ); }); }); </script> </head> <body> <p>Click on the button to load result.html file:</p> <div id="stage" style="background-color:blue;"> STAGE </div> <input type="button" id="driver" value="Load Data" /> </body> </html> 6. Phương thức $.ajax() Tất cả các phương thức ajax shorthand giới thiệu trước đây đều có bên trong phương thức ajax(). Sử dụng ajax(), nó cho phép kiểm soát các cuộc gọi ajax nhiều hơn như Cho phép sử dụng phương pháp GET hay POST Xử lý lỗi xảy ra khi gọi Làm việc với nhiều dạng dữ liệu khác nhau … Phương thức trả về một đối tượng XMLHttpRequest Cú pháp $.ajax( url, [settings] ) $.ajax( [settings] ) Returns: jqXHR url: chỉ ra địa chỉ của trang nguồn cần lấy dữ liệu settings: là một tập các cặp key/value chứa các cấu hình Ajax Request (phương pháp gửi, dữ liệu gửi đi, callback,…). Tất cả các setting này là tùy chọn Các Setting và mô tả Async: Một giá trị kiểu boolean để xác định yêu cầu của bạn được thực hiện gửi bất đồng bộ(asynchronous) hay không. Mặc định là true. Cache: Xác định muốn lưu giữ kết quả trong cache hay không? Mặc định là true ngoại trừ khi kiểu dữ liệu là json hay script. beforeSend: Một hàm callback được thực thi trước khi yêu cầu được gửi đi. complete: Một hàm callback được thực thi bất kể là yêu cầu gửi đi kết thúc thành công hay thất bại. Đây là hàm callback được truyền tới đối tượng XMLHttpRequest thô với một tham số kiểu chuỗi biểu diễn cho trạng thái(status) của yêu cầu. context: xác định phạm vi của hàm callback (giá trị của this) contentType A string containing a MIME content type to set for the request. The default value is application/x-www-form-urlencoded. data: Dữ liệu gửi tứi Web Server. Nó có thể là một chuỗi tham số(query string) hoặc đối tượng JavaScript. dataFilter: Một hàm được sử dụng để xử lý các dữ liệu đáp ứng thô(raw responsed data) của đối tượng XMLHttpRequest. Đây là hàm lọc trước để giảm bớt(sanitize) đáp ứng rắc rối. dataType: Là một chuỗi cho biết kiểu của dữ liệu nhận được từ server trả về(xml, html, json, or script). error: Là một hàm callback được gọi trong trường hợp có lỗi xảy ra. Đây là hàm callback được truyền tới đối tượng XMLHttpRequest thô với một tham số kiểu chuỗi biểu diễn cho trạng thái(status) của yêu cầu global: là một giá trị kiểu Boolean cho biết các trình xử lý AJAX toàn cục(global AJAX event handlers) sẽ được kích hoạt bởi request này hay không. Mặc định là true. ifModified A Boolean indicating whether the server should check if the page is modified before responding to the request. jsonp Override the callback function name in a jsonp request. password A password to be used in response to an HTTP access authentication request. processData A Boolean indicating whether to convert the submitted data from an object form into a query-string form. The default value is true. success A callback function that is executed if the request succeeds. timeout Number of milliseconds after which the request will time out in failure timeout Set a local timeout (in milliseconds) for the request. type A string defining the HTTP method to use for the request (GET or POST). The default value is GET. url A string containing the URL to which the request is sent. username A username to be used in response to an HTTP access authentication request. xhr Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Bảng danh sách các thiết lập (Setting) cho phương thức ajax() settings Mô tả async Một giá trị kiểu boolean để xác định yêu cầu của bạn được thực hiện gửi bất đồng bộ(asynchronous) hay không. Mặc định là true. beforeSend Một hàm callback được thực thi trước khi yêu cầu được gửi đi. complete Một hàm callback được thực thi bất kể là yêu cầu gửi đi kết thúc thành công hay thất bại. Đây là hàm callback được truyền tới đối tượng XMLHttpRequest thô với một tham số kiểu chuỗi biểu diễn cho trạng thái(status) của yêu cầu. context xác định phạm vi của hàm callback (giá trị của this) data Dữ liệu gửi tứi Web Server. Nó có thể là một chuỗi tham số(query string) hoặc đối tượng JavaScript. dataType Là một chuỗi cho biết kiểu của dữ liệu nhận được từ server trả về(xml, html, json, or script). error Là một hàm callback được gọi trong trường hợp có lỗi xảy ra. Đây là hàm callback được truyền tới đối tượng XMLHttpRequest thô với một tham số kiểu chuỗi biểu diễn cho trạng thái(status) của yêu cầu global là một giá trị kiểu Boolean cho biết các trình xử lý AJAX toàn cục(global AJAX event handlers) sẽ được kích hoạt bởi request này hay không. Mặc định là true. jsonp Tên hàm callback trong trường hợp là một request JSON. Giá trị này sẽ được sử dụng thay cho callback. success Một hàm callback được gọi nếu request thành công. timeout Thiết lập thời gian timeout cho request. Tính bằng mili giây. type Là một chuỗi GET hoặc POST. Mặc định là GET. url Một chuỗi URL mà request sẽ gửi đến Ví dụ <script> $(document).ready(function(){ $.ajax({ type: "POST", url: "poster.php", data: {data:1}, success: callback }); function callback(data, status) {$("div").html(data)} }); </script> <body> <h1>Sử dụng hàm $.ajax()</h1> Lấy nội dung từ server <div></div> </body> Tập tin poster.php <?php if ($_POST["data"] == "1"){ echo 'You sent the server a value of 1'; } if ($_POST["data"] == "2") { echo 'You sent the server a value of 2'; } ?> 6. Thiết lập toàn cục cho Ajax Bạn có thể đưa ra một số thiết lập(setting) trong mỗi lần thực hiện một cuộc gọi Ajax, tuy nhiên nó không được thuận tiện: Dễ bị lỗi Khó bảo quản jQuery cung cấp phương thức ajaxSetup() cho phép bạn đưa ra các thiết lập toàn cục sử dụng chung cho tất cả các cuộc gọi ajax. Tuy nhiên, bạn vẫn có thể ghi đè(override) các thiết lập toàn cục khi sử dụng phương thức ajax() để thực hiện cuộc gọi. 7- Quản lý lỗi Có thể gặp một số lỗi khi làm việc với Ajax như do mất kết nối internet, tải một tài nguyên không có trên server… Phương thức ajax() có tham số error, là nơi bạn chỉ ra một hàm error callback. Hàm này được dùng để xử lý lỗi khi có lỗi xảy ra. Ngoài ra, jQuery còn cung cấp phương thức ajaxError()cho chúng ta khả năng cấu hình xử lý lỗi toàn cục thay vì cho mỗi cuộc gọi. Các sự kiện toàn cục được gắn với một phần tử DOM, là nơi mà bạn sẽ hiển thị một thông báo lỗi cho người dùng. $('#ajax_error').ajaxError(function(event,request,settings){ $(this).html("<b>Error when requesting " + settings.url + "</b>"); }); . AJAX 1. Giới thiệu và phương thức hoạt động của AJAX: a. Khái niệm AJAX: AJAX là từ viết tắt của Asynchronous Javascript And XML. AJAX là một kỹ thuật cho phép. 6. Phương thức $ .ajax( ) Tất cả các phương thức ajax shorthand giới thiệu trước đây đều có bên trong phương thức ajax( ). Sử dụng ajax( ), nó cho phép kiểm soát các cuộc gọi ajax nhiều hơn như . web nếu nội dung của nó cần sự thay đổi. Hiện nay AJAX được sử dụng với Google Maps, Gmail, Youtube, Facebook… b. Hoạt động của AJAX c. AJAX dựa trên các chuẩn cơ bản của Internet với sự kết
Ngày đăng: 28/06/2014, 00:20
Xem thêm: ajax potx
