• 0366 997 840
  • namdong92@gmail.com

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 (true là không - false là có).

- 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.

  • 0 - request chưa được khởi tạo.
  • 1 - kết nối đến server đang được thiết lập.
  • 2 - yêu cầu đã nhận được.
  • 3 - đang tiến hành xử lý.
  • 4 -  request đã xong và dữ liệu trả về đã sẵn sàng để xử lý.
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


Giới Thiệu JavaScript

Giới Thiệu JavaScript

JavaScript là ngôn ngữ kịch bản phía máy khách được gõ lỏng lẻo thực thi trong trình duyệt của người dùng. JavaScript tương tác với các phần tử html (phần tử DOM) để tạo giao diện người dùng web tương tác.

Javascript Căn Bản

Javascript Căn Bản

Bất kỳ loại tập lệnh phía máy khách nào cũng có thể được viết bên trong thẻ <script> bằng html. Thẻ script xác định một khối mã script trong trang html. Nó cũng tải một tập tin script với thuộc tính src.

Object

Object

Object is a non-primitive data type in JavaScript. It is like any other variable, the only difference is that an object holds multiple values in terms of properties and methods. Properties can hold values of primitive data types and methods are functions.

Vô hiệu hóa chuột phải và không cho người dùng chọn văn bản

Vô hiệu hóa chuột phải và không cho người dùng chọn văn bản

Trong một số trường hợp bạn không muốn cho người dùng trang web sử dụng chuột phải, và không cho chọn thành phần trang bạn có thể làm....

Danh Mục

Bài Viết Mới Nhất