Ajax其实就是交互式网页应用开发技术包括以下几个方面:
1.XHTML和CSS
2.使用DOM作为动态显示和交互
3.使用XML和XSLT 做数据交互和操作 (这些完全不太懂)
4.使用XMLHttpRequest进行异步数据
5.使用js将它们绑定在一起
说一点js原声ajax
ajax: 一种请求数据的方式,不需要刷新整个页面
ajax的技术核心是:XMLHttpRequest对象
ajax请求的过程: 创建XMLHttpRequest对象,链接服务器,发送请求,接收响应数据
下面是js 封装的一个函数 ajax请求:
function toUrl(urls, data) {
data.t = new Date().getTime();
var arr = [];
for (var i in data) {
var str = i + "=" + data[i];
arr.push(str);
}
urls = urls + "?" + arr.join("&");
return urls;
}
function fnAjax(obj) { //封装ajax方法
var data = obj.data || {}; //data也为对象里面的可选值
var url = toUrl(obj.url, data); //最终的请求链接
var succFn = obj.succFn || false; //函数也属于obj对象参数
var failFn = obj.failFn || false;
//请求方式
var type = obj.type || "get";
//**********第一步**********//
if (window.XMLHttpRequest) {
var ajax = new XMLHttpRequest() //现代浏览器
} else {
var ajax = new ActiveXObject("Microsoft,XMLHTTP"); //IE8一下版本支持
}
//*********第二步********//
if (type == "get") { //get请求是通过URl参数提交到服务器
ajax.open("get", url, true);
ajax.send(null);
} else { //post请求是通过将数据作为send的参数提交到服务器
var urlArr = url.split("?");
alert(urlArr);
ajax.open("post", urlArr[0], true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//客户端像服务器取得某个网页的时候，必须发送一个HTTP协议的头文件，
//告诉服务器客户端要下载什么信息以及相关的参数
ajax.send(urlArr[1]);
}
//**********第三步************//
ajax.onreadystatechange = function() {
//在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status 是状态码，状态码以2开头的都是成功，304表示从缓存中获取，上面的代码在每次请求的时候都加//入了随机数，所以不会从缓存中取值，故该状态不需判断。
//两个状态,1.发送状态,
if (ajax.readyState == 4) {
//值为4发送成功
if (ajax.status >= 200 && ajax.status <= 207 || ajax.status == 304) {
if (succFn) { //可选参数,有的话弹出请求的内容
succFn(ajax.responseText)
//responseText：响应返回的主体内容，为字符串类型；responseXML：如果响应的内容类型是 "text/xml" 或 "application/xml"，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型；
}
} else { //请求失败,返回失败的状态码
if (failFn) {
failFn(ajax.status);
}
}
}
}
}
上面说了这么多 还是回归正题:ajax 在选项卡的用法,(上面有错的地方还希望大神批评指正, 我是菜鸟~~~)
html:
<div id="wrap">
<div class="tabbox" id="ajaxtab">
<ul class="tabbtn">
<li class="current"><a href="1.html">第一个按钮</a></li>
<li><a href="2.html">第二个按钮</a></li>
<li><a href="3.html">第三个按钮</a></li>
<li><a href="4.html">第四个按钮</a></li>
</ul>
<!--tabbtn end-->
<div class="loading"><img src="data:images/loading.gif" width="40" height="40" alt="页面加载" /></div>
<div class="tabcontent"></div>
<!--tabcontent end-->
</div>
</div>
样式css:
* { margin: 0;padding: 0; list-style-type: none;}
a,img {border: 0;}
body {font: 12px/180% Arial, Helvetica, sans-serif, "宋体";}
a { color: #333; text-decoration: none;}
a:hover {color: #3366cc;text-decoration: underline;}
#wrap{width: 760px;margin: 0 auto; }
.tabbox { width: 432px;margin: 20px auto; position: relative;height: 171px;overflow: hidden; }
.tabbox .tabbtn {height: 30px;background: url(images/tabbg.gif) repeat-x;border-left: solid 1px #ddd; border-right: solid 1px #ddd;}
.tabbox .tabbtn li{ float: left; margin: 0 0 0 -1px; position: relative;}
.tabbox .tabbtn li a, .tabbox .tabbtn li span {
display: block;
float: left;
height: 30px;
line-height: 30px;
overflow: hidden;
width: 108px;
text-align: center;
font-size: 12px;
cursor: pointer;
}
.tabbox .tabbtn li.current {
border-left: solid 1px #d5d5d5;
border-right: solid 1px #d5d5d5;
border-top: solid 3px #ff6600;
}
.tabbox .tabbtn li.current a,
.tabbox .tabbtn li.current span {
height: 27px;
line-height: 27px;
background: #fff;
color: #3366cc;
font-weight: 800;
}
.tabbox .loading {
height: 40px;
width: 432px;
text-align: center;
position: absolute;
left: 0;
top: 100px;
}
.tabbox .tabcontent {
padding: 10px;
border-width: 0 1px 1px 1px;
border-color: #ddd;
border-style: solid;
}
.tabbox .tabcontent li {
height: 24px;
line-height: 24px;
overflow: hidden;
}
.tabbox .tabcontent li span {
margin: 0 10px 0 0;
font-family: "宋体";
font-size: 12px;
font-weight: 400;
color: #ddd;
}
js:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//************************ajax 选项卡
$('#ajaxtab .tabbtn li a').click(function() {
var thiscity = $(this).attr("href");
$("#ajaxtab .loading").ajaxStart(function() {
$(this).show(); //请求开始 展示信息
});
$("#ajaxtab .loading").ajaxStop(function() {
$(this).hide(); //请求结束后隐藏信息
});
$('#ajaxtab .tabcontent').load(thiscity);
$('#ajaxtab .tabbtn li a').parents().removeClass("current");
$(this).parents().addClass("current");
return false;
});
$('#ajaxtab .tabbtn li a').eq(0).trigger("click");
</script>
1.html:
<ul>
<li><span>▪</span><a href="#" title="第一个">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>
</ul>
2.html:
<ul>
<li><span>▪</span><a href="#" title="第一个">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>
</ul>
3.html:
<ul>
<li><span>▪</span><a href="#" title="第一个">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
<li><span>▪</span><a
href="#" title="第一个">jquery soChange 切换插件 支持焦点图片切换 选项卡切换
带按钮与分页索引按钮切换</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>
</ul>
4.html:
<ul>
<li><span>▪</span><a href="#" title="第一个">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
<li><span>▪</span><a
href="#" title="第一个">jquery soChange 切换插件 支持焦点图片切换 选项卡切换
带按钮与分页索引按钮切换</a></li>
<li><span>▪</span><a href="#" title="第一个">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>
</ul>
上面四个html形式是一样的所以就复制一样的 (比较懒 嘻嘻) 这四个就是点击按钮显示的内容
上面如果有什么内容不对的地方 还请大神批评指正 小白 会虚心接受 ....