Bài viết được sự cho phép của tác giả Thầy Long Web

Giới thiệu ajax

• AJAX là từ viết tắt của Asynchronous JavaScript and XML
• Ajax là kỹ thuật giúp bạn tải dữ liệu từ server mà không cần refresh trình duyệt.
• Gmail, google map là các website điển hình sử dụng kỹ thuật ajax.

Ajax trong jquery

jQuery có nhiều hàm giúp bạn tạo các request AJAX đến server. Mục đích để thực hiện tương tác ngầm với server và lấy dữ liệu về hiện trong trang web. Bạn có thể request text, html, xml, json từ server thông qua cá phương thức get và post.

Các hàm trong jquery tạo request ajax

Sử dụng hàm load trong jquery

Hàm load của jquery giúp bạn tạo một request ajax tới 1 trang web trên server. Khi nội dung từ server đổ về, dữ liệu sẽ nạp vào selector đã chọn. Đây là request dạng get

Cú pháp hàm load trong jquery

$(selector).load( url, data , [callback] );
$(selector).load(url, data , function(response,status,xhr) )

• url – Là địa chỉ của trang web trên server cần request . Các trang này có thể là ASP, JSP, PHP…
• data – tham số dành cho trang web trong url, theo cấu trúc key=value&key=value. Ví dụ  lang=vi&idSP=5. Nếu trang url không cần tham số thì bạn bỏ qua tham số data
• callback – là hàm được gọi sau khi dữ liệu từ url đã trả về
• response: là data đổ về từ server
• status: trạng thái tử server đổ về cho biết kết quả thực thi trang web url  (success, notmodified, error, timeout, parsererror )
• xhr: chính là đối tượng xmlhttprequest

Thực tập sử dụng hàm load trong jquery

a. Có trang hamload.html như sau:

<meta charset="utf-8">
<style>#data {min-height:200px;width:400px;background:#9CC;border:double 2px #033;padding:10px}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<p>
  <input type="button" name="txn" id="txn" value="Tin xem nhiều" />
  <input type="button" name="tnb" id="tnb" value="Tin nổi bật" />
</p>
<div id="data"></div><input id="tt">

b. Gọi ajax với hàm load, không dùng callback

<script>
    $(document).ready(function(){
        $("#txn").click(function(){
            $("#data").load("txn.html");
        })
        $("#tnb").click(function(){
            $("#data").load("tnb.html");
        })   
    });
</script>

c. Gọi ajax với hàm load, có dùng hàm callback

<script>
    $(document).ready(function(){
        $("#txn").click(function(){
            $("#data").load("txn.html", function(){ $("#tt").before("<p>Đã nạp xong</p>") });
        })
        $("#tnb").click(function(){ $("#data").load("tnb.html", xong);  })   
    });
    function xong(codehtml, status){
        document.getElementById("tt").value=status;
        alert(codehtml);
    }
</script>

Trang txn.html

<p><a href="#">Giá và chất lượng gạo, ai đi đến cùng với người dân? </a></p>
<p><a href="#">Hoàng hôn trên sông Mê Kông </a></p>
<p><a href="#">Độc đáo núi Cấm </a></p>
<p><a href="#">Báo chí quốc tế nói gì về sự kiện Calisto? </a></p>
<p><a href="#">Mười bí quyết cho hạnh phúc </a></p>
<p><a href="#">Khánh Hòa sẽ đăng cai Hoa Hậu Hoàn vũ 2008 </a></p>
<p><a href="#">Hạnh phúc là gì ? </a></p>
<p><a href="#">Làm sao chiên cơm cho ngon </a></p>
<p><a href="#">Bữa cơm nghèo trong cơn sốt gạo </a></p>
<p><a href="#">Mặt bằng giá mới sau cơn sốt gạo </a></p>

Trang tnb.html

<p><a href="#">Washington sẵn sàng cho lễ nhậm chức</a></p>
<p><a href="#">Cầu dây văng made in VN đầu tiên được khánh thành  </a></p>
<p><a href="#">Cái đầu vàng của Công Vinh  </a></p>
<p><a href="#">Việt Nam muôn năm!  </a></p>
<p><a href="#"> Việt Nam vô địch Đông Nam Á  </a></p>
<p><a href="#">Việt Nam vô địch AFF Cup 2008: Giấc mơ thành hiện thực  </a></p>
<p><a href="#">Kéo lá cờ khổng lồ vào Mỹ Đình  </a></p>
<p><a href="#">Tiền đạo Nguyễn Việt Thắng: Dỡ bỏ áp lực cho Calisto  </a></p>
<p><a href="#">Thắng tại Thái Lan, Việt Nam đứng trước cơ hội vô địch  </a></p>
<p><a href="#">Dễ và Khó</a></p>

