Hướng dẫn Tìm hiểu mối ràng buộc và quan hệ giữa Ajax, Jquery và JavaScript

[PVS]

Tìm hiểu mối ràng buộc và quan hệ giữa Ajax, Jquery và JavaScript

Đôi lúc khi mới đi đến ranh giới của lập trình web 2.0 bạn đang ngờ ngợ giữa các chức năng của nó, cũng như bạn biết rằng web 2.0 thì nên áp dụng ajax, tìm hiểu trên mạng hoặc trong tài liệu thì bạn hiểu sơ sơ nó là cách gửi dữ liệu không đồng bộ ….

Nhưng để đi vào vấn đề khi đến với ajax bạn thực sự bối rối quá nhiều, không biết cơ chế hoạt động, không nắm rõ nó, và một phần do vồn tiếng anh yếu mà không dám đụng chạm đến những cuốn sách JS tiếng anh…

Một thời gian nào đó, có bạn đã pm để hỏi mình “Anh ơi ! sao anh không soạn tut Ajax, em toàn thấy Jquery không hà”. Khi đọc được vấn đề này, mình thực sự bỡ ngỡ, người ta có thể hỏi mình Ajax trong khi người ta biết Jquery. Có buồn cười không khi hỏi “Anh ơi em biết sơ về Jquery nhưng em mù JS anh có thể soạn tut JS cho em không ?”, khi đó nó lại là vấn đề khác.

Để trả lời cho câu hỏi này, bài viết hôm nay sẽ minh họa rõ ràng về mối ràng buộc và quan hệ giữa Ajax, Jquery và JavaScript.

ĐỊNH NGHĨA
Javascript : là một ngôn ngữ xử lý sự kiện thông thường cho website, thông thường được dùng để sử lý các sự kiện. Ngôn ngữ cũng theo cấu trúc chính của C, có thể nói JS chỉ khác PHP ở ngôn ngữ, còn hướng lập trình thì hầu như là giống nhau.

JQuery : Gần như là một mã nguồn mở sử dụng JS, Jquery tổng hợp các vấn đề cần phải làm trong JS thành một thư viện, và sau đó nó cho phép phát biểu theo cách gọi riêng của nó.

Ajax : Có thể nói, Ajax chỉ là một phần nhỏ trong JSm khi thực hiện theo JS thuần Ajax được thể hiện tương quan theo JS thuần, khi thể hiện theo Jquery, cách sử dụng khác nhau nhưng mối tương quan của nó với JS vẫn không đổi, bởi vì bản thân nó vẫn chỉ chạy trên JS.

PHÂN BIỆT
- Với cách để có thể phân biệt 3 dạng này, ta sẽ đi đơn giản từ dưới lên trên.

Ajax : Ajax chỉ là một hàm nhỏ nếu bạn sử dụng Jquery và là một sự kết hợp nhiều thành phần nếu bạn sử dụng JS thuần.

Ajax với Jquery

$(document).ready(function(){
   $.ajax({
      //Tại đây ta có thể cho các giá trị vào function Ajax, lúc này Ajax là một function.
      url: 'leech_link.php',
      type: 'POST',
      dataType: 'html',
      data: 'name='+varlue1+'&tuoi='+value2,
      beforeSend(function(){
           $('#wait').html('<img src='load.gif' title='' />);
      }),
      success(function(html){
           $('#show').html(html);
       })
   });
});

- Chỉ với vài dòng như thế chúng ta đã hoàn thành một ajax khá đơn giản, nhưng bản chất bên trong của nó khi tuơng tác với JS thì như thế nào ? hay nói chính xác hơn, Ajax hoạt động trên JS thế nào, chúng ta cùng tham khảo code sau:

Ajax với JS thuần

// Ajax function
function XMLHttpClient() {
     var xmlhttp;
     try {
         // Mozilla / Safari / IE7
         xmlhttp = new XMLHttpRequest();
     } catch (e) {
          // IE
          var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
                                    'MSXML2.XMLHTTP.4.0',
                                    'MSXML2.XMLHTTP.3.0',
                                    'MSXML2.XMLHTTP',
                                    'Microsoft.XMLHTTP' );
         var success = false;
         for (var i=0;i < XMLHTTP_IDS.length && !success; i++) {
         try {
                  xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
                     success = true;
               } catch (e) {}
         }
         if (!success) {
             throw new Error('Unable to create XMLHttpRequest.');
         }
    }
    return xmlhttp;
}
 
 function SetName(name)
 {
     var req =XMLHttpClient() ;
     req.open('GET', 'setname.php?name=' + name, false);
        
     req.send(null);
  var newName =req.responseText;
     alert(newName);
 }

- Như vậy chúng ta đã hiểu rõ hơn phần nào Ajax, chúng ta cùng đi qua vấn đề tiếp theo là Jquery

Jquery: Như đã giải thích ở trên, bản thân Jquery cũng chỉ là một thư viện tổng hợp hoạt động trên nền tảng JS, để chứng minh điều này, chúng ta đi vào một ví dụ nho nhỏ, mình muốn lấy giá trị của một ID nào đó và cho hiển thị thông báo ra màn hình.

Sử dụng JS thuần

//Nếu bạn muốn lấy giá trị của nó, bạn phải sử dụng chuỗi hàm sau :
 
     var myContent = document.getElementById('content');
     alert(myContent.value);

và sử dụng Jquery

alert($('#content').val());

Chỉ đơn giản là vậy mà thôi. Như vậy cái bạn cần hiểu, từ một phuơng thức nào đó, Jquery có thể thực thi các lệnh JS thông qua cách viết của riêng nó, nhưng thực sự nền tảng nó vẫn chỉ là JS.

JavaScript : Như vậy tới đây, bài viết là khá tạm ổn cho các phần giải thích, về JS mình không có nhiều ý kiến để phân biệt nó, bởi vì nó là nền tảng cho sự phát triển của các thư viện khác.

KẾT LUẬN
Như vậy giờ chắc bạn đã mường tượng được trong đầu, cái nào nằm đâu? Và vị trí nó như thế nào rồi đúng không?. Cũng như kho kiến thức, kiến thức là vô hạn, một thuật toán sẽ có nhiều cách giải, một bài toán khó không phải có kết quả là quan trọng, mà phải làm sao cho nó đỡ tốn công sức nhất. Cũng như PHP, bạn phải tìm hiểu theo hướng đối tượng để tránh đi tối đa những khai báo trùng lặp, để tránh tất cả những code không cần thiết, như Jquery vậy, người ta gộp chung nó và đặt cho nó một cách khác gọn gàng hơn.

Chúc các bạn thành công.

Nguồn: izwebz.com​