通过 ajax 将多个页面集中一个页面显示

zoukankan html css js c++ java

通过 ajax 将多个页面集中一个页面显示

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>统一平台</title>
<link type="text/css" href="/css/redmond/ui.all.css" rel="stylesheet" />
<link href="/css/css.css" rel="stylesheet" type="text/css" />
</head>

<body style="padding:20px">
<div id="test1"></div><br />
<div id="test"></div>

</body>
</html>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

var baseUrl = "";

var divObj = new Object();

divObj.url = new Array();
//divObj.url.push("/index.php/Service/Salaallot");
divObj.url.push("/index.php/Service/Fault");
divObj.url.push("/index.php/Service/Salashelve");
divObj.url.push("/index.php/Service/Sbch");
divObj.url.push("/index.php/Service/Servicesend");

divObj.name = new Array();
//divObj.name.push("分配资源");
divObj.name.push("故障工单");
divObj.name.push("上架工单");
divObj.name.push("变更工单");
divObj.name.push("退机工单");

//创建DIV,DIV1....DIV5
var ajax = createAjax();
ajax.url = [];
ajax.divID = [];
for(var i=0;i<divObj.url.length;i++)
{
    var bDiv = document.createElement("div");
    bDiv.setAttribute("id","div_" + i.toString());
    if(![-1,])
        bDiv.setAttribute("cssText","98%;height:15%;float:left;");
    else
        bDiv.setAttribute("style","98%;height:15%;float:left;");
    document.body.appendChild(bDiv);

    var tDiv = document.createElement("div");
    tDiv.setAttribute("id","div_" + i.toString() + "_t");
    if(![-1,])
        bDiv.setAttribute("cssText","100%;height:20%;float:left;");
    else
        bDiv.setAttribute("style","100%;height:20%;float:left;");
    bDiv.appendChild(tDiv);
    tDiv.innerHTML = "<b><a target='_blank' href='"+ divObj.url[i] +"'>" + divObj.name[i] + "</a></b>";

    var fDiv = document.createElement("div");
    fDiv.setAttribute("id","div_" + i.toString() + "_f");
    if(![-1,])
        bDiv.setAttribute("cssText","98%;height:80%;float:left;");
    else
        bDiv.setAttribute("style","98%;height:80%;float:left;");
    bDiv.appendChild(fDiv);

    ajax.url.push( baseUrl + divObj.url[i] );
    ajax.divID.push( "div_" + i.toString() + "_f" );

    ajaxExec.call(ajax,handleFunc,divObj.url.length);

}

function handleFunc()
{
    var flag = false
    var data = html2node(this.request.responseText);
    for (var i=0;i<data.childNodes.length;i++)
    {
        if(data.childNodes[i].nodeName=="#text") continue;
        if (this.ajaxID!==0)
        {
            if (data.childNodes[i].nodeName==="TABLE")
            {
                handleFuncMain(data,i,this,1);
                break;
            }
        }else{
            if (data.childNodes[i].nodeName==="DIV")
            {
                var table = data.childNodes[i].getElementsByTagName("table");
                handleFuncMain(data,i,this,table[1]);
                break;
            }
        }
    }
}

function handleFuncMain(data,i,obj,value)
{
    if (value==1)
    {
        var tr = data.childNodes[i].getElementsByTagName("tr");
        var htmlObj = data.childNodes[i];
    }else{
        var htmlObj = !-[1,] ? value : value.childNodes[1];
        var tr = htmlObj.getElementsByTagName("tr");
    }
    var trLength = tr.length,newTrLength = tr.length;
    for(var k=trLength.length;newTrLength>4;k++)
    {
        htmlObj.deleteRow(newTrLength-1);
        newTrLength = newTrLength - 1;
    }
    var a = htmlObj.getElementsByTagName("a");
    for (var j=0;j<a.length;j++)
    {
        if (!a[j].getAttribute("onclick") && a[j].getAttribute("href").indexOf("javascript")==-1)
            a[j].setAttribute("target","_blank");
    }
    document.getElementById(obj.divID[obj.ajaxID]).innerHTML = "<table cellspacing=\"1\" cellpadding=\"0\" class=\"table01\">" + htmlObj.innerHTML + "</table><br />";
}

