Đ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à.
Đ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 windowredirect = function() {var querystring = window.location.search.substring(1); //first query stringvar 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