Hiệu ứng Ajax

Trong tập tin test.html ở bài Thêm nhiều trang đến một tập tin HTML dùng jQuery Mobile, chúng ta đã tổ chức nhiều trang trong cùng một tập tin và thực hiện liên kết giữa các trang này.  Bây giờ, chúng ta sẽ tạo tập tin contact.html trong cùng thư mục với tập tin test.html:


<html>

     <head>

          <title>Contact me</title>

     </head>

     <body>

          <p>I am Ngoc Minh Tran.</p>

          <p>Please leave your email or comments here.</p>

    </body>

</html>

Và mở lại tập tin test.html (hay copy từ bài Thêm nhiều trang đến một tập tin HTML dùng jQuery Mobile), thêm dòng liên kết đến tập tin contact.html:


<html>

   <head>

      <title>First Mobile Example</title>

      <meta name="viewport" content="width=device-width, initialscale=1">

      <link rel="stylesheet" href="jquery.mobile-1.4.5.css" />

      <script type="text/javascript"

         src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

      <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>

   </head>

   <body>

      <div data-role="page" id="homePage">

         <div data-role="header">Welcome</div>

         <div data-role="content">

            <p>

              Welcome to our first mobile web site. It's going to be the

              best site you've ever seen.

            </p>

            <p>

              You can also <a href="#aboutPage" data-ajax="false">learn more</a> about

              ngocminhtran.com.

            </p>

            <p>

              <a href="contact.html" >Click here</a> to contact me.

            </p>

        </div>

        <div data-role="footer">

          <i>Copyright ngocminhtran.com &copy; 2019</i>

        </div>

     </div>

     <div data-role="page" id="aboutPage">

       <div data-role="header">About </div>

       <div data-role="content">

         <p>

           This website is created by ngocminhtran.com. Click

           <a href="#homePage">return</a> to the home page.

         </p>

       </div>

       <div data-role="footer">

         <i>Copyright ngocminhtran.com &copy; 2019</i>

       </div>

   </div>

  </body>

</html>

Thực thi test.html dùng trình duyệt IE và xem kết quả:

Nhấn chuột vào Click here sẽ chuyển đến trang contact.html:

Bây giờ chúng ta thực thi test.html trên Chrome hay FireFox, kết quả giống trên IE:

Nhưng khác biệt xảy ra khi nhấn Click here:

Một dòng thông báo Error Loading Page sẽ xuất hiện trong vài giây và biến mất. Nguyên nhân tình trạng này là do ứng xử của jQuery Mobile. Khi bắt gặp một liên kết đến một trang trên cùng một tập tin và dấu hiệu là dấu # đứng trước tên trang như #aboutPage hay #homePage, jQuery Mobile sẽ thực hiện chuyển người dùng đến trang mới (như ví dụ test.html trong bài Thêm nhiều trang đến một tập tin HTML dùng jQuery Mobile). Tuy nhiên, nếu bắt gặp một trang, là một tập tin khác như contact.html trên cùng một server, jQuery Mobile sẽ dùng Ajax để tải trang thay vì chuyển người dùng đến trang khác. Ở trên, khi thực thi trên IE thì mọi chuyện đều ổn nhưng một số trình duyệt khác như Chrome hay FireFox, một số bất tiện sẽ xảy ra do ứng xử Ajax này của jQuery Mobile.

Thuộc tính data-ajax

Để tránh một số bất tiện do ứng xử Ajax của jQuery Mobile gây ra, chúng ta thêm thuộc tính data-ajax đến thẻ <a> và thiết lập giá trị false đến thuộc tính này:


<p>

   <a href="contact.html" data-ajax="false">Click here</a> to contact me.

</p>

Bây giờ chúng ta có thể liên kết từ trang test.html đến trang contact.html trên bất cứ trình duyệt nào. Để ý rằng, giao diện trang contact chưa được đẹp và chúng ta có thể thêm thư viện jQuery Mobile đến đầu trang này và kết quả:

Ứng xử Ajax của jQuery Mobile là một trong những đặc trưng quan trọng cần chú ý khi liên kết giữa các trang thuộc các tập tin khác nhau.