Cấp bậc tác giả:

DOTNET

Điều hướng trang web với Ajax loading Image

Được viết bởi QuangIT ngày 31/07/2012 lúc 12:50 PM
Có lần khi vào các trang web mà các ứng dụng web được chuyển hướng đến, có thể mất một thời gian để trả lời hoặc tải. Ví dụ, sau khi người dùng đăng nhập thành công vào một ứng dụng web, ứng dụng sẽ chuyển hướng yêu cầu đến trang nhà.
  • 0
  • 1924
Tải tệp tin: Click ở đây

Điều hướng trang web với Ajax loading Image


Có lần khi vào các trang web mà các ứng dụng web được chuyển hướng đến, có thể mất một thời gian để trả lời hoặc tải. Ví dụ, sau khi người dùng đăng nhập thành công vào một ứng dụng web, ứng dụng sẽ chuyển hướng yêu cầu đến trang nhà. Hãy tưởng tượng rằng , nếu trang được đề cập có chứa một bảng điều khiển và cá nhân hoá nhiều WebParts Các trang web yêu cầu có thể mất một thời gian để phản ứng phụ thuộc vào tốc độ người dùng kết nối Internet và số lượng lưu lượng truy cập mạng tại bất kỳ thời gian nhất định.. Một số người dùng có thể thiếu kiên nhẫn và cám dỗ để nhấp về các nút khác hoặc liên kết trên trang web, xem hình 1 Để khắc phục vấn đề này,. đầu tiên, chuyển hướng yêu cầu tới một trang trung gian, và sau đó tải các trang yêu cầu từ đó. Mục đích chính của trang trung gian là để hiển thị một tải AJAX chỉ báo hình (hình 2), trong khi chờ đợi người dùng cho trang web yêu cầu để đáp ứng.

Hình 1


Hình 2
Thực hiện 

Tạo một trang HTML và tên nó Redirecting.html, thêm một thẻ hình ảnh trong phần cơ thể và bọc nó trong một phần tử div. Xem danh sách 1 

Danh mục 1
< div <Div style ='position:absolute;z-index:5;top:45%;left:45%;' > style = 'position: absolute; z-index: 5; đầu: 45%; trái: 45%;'> 
<img <img id ="imgAjax" id = "imgAjax" alt ="loading..." alt = "loading ..." title ="loading..." Tiêu đề = "loading ..." src ="images/ajax-loading.gif" src = "images / ajax-loading.gif" style ="width: 100px; height: 100px" style = "width: 100px; height: 100px" ><br /> <Br > /> <br <br > /> 
</ div> </ Div> 
Thêm mã JavaScript được hiển thị trong danh sách dưới đây 2 thẻ div. Trong JavaScript, chúng tôi có hai biến toàn cầu cụ thể là chuỗi truy vấn và các trang, và một chức năng công cộng được gọi là toPage.Sau khi đọc các thông lệ tốt nhất bật bài viết, tôi quyết định sử dụng kiểu mô-đun JavaScript. Tôi đã tạo ra một không gian tên gọi là chuyển hướng để bọc các đề cập đến các biến công khai và chức năng. Các querystring biến sẽ trở lại giá trị chuỗi truy vấn trong URL hiện hành. Biến trang sẽ trả lại xâu chuỗi truy vấn của các từ chỉ mục của "=" vào cuối của chuỗi. Mục đích của toPage chức năng () là để phụ thêm một Header để làm mới trang web cho các trình duyệt khác ngoài Internet Explorer (IE). Nếu là loại trình duyệt IE và phiên bản của nó lớn hơn hoặc bằng 4, sau đó sử dụng chức năng location.replace để thay thế địa chỉ URL hiện tại với vị trí mới. redirect.begin () sẽ gọi phương thức toPage () .

Danh mục 2 
<script type="text/javascript">
/* <![CDATA[ */
this.focus(); //focus on new window

redirect = function() {
var querystring = window.location.search.substring(1); //first query string
var page = querystring.substring(querystring.indexOf('=') + 1, querystring.length);
function toPage() {
if (page !== undefined && page.length > 1) {
document.write('<!--[if !IE]>--><head><meta http-equiv="REFRESH" content="1;url=' + page + '" /><\/head><!--<![endif]-->');
document.write(' \n <!--[if IE]>');
document.write(' \n <script type="text/javascript">');
document.write(' \n var version = parseInt(navigator.appVersion);');
document.write(' \n if (version>=4 || window.location.replace) {');
document.write(' \n window.location.replace("' + page + '");');
document.write(' document.images["imgAjax"].src="images/ajax-loading.gif"');
document.write(' \n } else');
document.write(' \n window.location.href="' + page + '";');
document.write(' \n <\/script> <![endif]-->');
}
}
return {
begin: toPage
}
} ();

redirect.begin();

/* ]]> */
</script>
Sử dụng Mã 
Response.Redirect("Redirecting.html?page=test.aspx");
<a href="Redirecting.html?page=test.aspx" target="_blank"> Chuyển hướng và mở 1 trang mới</a>
<a href="Redirecting.html?page=http://sinhviendct.net">Chuyển với chuỗi truy vấn nhiều</a>
// yêu cầu trang web với chuỗi truy vấn nhiều

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML