• fans
  • 1036 reader
  • followers

Đô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 tôi “Anh ơi ! sao anh không soạn tut dạy Ajax, em toàn thấy dạy Jquery không hà”. Khi đọc được vấn đề này, tôi thực sự bỡ ngỡ, người ta có thể hỏi mình dạy 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ỏ, tôi 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 tôi 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ư học PHP, bạn phải học 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 ^^.

Clackken Smith Website facebook twitter user_email

Bản thân tôi là một người Việt Nam, có lai Tây, Tàu gì không thì chưa biết, cứ tinh thần là Việt Nam cái đã, nơi ở thì vẫn ở Việt Nam, chưa có cơ hội đi tới biên giới nữa nói gì nước ngoài ^^. Hiện tại đang làm việc và sống ở TP. Hồ Chí Minh. Bản thân ngày xưa chẳng đụng chạm gì lập trình, chỉ là tò mò rồi nhìn ngó người ta cài đặt máy móc rồi học theo mà thôi.

  • Dương

    Cảm ơn anh đã chia sẻ, Em đang tìm hiểu về Js, đang gặp vấn đề khó khăn, rất mong các anh cao tay chỉ giúp, em muốn tìm hiểu về Strict
    mode trong js, mong anh giúp đỡ.!

  • Trung

    một số lỗi chính tả thiếu dấu trong bài viết của anh!

  • http://velisfashion.com/ nguyễn việt hùng

    các anh chỉ dum em với sao em chạy Firefox, Chrome thì không bị nhảy.còn Ie thì bị nhảy.các anh chỉ dùm em với

  • http://hungvv.webchuyennghiep.net changkho

    Anh Demon Warlock ơi anh có thể làm 1 video về file .htacess không ? Em đang muốn tìm hiều cái này.

  • Nguyễn Thọ Nguyên

    TRÂN TRỌNG CHÀO ANH DEMON WORLOCK
    Sau đây em xin trình bày một số vấn đề thắc mắc sau:

    Em đang làm 1 project quản lí shop điện thoại. Đại khái là ở phần hiển thị sản phẩm. với mỗi sản phẩm em cho nó vào 1 thẻ div nhỏ và gắn tất cả những thẻ div này vào 1 Div khác:

    echo “”;
    include(‘model/sanpham_table.php’);
    echo “”;

    Với mỗi tấm hình (class=’pro_img’) trong sản phẩm em gắn sự kiện Click = jQuery cho nó phóng to hình ra.

    $(‘.pro_img’).click(function(){
    $(this).parent().parent().parent().parent().parent().parent().children().filter(‘div’).show(‘normal’);
    return false;
    }) /* chỗ selector này hơi bị chuối nhưng nó chạy được */

    Đồng thời em làm class phân trang ajax chạy bằng các hàm của jQuery như trong tut anh có trình bày.

    $.get(‘model/sanpham_table.php’,{‘cur_page’ : page, ‘mh’ :’NKA’}, function(data){
    $(‘#sanpham_table’).hide(‘normal’);
    $(‘#sanpham_table’).html(data);
    $(‘#sanpham_table’).show(‘fast’);
    })

    vấn đề là sau khi nó load trang mới thì sự kiện click cho phóng to cái hình ra không còn nữa. Ngay cả sự kiện bắt click cũng không còn. Trong khi lần đầu tiên em include file ‘sanpham_table.php’ và ajax cũng load lại file này, nghĩa là tên các class bên trong giống y hệt nhau.

    Phải chăng là do lần đầu load trang thì file js nó tìm tất cả các class có tên ‘pro_img’ và gắn click vào cho nó. Sau đó khi ajax đổ dữ liệu khác vào thì những class được gắn click đã không còn nữa.

    Mong anh có thể sớm hướng dẫn em khắc phục sự cố này…

    TRÂN TRỌNG CẢM ƠN ANH.

  • http://đanglàm mrnghminh

    Đính chính với NickB một tí nha!
    - JS và PHP đều là ngôn ngữ lập trình …?!?!?. Ý này bi sai rồi mình xin phép đính chính chứ lỡ mấy bạn khác đọc được mà đi phỏng vấn bị hỏi là rớt chư chơi….(Vì mình bị rồi)
    Ngôn ngữ JS và Ngôn ngữ PHP (gọi như thế này mới đúng) là các dạng ngôn ngữ theo kiểu Action Script (Tiếng anh cho nó dễ hình dung và đầy đủ ý nghĩa hơn). Nó không phải là “Ngôn ngữ lập trình” như ấy nói đâu…. khi mình goi JS thì mình hổng biết nó là gì(chưa tìm hiểu) nhưng khi gọi “PHP” thì đây là một “Công nghệ” chứ hổng phải ngôn ngữ nữa(Mấy cái lý thuyết này quan trọng lắm bạn nào chưa biết thì tìm tài liệu đọc nha nói ở đây dài quá.).Tại sao lại là Action Script mà không phải là ngôn ngữ lập trình? vì nói ra tiếng việt thì nó cũng giống như một anh thợ đụng, đụng cái nào làm cái đó vậy. Trong môi trường PHP các script của nó được PHP biên dịch và thực thi ở mỗi nơi được gọi hoặc biên dịch tất cả một lúc rồi gọi ở nơi nào cần….. JS cũng tương tự nhưng nó chạy trên Client…. Trong khi đó các “Ngôn ngữ lập trình” thì không thể làm được được điều này mà phải biên dịch ra thành tập tin thực thi(*.exe, *.bat …v..v..) như c, c++, c#, vb.net ….. đó là điểm khác nhau lớn nhất giữa hai dạng ngôn ngữ. Nói thêm C# và VB.Net bây giờ theo mình cảm nhận thì nó bị…lai cả Action Script luôn rồi để hiểu rõ hơn thì phải đọc về tài liệu của ASP.NET.
    Đó là ý kiến đính chính của mình thân chào ấy nha.
    Bây giờ là phần comment về bài viết của C.S nè.
    - Không biết là trong iz có bài tut này chưa nhưng C.S hay DW có thể làm một tut JQuery về slideshow hình ảnh kiểu như ở trang 24nha.com và một bài tut về chuyển động di chuyển hình ảnh = JQuery được không ?
    Thân!
    P/S: bài viết có nhiều lỗi chính tả mọi người thông cảm….

    • NickB

      Cám ơn bạn mrnghminh !

      “JS và PHP đều là ngôn ngữ lập trình …?!?!?. Ý này bi sai rồi “-> thực ra ý này không sai đâu bạn, bạn “đi phỏng vấn bị hỏi là rớt chư chơi….” có thể là do người phỏng vấn cảm nhận bạn ko hiểu rõ vấn đề.

      Có thể người phỏng vấn thấy bạn không rõ ràng giữa 2 vấn đề “ngôn ngữ” và “công nghệ”.

      Đơn giản khi dùng từ PHP bạn sẽ đề cập đến 2 thứ : ngôn ngữ lập trình hoặc nền tản công nghệ .

      “PHP là ngôn ngữ lập trình” và “ngôn ngữ php” có j khác nhau.
      Thực ra là như nhau, vấn đề là chúng ra đang đề cập đến ngôn ngữ lập trình chứ không phải là công nghệ .

      Tôi cũng ghi nhận ý kiến của bạn !

      Còn câu hỏi thứ 2 của bạn, tôi nhớ không làm trong loạt bài về wordpress có 1 bài DW hướng dẫn 1 xây dựng slider, bạn tìm lại thử .
      Hoặc bạn có thể google search với key “jQuery slider”
      Tôi cũng tìm cho bạn 1 địa chỉ cung cấp khá nhiều slider dạng này kèm hướng dẫn chắc bạn sẽ áp dụng đc

      Free Web Deisgn
      25 jQuery Image Gallery

    • http://google.com nguyendalat

      http://vi.wikipedia.org/wiki/PHP
      Bạn đọc cái này trước nhé

  • Nguyen Toan

    Bài viết rất hay. Thanks nhiều

  • LamHa

    “JS 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”. Câu này có nghĩa là sao? C là lập trình hướng thủ tục, tuy PHP ko thuần là hướng đối tượng nhưng nó thiên về hướng đối tượng. Như câu của BS thì theo cấu trúc JSCPHP có cái gì ở đây?
    @Lý Trung Kiên: Ajax không phải là công nghệ, Ajax là sự kết hợp không đồng bộ giữa JS và XML.

  • http://nhacf.com nguyen hoang

    theo mình tất cả chỉ là javascript, jquery là js viết sẵn để dễ điều khiển thêm các đối tượng hoặc tạo thêm hiệu ứng, ajax là js viết khá đặc biệt dùng kỹ thuật để load csdl thông qua 1 trang sử lý (php,asp..) và cuối cùng cũng dùng js để hiển thị dữ liệu đó theo ý muốn trên máy client. bạn chỉ cần viết tốt js khi đó cũng chẳng cần đến jquery, bạn thik viết phần nào thì viết phần đó thôi, những cái bạn viết sẽ dễ hiểu để quản lý hơn, chứ cho 1 đoạn jquery trong đó có đủ thứ k thik vì thấy nó thừa thãi k chuyên nghiệp. còn để biết ajax thì phải biết thêm csdl (mysql,..) và 1 loại ngôn ngữ sử lý trên sever (php, asp). demo: http://nhacf.com nó thể hiện đầy đủ những j mình đã nói..

  • http://UnKnow blackblist

    Mình nghĩ nên tự mày mò tìm hiểu là tốt nhất, với lại nếu muốn học Jquery thì trên trang chủ của Jquery cũng cung cấp document rất đầy đủ hết rồi, vấn đề ở đây là cách bạn tiếp thu và vận dụng nó như thế nào thôi.

  • http://ictexpress.com Nguyễn Ngọc Long

    Hay tuyệt nếu có một số tài liệu cơ bản về ajax và jquery thì hay biết mấy.

  • Cố Nhân Lâm

    :D Mình cũng có 1 ví dụ về AJAX rất đơn giản và mình muốn nhắc lại với các bạn 1 điều AJAX chỉ là 1 phần của vấn đề, bạn cần phải đảm bảo rằng trường hợp trình duyệt không có JS hoặc không enable JS thì mọi thứ vẫn phải làm việc, điều này rất quan trọng. Không biết các bạn sao chứ, mình rất thích AJAX và mình đã từng nghĩ dùng AJAX để thay thế tất cả :D

    Đây là link của ví dụ : http://inod.tk/EmployManager/dept_form.html
    Bạn có thể download về để xem tại đây : http://inod.tk/EmployManager.zip
    Database mình để trong đó luôn.

    Ví dụ của mình là hiển thị danh sách nhân viên ra màn hình (dữ liệu lấy từ trong database mysql ra), bạn chọn nhóm nhân viên và nó sẽ hiển thị các nhân viên thuộc nhóm ấy.

    Nếu trình duyệt của bạn không tạo được AJAX, để thay đổi (yêu cầu) nhóm nhân viên khác muốn xem, trình duyệt phải load lại để trả về dữ liệu mới cho bạn.

    Nếu trình duyệt của bạn tạo được AJAX thì sao?

  • NickB

    Ajax, Jquery và JavaScript là gì ?. Quan hệ giữa Ajax, Jquery và JavaScript ?

    Javascript : là một ngôn ngữ lập trình xử lý ở phía client side (browser).

    “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.” => có thể bạn hiểu nhưng nhận định như vậy là chưa chính xác.

    - JS và PHP đều là ngôn ngữ lập trình, ở khía cánh ngôn ngữ chúng có nhiều khác biệt có thể thấy được là về cú pháp, cách xử lý, … nhưng hầu như các “khái niệm lập trình” hầu như không thay đổi, “Khái niệm lập trình” ở đây tôi muốn nói đên ví dụ như OOP, đệ quy, truyền tham biến … Khái niệm lập trình này thường không phụ thuộc lắm vào ngôn ngữ lập trình .

    -JS và PHP hoạt động khác nhau về nền tản, JS hoạt động trên bất kỳ browser nào có hổ trợ JS – PHP đựoc biên dịch , thực thi trên các server có hổ trợ PHP như IIS, Apache.

    Nói như vậy có nghĩa là rất khó đưa ra 1 nhận định , 1 định nghĩa chính xác ngắn gọn JS là j ? PHP là j ? để bạn hiểu mọi thứ về nó được đơn giản là vì ngôn ngữ lập trình có rất nhiều thứ , rất nhiều chi tiết phải đề cập đến, cách tốt nhất là bạn phải cố gắng đọc , làm từ đó sẽ hiểu và cảm nhận đựoc nó .

    JQuery : JQuery là thư viện của JS được phổ biến rộng rãi.JQuery được xây dựng trên nền tản ngôn ngữ JS. JQuery thực chất là tập hợp các hàm của JS đựoc viết để có thể dùng lại .

    Ajax : KO PHẢI LÀ NGÔN NGỮ LẬP TRÌNH, nó là 1 công nghệ dựa trên một tập hợp công nghệ (JS,CSS,XML…) để tạo ra ứng dụng web có tính tuơng tác hơn. Ứng dụng Ajax chủ yếu xử dụng JS để xử lý , truy cập 1 phần thông tin từ phía server thông qua “XMLHttpRequest object” kết hợp với css để cấu trúc giao diện.

    Nói chung như tôi nói với các bạn mới làm quen. Về lập trình đối với 1 vấn đề mới bạn cố gắng đọc nhiều , làm nhiều thì mới dần hiểu và nắm rõ được. Vì nó liên quan tới nhiều thứ, khó đưa ra 1 định nghĩa ngắn gọn giúp bạn hiểu rõ đựoc. Cách tốt nhất bạn nên bổ sung kiến thức tổng quát thì tìm hiểu sẽ nhanh hơn !

  • r3z0lee

    :) cảm ơn anh CS

  • http://bearsharks.com clackken.smith
  • http://- Trung, Lý Kiên (1981)

    Cảm ơn bạn đã viết 1 bài tổng hợp cơ bản. Nói chung ta có thể hiểu là JS thuần là nền tảng, JQuery là 1 thư viện, Ajax là 1 công nghệ có thể chạy trên JS thuần và cũng có thể chạy trên JQuery tùy việc chọn cách thể hiện.

    Cảm ơn bạn!

    P/S. Có thể những bạn đặt câu hỏi là vì chưa hiểu nền tảng, nên việc sử dụng còn hơi lúng túng. Nếu có thêm bài ví dụ về tính năng của Ajax thì có lẽ các bạn ấy sẽ hiểu rõ hơn vấn đề này. Hoặc các bạn có thể tìm kiếm những ví dụ đó ở trang http://www.w3schools.com . Chúc các bạn gặt hái thêm nhiều kinh nghiệm.

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives