左栏导航 右栏内容显示

一、 核心iframe

方法一:改变元素显示、隐藏状态

左栏导航一
左栏导航二

代码分析:其中0.html页面是右栏页面的初始页面,点击左栏导航一 ,右栏显示1.html。点击左栏导航二,右栏显示2.html

运行结果如下:

左栏导航 右栏内容显示_第1张图片

左栏导航 右栏内容显示_第2张图片

方法二:关键词:target name


运行结果如下:

左栏导航 右栏内容显示_第3张图片

点击统计报表:

左栏导航 右栏内容显示_第4张图片

二 核心ajax

AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。

html代码:

#content是右栏主页,默认页面。再编写3个页面,questionA,questionB,questionC,分别为右栏刷新的页面。




  

欢迎使用后台管理系统

使用指南: 默认页面内容……

jquery代码段如下:

代码分析:当服务器一切准备就绪,就像右侧内容的#content的div中添加内容。xmlHTTP.responseText为服务器返回的页面。

运行结果如下:


左栏导航 右栏内容显示_第5张图片


你可能感兴趣的:(jQuery,iframe,ajax)