Hàm $.get

Hàm $.get của jquery giúp bạn tạo một request ajax tới 1 trang web trên server. Khi nội dung từ server đổ về, bạn sử dụng hàm callback để đón và xử lý. Request do $.get tạo ra là request dạng get

Cú pháp hàm $.get trong jquery

$.get(url);
$.get(url,function(response,status,xhr));
$.get(url, data,function(response,status,xhr))
$.get(url, data, function(response,status,xhr),dataType)

• url – Là địa chỉ của trang web trên server cần request . Các trang này có thể là ASP, JSP, PHP…
• data – tham số dành cho trang web trong url, theo cấu trúc key=value&key=value. Ví dụ  lang=vi&idSP=5. Nếu trang url không cần tham số thì bạn bỏ qua tham số data
• function(data,status,xhr) – là hàm callback được gọi sau khi dữ liệu từ url đã trả về
• response: là data đổ về từ server
• status: trạng thái tử server đổ về cho biết kết quả thực thi trang web url
• xhr: chính là đối tượng xmlhttprequest
• dataType: là kiểu dữ liệu dự kiến sẽ nhận tử server, có thể là html, xml, json, text, script

Thực tập sử dụng hàm $.get trong jquery

<script>
    $(document).ready(function(){
        $("#txn").click(function(){
            $.get("txn.html","", function(d){  $("#data").html(d); } );
        })
        $("#tnb").click(function(){ 
            $.get("tnb.html", xong);  
        })   
    });
    function xong(codehtml, status){
        $("#data").html(codehtml); 
        $("#tt").val(status);
    }
</script>

Xem thêm nhiều việc làm JavaScript hấp dẫn trên TopDev

Hàm $.post

Hàm $.post của jquery giúp bạn tạo một request ajax tới 1 trang web trên server. Request này dạng post.

Cú pháp hàm $post trong jquery

$.post(url);
$.post(url,function(response,status,xhr));
$.post(url, data,function(response,status,xhr))
$.post(url, data, function(response,status,xhr),dataType)

• url – Là địa chỉ của trang web trên server cần request . Các trang này có thể là ASP, JSP, PHP…
• data – tham số dành cho trang web trong url, theo cấu trúc key=value&key=value. Ví dụ  lang=vi&idSP=5. Nếu trang url không cần tham số thì bạn bỏ qua tham số data
• function(data,status,xhr) – là hàm callback được gọi sau khi dữ liệu từ url đã trả về
• response: là data đổ về từ server
• status: trạng thái tử server đổ về cho biết kết quả thực thi trang web url
• xhr: chính là đối tượng xmlhttprequest
• dataType: là kiểu dữ liệu dự kiến sẽ nhận tử server, có thể là html, xml, json, text, script

Thực tập sử dụng hàm $.post trong jquery

a. Có trang post.html như sau:

<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="col-5 mx-auto border border-primary px-4 py-2 mt-4 ">
  <form name="frm1">
      <div class="form-group">
          <label>Username</label>
          <input name="u" class="form-control bg-secondary text-white">
      </div>
      <div class="form-group">
        <label>Password</label>
        <input name="p" type="password" class="form-control bg-secondary text-white">
    </div>
    <div class="form-group">
        <button id="btn1" type="button" class="btn btn-primary">Đăng nhập</button>
    </div>
    <div id="kq" class="alert alert-warning text-center"></div>
  </form>
</div>

b. Dùng hàm serialize gom dữ liệu trong form

<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        var d = $("[name='frm1']").serialize();
        alert(d);
    });
});   
</script>

c. Dùng hàm $.post gửi dữ liệu trong form lên server

<script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            var d = $("[name='frm1']").serialize();
            $.post("xuly.php", d, function(data) { 
                $("#kq").html(data);
             }); 
        }); 
    });   
</script>

d. File xuly.php trên server, code đơn giản như sau:

<?php
$u=$_POST['u'];
$p=$_POST['p'];
$arr=array("teo","ti");
if (in_array($u,$arr)==false) echo "Username không tồn tại";
else if ($p!="1") echo "Password không đúng";
else echo "Đăng nhập thành công";
?>

