Bài 3: Sử dụng XMLHttpRequest để lấy dữ liệu.

Xin chào các bạn. Dạo này hơi bận nên hôm nay mới vết bài cho các bạn được.

Hôm nay mình sẽ hướng dẫn cho các bạn cách sử dụng XMLHttpRequest để lấy dữ liệu.

Như mình search google thì "Đối tượng XMLHttpRequest là trái tim của lập trình Ajax nghĩa là XMLHttpRequest chính là đối tượng được dùng để gửi request và nhận response."



Như vậy bạn có thể request đến 1 trang web và nhận được thông tin đó. mục đích nhằm để lấy thông tin hay gửi 1 form lên trang web nào đó để mục đích đăng ký, đăng nhập, xác nhận suvey... bla bla.

Về phần đọc hiểu thì các bạn có thể tìm ở đây nhé:
1. XML HttpRequest
2. XMLHttpRequest (Firefox SDK)

Nào hãy cùng mình xem XMLHttpRequest trong imacros làm được những gì nào.

Ví dụ 1. Lấy thông tin của địa chỉ IP này: 208.80.152.201 bằng cách sử dụn api của ip-api.com

Đầu tiên mình sẽ khởi tạo 1 function có tên là request nhé

var request = function(url,data=null){
results="";
var xmlhttp= new window.XMLHttpRequest;
try {
var type = data==null?"GET":"POST";
xmlhttp.open(type, url, false);
xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4 ) {
      if(xmlhttp.status==200 || xmlhttp.status==500 ){
         results = xmlhttp.responseText;
         //window.alert(results);
         }
      }
 };
 xmlhttp.send(data);
} catch (e) {};
return results;
}

Tiếp theo chúng ta sẽ request đến địa chỉ trang web này: http://ip-api.com/json/208.80.152.201 để lấy dữ liệu.

var data_ip = request("http://ip-api.com/json/208.80.152.201");
data_ip = JSON.parse(data_ip);
window.console.log(data_ip);

Vì dữ liệu dạng json nên mình sẽ convert từ text sang json bằng hàm JSON.parse .
Bật console lên và chạy. bạn sẽ thấy được 1 object như này.

Tuyệt vời đúng ko nào :).



Ok done. Bài hướng dẫn hôm nay tạm dừng tại đây,
Mục đích của hàm này dùng để gửi form hoặc lấy dữ liệu nhanh mà không cần phải load trang ra tab mới, cái này giúp bạn tiết kiệm thời gian nhé.