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形式是一样的所以就复制一样的 (比较懒 嘻嘻) 这四个就是点击按钮显示的内容

上面如果有什么内容不对的地方 还请大神批评指正   小白 会虚心接受  ....

ajax 选项卡的更多相关文章

  1. easyui源码翻译1.32--Tabs(选项卡)

    前言 使用$.fn.tabs.defaults重写默认值对象.下载该插件翻译源码 选项卡显示一批面板.但在同一个时间只会显示一个面板.每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他 ...

  2. 第二百节,jQuery EasyUI,Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  3. VS2013 蛋疼的“AJAX Control Toolkit”安装过程

    1.AJAX Control Toolkit 下载问题 方法一. 在vs2013中 工具->NuGet程序包管理器->管理解决方案的NuGet程序包 搜索 ajax z找到 AjaxCon ...

  4. jquery.UI.tabs

    今天对jquery UI的tabs进行了进一步的了解,目的是想把死板的切换效果变得动感点,不过经过这进一步的了解,发现它并不合适或都说并不能实现我想要的效果,我想要的效果就是类似淘宝商城的banner ...

  5. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  6. EasyUI整理学习

    参考博客: https://www.cnblogs.com/adc8868/p/6647680.html http://www.jeasyui.com/documentation/# http://w ...

  7. jquery ui tabs详解(中文)

    1 属性1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succes ...

  8. asp.net ajax控件选项卡控件的选项卡的动态显示与隐藏问题

    if (dq_gly.Yhm != "admin") { this.TabContainer1.Tabs[0].Visible = false; this.TabContainer ...

  9. 原生AJAX入门讲解(含实例)

    相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...

随机推荐

  1. D2.Reactjs 操作事件、状态改变、路由

    下面内容代码使用ES6语法 一.组件的操作事件: 1.先要在组件类定义内定义操作事件的方法,如同event handler.若我需要监听在组件内的Button的点击事件onClick,首先定义监听方法 ...

  2. django:field字段类型

    字段类型(Field types) AutoField 它是一个根据 ID 自增长的 IntegerField 字段.通常,你不必直接使用该字段.如果你没在别的字段上指定主 键,Django 就会自动 ...

  3. run VLC in root

    sed -i 's/geteuid/getppid/' /usr/bin/vlc

  4. kendo ui之grid列表

    1.test_grid.jsp <html><head> <%@ include file="/WEB-INF/jsp/common/top.jsp" ...

  5. git pull错误

    1. Pull is not possible because you have unmerged files. 症状:pull的时候 $ git pull Pull is not possible ...

  6. 利用python实现爬虫爬取某招聘网站,北京地区岗位名称包含某关键字的所有岗位平均月薪

    #通过输入的关键字,爬取北京地区某岗位的平均月薪 # -*- coding: utf-8 -*- import re import requests import time import lxml.h ...

  7. 虚拟机下Linux读取USB设备的问题虚拟机下Linux无法读取USB设备的解决方案

    我们在虚拟机中识别USB设备有三种情况导致Linux系统不能读取到USB设备: 1. .当虚拟机的USB服务没有开启的时候 2. 若虚拟机的USB连接的设置选项没有设置好 3. Widows抢先一步, ...

  8. Android数据库 — — —查询数据

    package com.example.datebasetest; import android.content.ContentValues;import android.database.Curso ...

  9. http数据返回值

    HTTP 400 - 请求无效HTTP 401.1 - 未授权:登录失败HTTP 401.2 - 未授权:服务器配置问题导致登录失败HTTP 401.3 - ACL 禁止访问资源HTTP 401.4 ...

  10. 【Python】一、除法问题及基本操作(逻辑与,if替代switch)及支持中文打印

    1.查看版本 C:\Users\XXX>python -V Python 2.7.1 2.除法问题(不要整除) from __future__ import division tmp=0x3ec ...