Hàm $.getJSON

Hàm $.getJSON của jquery giúp bạn tạo một request ajax tới 1 trang web trên server để nhận về dữ liệu dạng Json – Dữ liệu dạng text có cấu trúc

Cú pháp hàm $.getJSON trong jquery

$.getJSON(url, data, function(response,status,xhr))

• url – Là địa chỉ của trang web trên server cần request . Các trang này có thể là ASP, JSP, PHP…
• data – tham số dành cho trang web trong url, theo cấu trúc key=value&key=value. Ví dụ  lang=vi&idSP=5. Nếu trang url không cần tham số thì bạn bỏ qua tham số data
• function(data,status,xhr) – là hàm callback được gọi sau khi dữ liệu từ url đã trả về
• response: là data đổ về từ server
• status: trạng thái tử server đổ về cho biết kết quả thực thi trang web url
• xhr: chính là đối tượng xmlhttprequest
• dataType: là kiểu dữ liệu dự kiến sẽ nhận tử server, có thể là html, xml, json, text, script

Thực tập sử dụng hàm $.getJSON trong Jquery

a. Có file Student.php thông tin sinh viên như sau:

    {
        "username": "teonv",
        "password": "iloveyou",
        "fullname": "Nguyễn Văn Tèo",
        "email": "teonv@fpt.edu.vn",
        "gender": "true",
        "birthday": "1995-12-21",
        "schoolfee": "1500000",
        "marks": "0"
    }

b. Trang html code như sau:

<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="col-8 mx-auto border border-danger p-3 mt-4">
<p>
  <input type="button" id="xemds" value="Danh sách sinh viên" /> <input id="tt">
</p>
<div id="kq" class="alert alert-info"></div>
</div>

c. Dùng hàm $.getJSON request dữ liệu json về hiện trong console

script>
    $(document).ready(function(){
        $("#xemds").click(function(){
            $.getJSON("Student.php","", xuly );
        })           
    });
    function xuly(data, status){
       console.log(data); 
    }
</script>

d. Dùng hàm $.getJSON request dữ liệu json về và hiện trong trang web

<script>
    $(document).ready(function(){
        $("#xemds").click(function(){
            $.getJSON("Student.php","", xuly );
        })           
    });
    function xuly(data, status){// console.log(data);
        $.each(data, function(key, value){
            $("#kq").append("<p>"  + key + " = " + value + "</p>");
        }); 
    }
</script>

e. Dùng hàm $.getJSON để request dữ liệu json dạng mảng về hiện trong trang web

<script>
$(document).ready(function(){
    $("#xemds").click(function(){
        $.getJSON("Students.php","", xuly );
    })           
});
function xuly(data, status){// console.log(data);
    $.each(data, function(i, obj){//console.log(obj);
        $.each(obj, function(key, value){
            $("#kq").append("<p>"  + key + " = " + value + "</p>");
        }); 
        $("#kq").append("<hr>");
    })
}
</script>

Sử dụng hàm $.ajax trong jquery

Hàm $.ajax của jquery giúp bạn tạo một request ajax tới 1 trang web trên server với nhiều tham số uyển chuyển. Với hàm này, bạn có thể chỉ định kiểu request là post hay get, có thể điều khiển cache của trình duyệt …

Cú pháp hàm $.ajax trong jquery

$.ajax({name:value, name:value, ... })

Các name/value có thể dùng trong liệt kê dưới đây:

Thực tập sử dụng hàm $.ajax trong jquery

Ví dụ 1: request với type là get

<script>
    $(document).ready(function(){
        $("#txn").click(function(){  
            $.ajax({
                url:"txn.html",
                cache:false,
                type:"get",
                success:function(d){
                    $("#data").html(d);
                },                
            })
        }) 
    });
</script>

Ví dụ 2: request với type là post

 <script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            var d = $("[name='frm1']").serialize();
            $.ajax({
                url:"xuly.php",
                data:d,
                type:'post',
                cache:false,
                success:function(data) { $("#kq").html(data);} 
            }); 
        }); 
    });   
</script>

Bài viết gốc được đăng tải tại longnv.name.vn

Xem thêm:

• Phương thức Autocomplete của jQuery
• Vue.js vs jQuery: So sánh qua 1 số ví dụ

Xem thêm Việc làm IT hấp dẫn trên TopDev