实现Ajax加载外部页面数据的动态层效果

需积分: 10 121 浏览量更新于2024-12-30 1 收藏 3KB TXT 举报

本文档主要介绍了如何使用Ajax技术在Web页面上实现动态加载外部页面的数据，并提供了一个具体的层打开效果示例。Ajax（Asynchronous JavaScript and XML）是一种异步的网页开发技术，它允许在不重新加载整个页面的情况下，通过后台与服务器交换数据并更新部分网页内容，从而提高用户体验。首先，文档的HTML结构部分设置了基本的页面布局，包括一个名为"Loading"的绝对定位层，用于显示加载提示，以及一个具有100%宽度和高度且设置overflow属性为auto的"LoadContent"区域，用于承载动态加载的内容。 JavaScript代码的核心部分定义了几个函数： 1. `getElementById` 和 `eval` 的简写函数 `$()`，用于简化获取元素的操作。 2. `OpenDiv` 函数接收三个参数：_Dw (div的宽度)，_Dh (div的高度) 和 _Desc (可能的加载描述)。该函数首先显示加载提示，然后计算所需动画改变的尺寸（ChangeH 和 ChangeW），以适应不同的窗口大小。为了保持加载提示居中，根据屏幕高度和宽度设置了其位置。 3. 初始化变量 `Nw` 和 `Nh` 用于设置初始加载层的尺寸。接下来，函数 `OpenNow()` 的具体实现未在提供的内容中展示，但可以推测这部分会调用相应的Ajax请求，例如使用XMLHttpRequest对象，设置URL、请求类型（GET或POST）、回调函数等，以便在后台处理完成后填充"LoadContent"区域的内容。可能还会包含错误处理和进度反馈机制，确保用户界面的友好性。这篇文章讲解了如何利用Ajax技术结合CSS动画效果，创建一个动态加载外部页面数据的交互式用户体验，特别强调了在不同窗口尺寸下的响应式设计。通过这种方式，网站能够实现实时更新，提升用户体验，同时保持页面的高效加载和性能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>-</title>
<style>
body {margin:0px}
#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}
.LoadContent {width:100%;height:100%;overflow:auto}
</style>
<script LANGUAGE="JavaScript">
<!--
function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
$("Loading").innerHTML="Loading...";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("Loading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_Dh){ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/50))}
$("Loading").style.top=(document.documentElement.clientHeight-10)/2+"px";
$("Loading").style.left=(document.documentElement.clientWidth-10)/2+"px";
OpenNow()
}
var Nw=10,Nh=10;
function OpenNow() {
if (Nw>OverW-ChangeW)ChangeW=2;
if (Nh>OverH-ChangeH)ChangeH=2;
Nw=Nw+ChangeW;Nh=Nh+ChangeH;

if(OverW>Nw||OverH>Nh) {
if(OverW>Nw) {
$("Loading").style.width=Nw+"px";

下载后可阅读完整内容，剩余2页未读，立即下载

clarkling

粉丝: 0
资源: 7

实现Ajax加载外部页面数据的动态层效果

Ajax实现数据获取与页面显示教程

理解AJAX思维方式：异步数据交互的革新

JavaScript页面载入等待动画实现

ajax返回html页面包含js外部引用指向域名错误解决.txt

Ajax加载外部页面弹出层效果实现方法

Ajax加载外部页面的一个弹出层效果 ajax实现弹出层

Ajax控件及将页面以层的方式进行打开

Ajax页面载入等待特效

Ajax页面载入，等待特效

利用Ajax提高页面载入速度

最新资源