PHP nâng cao - kỹ thuật ajax thuần

Ajax là gì? ajax được viết tắt của từ Asynchronous JavaScript and XML, có nghĩa là kết hợp javascript và xml trong môi trường bất đồng bộ, Ở bài này ta sẽ tìm hiểu kỹ thuật ajax kết hợp giữa javascript và PHP như thế nào và sau đó sẽ viết ứng dụng với ajax sử dụng javascript thuần.

Thế nào là kết hợp javascript với xml trong môi trường bất đồng bộ? tại sao lại là bất đồng bộ mà không phải là đồng bộ?

Đồng bộ có nghĩa là chúng ta sẽ xử lý, thao tác với toàn bộ một trang web, còn bất đồng bộ có nghĩa là ta chỉ xử lý, thao tác trên một vùng nào đó của trang web mà thôi.

Bản chất của quá trình ajax này là quá trình truyền dữ liệu từ javascript sang PHP, PHP nhận dữ liệu và xử lý sau đó trả về cho javascript

1. Khởi tạo

Chúng ta có cấu hình thư mục web như sau, trong thư mục script tạo file ajax.js



Mở file ajax.js chúng ta sẽ bắt đầu viết nào, trước tiên để sử dụng được ajax chúng ta phải lấy DOM của trình duyệt hiện tại (trình duyệt mà chúng ta đang dùng để duyệt web)

Ta viết ra môt function như sau, function create_obj() , ta đặt biến browse = navigator.appName; để lấy ra tên ứng dụng hiện tại ( hay chính xác là lấy ra tên trình duyệt bạn đang dùng là IE hay Firefox hay Chrome .. )

1 2 3 4 5

File ajax.js :   function create_obj(){     var browse = navigator.appName;                 }

Với các trình duyệt hiện đại như firefox, chrome... thì việc chúng ta lấy ra DOM bằng hàmXMLHttpRequest() còn riêng với Microsoft Internet Explorer ta sẽ lấy ra bằng hàmActiveXObject("XMLHTTP") nhé, chúng ta chú ý chữ in hoa và chữ thường, dù bạn chỉ sai một chữ thui thì ứng dụng cũng không chạy đâu 

1 2 3 4 5 6 7 8 9 10 11

File ajax.js :   function create_obj(){     var browse = navigator.appName;         if(browse == "Microsoft Internrt Explorer"){ // Nếu là IE         obj = new ActiveXObject("XMLHTTP");                 }else{ // Các trình duyệt khác         obj = new XMLHttpRequest();     }                 return obj; // trả về kết quả lấy được }

- Trước tiên chúng ta lấy ra DOM của trình duyệt bằng hàm create_obj() mà khi nãy chúng ta khởi tạo, sau đó gán cho biến http

1	var http = create_obj(); // gán Dom cho biến http

2. Truyền dữ liệu từ javascript sang PHP

- Truyền dữ liệu từ javascript sang PHP, chúng ta sẽ viết ra hàm going() để truyền dữ liệu 

1 2 3 4 5 6 7

File ajax.js :   function going(){     http.open("post/get","Nơi nhận dữ liệu",true);     http.onreadystatechange = response;     http.send(); }

- Trong đó thì

1. http.open(); gửi dữ liệu từ js sang php bằng phương thức post hay get, tiếp theo là nơi nhận dữ liệu, và true là có thực hiện gửi dữ liệu bất đồng bộ 
2. http.onreadystatechange là nơi khai báo nhận kết quả trả về từ PHP, nơi nhận dữ liệu trả về chính là hàm response
3. http.send() dùng để gửi bắt đầu dữ liệu đi, tùy vào phương thức là post hay get mà cách gửi dữ liệu sẽ khác nhau

- Tùy vào cách truyền dữ liệu đi là post hay get mà chúng ta sẽ có cách truyền giá trị khác nhau nhé, ở bài này ta chưa phân tích cụ thể là post hay get, chúng ta sẽ dành phần này cho bài tập thực tế ở phần sau.

3. Nhận dữ liệu trả về

Sau khi PHP xử lý xong dữ liệu được truyển trở lại cho javascript, tùy theo ý đồ người lập trình mà ta tiến hành thực hiện code, hàm response() sẽ là nơi nhận kết quả trả về do chúng ta khai báo ở phần http.onreadystatechange

1 2 3 4 5 6 7

File ajax.js :   function response(){     if(http.readyState == 4 && http.status == 200){         result = http.responseText; // nhận kết quả trả về từ PHP                                   } }

a. http.readyState == 4 có nghĩa là yêu cầu xử lý đã hoàn thành, có 5 trạng thái sau
    - 0 là yêu cầu không được thực hiện
    - 1 yêu cầu đã được cài đặt
    - 2 yêu cầu đã được gửi
    - 3 yêu cầu đang được xử lý
    - 4 yêu cầu đã xử lý xong

b. http.status == 200 nghĩa là trạng thái OK 
    - 404 là not found  

Bài này chỉ dừng lại ở phần lý thuyết chưa có ví dụ cụ thể, các bạn xem bài tiếp theo để hiểu dõ hơn về ajax nhé

nguồn http://phpandmysql.net/