/************************************************************************
*  作用：控制 ajax 异步程序按顺序执行
*  例子： ajaxExec.call(ajax,handleFunc,divObj.url.length);
*  参数1: ajax 对象
*  参数2: onreadystatechange 事件触发事件
*  参数3: 需多次执行的次数或是重新执行异步程序的标识
***********************************************************************/
function ajaxExec()
{
    var _this = this;
    var _handleFunc = arguments[0];
    if (arguments.length==2)
    {
        if (typeof(arguments[1])==="number")
        {
            this.ajaxIDLength = arguments[1];
        }else if (arguments[1]==="afresh"){
            this.ajaxID = 0;
            this.first = undefined;
        }
    }

    if (this.first==undefined)
    {
        this.first = true;
        this.ajaxID = 0;
        this.request.open("GET", this.url[0], true);
        this.request.onreadystatechange = function(){
            ajaxExec.call(_this,_handleFunc);
        };
        this.request.send(null);
    }else{
        if (this.ajaxIDLength!=this.url.length)
            return;
        this.first = false;
        if (this.request.readyState == 4)
        {
            if (this.request.status == 200)
            {
                _handleFunc.call(this);
            }
            if (this.ajaxID===this.url.length-1)
                return;

            this.ajaxID = this.ajaxID + 1;
            this.request.open("GET", this.url[this.ajaxID], true);

            this.request.onreadystatechange = function(){
                ajaxExec.call(_this,_handleFunc);
            };
            this.request.send(null);
        }

    }

}

function createAjax()
{
    var request ;
    try
    {
        request = new XMLHttpRequest();
    }catch(err){
        try
        {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(error){
            request = new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    if(!request)
    {
        alert("createAjax Error!");
    }else{
        this.request = request;
        return this;
    }
}

function html2node(s) {
    var d = document.createElement('div');
    d.innerHTML = s;
    if (d.childNodes.length == 1)
        return d.childNodes[0];
    var df = document.createDocumentFragment();
    while (d.firstChild)
        df.appendChild(d.firstChild);
    return df;
}

function accept(flt_id,fd_id){
    var s=confirm("确认接单？");
    if(s==true){
        window.location.href='/index.php/service/fault/dealFault?act=accept&flt_id='+flt_id+'&fd_id='+fd_id;
    }else{
        return;
    }
}

function handle(id)
{
    if( confirm("你确定要受理？") )
    {
        var url = '/index.php/service/sbch/oinsert/id/' + id;
        $.ajax({
           type: "GET",
           url: url,
           success: function(data){
             if(data!=0 && data!=-1)
             {
                $("#a_" + id).html("处理中");
                $("#a_" + id).attr("href","/index.php/service/sbch/form/id/" + id);
                $("#a_" + id + "_2").empty();
                var td = $("#tr_" + id + " td");
                td.eq(6).html("处理中");
                td.eq(7).html(data);
                window.location.href = "/index.php/service/sbch/form/id/" + id;
             }else if(data==0){
                alert('请登录再进行操作！');
             }else{
                alert('程序出错！');
             }
           }
        });

    }
}

String.prototype.trim = function() {
    var str = this,
    str = str.replace(/^\\s\\s*/, ''),
    ws = /\\s/,
    i = str.length;
    while (ws.test(str.charAt(--i)));
    return str.slice(0, i + 1);
}

setInterval(
    function(){
        ajaxExec.call(ajax,handleFunc,"afresh");
    },10000
);

</script>

查看全文

相关阅读:
Atitit sql计划任务与查询优化器统计信息模块
 Atitit 数据库的事件机制触发器与定时任务attilax总结
 Atitit 图像处理知识点体系知识图谱路线图attilax总结 v4 qcb.xlsx
Atitit 图像处理深刻理解梯度原理计算.v1 qc8
Atiti 数据库系统原理与数据库方面的书籍 attilax总结 v3 .docx
Atitit Mysql查询优化器存取类型范围存取类型索引存取类型 AND or的分析
 Atitit View事件分发机制
 Atitit 基于sql编程语言的oo面向对象大规模应用解决方案attilax总结
 Atitti 存储引擎支持的国内点与特性attilax总结
 Atitit 深入理解软件的本质 attilax总结软件三原则"三次原则"是DRY原则和YAGNI原则的折

原文地址：https://www.cnblogs.com/chy1000/p/1845678.html