Ajax trong lập trình web
1.Tổng quan.
AJAX(Asynchronous JavaScript And XML) tạm dịch bất đồng bộ JavaScript và XML. Có thể hiểu nó là phương thức gửi request ngần và nhận dữ liệu sau khi tải trang xong mà không cần tải lại trang.
AJAX là một tên gây hiểu lầm. Các ứng dụng AJAX có thể sử dụng XML để vận chuyển dữ liệu, nhưng nó cũng phổ biến không kém khi vận chuyển dữ liệu dưới dạng văn bản thuần túy, HTML DOM hoặc văn bản JSON.
2.Các đặc điểm của ajax
AJAX không phải là ngôn ngữ lập trình.
AJAX chỉ sử dụng kết hợp:
- Sửa dụng một đối tượng XMLHttpRequest tích hợp trong trình duyệt (để yêu cầu dữ liệu từ máy chủ web).
- JavaScript và HTML DOM (để hiển thị hoặc sử dụng dữ liệu).
3.Triển Khai AJAX
3.1 Ajax trong javascript.
Khởi tạo đối tượng.
-Để sử dụng được ajax trong javascript thì các bạn phải sử dụng đối tượng XMLHttpRequest. Và để khởi tạo đối tượng này thì chúng ta sử dụng cú pháp.
var variableName = new XMLHttpRequest();
Trong đó: varriableName là tên biến mà các bạn muốn gán cho abject XMLHttpRequest.
Tuy nhiên nếu như bạn đang sử dụng trình duyệt internet Explode 6 trở xuống thì đối tượng này sẽ có tên là ActiveXObject. Chính vì điều đó, nên để cho chắc ăn thì các bạn nên khởi tạo đối tượng bằng cách sau:
if (window.XMLHttpRequest) {
var xhttp = new XMLHttpRequest();
} else {
var xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Hoặc
var xhttp = new XMLHttpRequest() || ActiveXObject("Microsoft.XMLHTTP");
Các thuộc tính và phương thức của XMLHttpRequest.
Phương thức và thuộc tính trong đối tượng này.
| Thuộc tính - Phương thức | Mô Tả |
| abort() | Hủy Request hiện tại. |
| getAllResponseHeaders() | Lấy ra thông tin header. |
| getResponseHeader() | Trả về cụ thể thông tin header. |
| open(method, url, async, username, password) | Cấu hình cho một request mới. Trong đó: - method là phương thức gửi request (GET,POST). - url là địa chỉ gửi request. - async là có chấp nhận đồng bộ không ( - username là tùy chọn tên user (có thể bỏ trống). - password là password của user (có thể bỏ trống). |
| send(string) | Gửi dữ liệu đến server đã được cấu hình ở phương thức open(). Trong đó string là data các bạn muốn truyền theo nếu request là POST. |
| setRequestHeader(header, value) | Thiết lập các thông số header gửi lên. Với header là tên của header và value là giá trị của header đó. |
| onreadystatechange | Định nghĩa một hàm sẽ được gọi khi readstate thay đổi. |
| readyState | Trạng thái của XMLHttpRequest. Trong đó nếu giá trị bằng các giá trị sau thì sẽ có trạng thái tương ứng.
|
| responsiveText | Giá trị trả về dưới dạng string. |
| responseXML | Gía trị trả về dưới dạng XML. |
| status | Trả về trạng thái của request. VD: 200,404,403 |
| statusText | Trả về trạng thái của request dưới dạng text. VD: Ok, Not Found |
3.1.1 Các ví dụ.
GET
var URL = '/video/uploadajax'; // link nhận request
var xhr = new XMLHttpRequest();
xhr.open('GET', URL);lẳng nghe sự kiện trả về
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callbackfunction();
}
}
xhr.send(form);
POST
var URL = '/video/uploadajax'; // link nhận request
var xhr = new XMLHttpRequest();
xhr.open('POST', URL);lẳng nghe sự kiện trả về
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callbackfunction();
}
}
xhr.send(form);
3.2 AJAX với jquery
3.2.1 Load()
Cú pháp đơn giản cho phương thức load() trong jQuery: [selector].load( URL, [data], [callback] );
Miêu tả chi tiết về các tham số:
URL − URL của ngồn Server-Side để Yêu cầu (Request) được gửi tới. Nó có thể là CGI, ASP, JSP, hoặc PHP script mà tạo dữ liệu động hoặc ra khỏi database
Data − tham số tùy ý này biểu diễn một đối tượng mà các thuộc tính của nó được xếp theo thứ tự vào trong các tham số được mã hóa một cách thích hợp để được truyền tới Yêu cầu (Request). Nếu được xác định, Request được tạo bởi sử dụng phương thức POST. Nếu bị bỏ qua, phương thức GET được sử dụng.
Callback − Một hàm callback được gọi sau dữ liệu phản hồi đã được tải vào trong các phần tử của tập hợp đã kết nối. tham số đầu tiên được truyền tới hàm này là văn bản phản hồi từ Server và tham số thứ hai là mã hóa trạng thái.
Ví dụ
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('./result.html');
});
});
</script>
</head>
<body>
<div id="stage">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
3.2.2 $.POST()
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$.post('vidu2.php', {
a: "content abc",
b: "content bcd"
},function(ketqua) {
$('#noidung').html(ketqua);
});
});
});
3.2.3 $.GET()
$(document).ready(function() {
$('#load-du-lieu').click(function(e) {
e.preventDefault();
$.get('vidu2.php',function(ketqua) {
$('#noidung').html(ketqua);
});
});
});
Bài Liên Quan
Danh Mục
Bài Viết Mới Nhất
Xem hình trước khi được chọn
JavaScript
Form.Field date
React
Định dạng số trong javascript
JavaScript
![[PHP] Hàm thêm số 0 vào sốv](/public/img/images/php/php.png)
[PHP] Hàm thêm số 0 vào số
PHP Căn Bản
[PHP] Hàm bỏ dấu tiếng việt PHP
PHP Căn Bản
[PHP] HASH FUNCTIONS
PHP Căn Bản
![[PHP] Hiển thị tất cả các lỗi PHP v](/public/img/images/php/php_error_warning.png)
[PHP] Hiển thị tất cả các lỗi PHP
PHP Căn Bản
[PHP] Hàm GUID
PHP Căn Bản
PHP
PHP Căn Bản
Popular Talks
Raw denim you probably haven't heard of them jean shorts Austin. eu banh mi, qui irure terry richardson ex squid Aliquip placeat salvia cillum iphone.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. aliquip jean shorts ullamco ad vinyl aesthetic magna delectus mollit. Keytar helvetica VHS salvia..
