ajax potx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (207.4 KB, 11 trang )
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>");
});
