实用开发二：ajax实现页面无刷新加载另一个页面的内容

//  JScript 文件

var  AjaxLoadingImg = " http://js.168ec.com/zh-cn/APP_WEB/Share/Image/Ajaxloading.gif " ;
var  AjaxLoadingText = " 正在处理,请稍候...... " ;
var  AjaxErrImg = " http://js.168ec.com/zh-cn/APP_WEB/Share/Image/Err.gif " ;
var  AjaxErrText = " 对不起，服务器繁忙，请稍后再试！ " ;
var  AjaxNoDataText = " 没有数据记录！ " ;
var  AjaxOkClassName = " OKMsg " ;
var  AjaxErrClassName = " ErrMsg " ;
var  boolMyFlg = "" ;

// method 为GET或POST方法
// url Url地址
// data 一般在采用Post提交时需要提交的数据
// boolasync 同步或异步
// MsgDivID 显示消息的Div 编号
// DataDivID 显示内容的Div编号，如果内容需要显示在多个分开的Div 中，则每个Div用||PAGE||分割，内容用||AJAX||分割
// boolFlg 是否为验证用,如果是为验证用传一个bool为真的值
// fieldNameDivID 显示验证信息的消息DIV编号

function  LoadPageData(method, url,boolasync,data,MsgDivID,DataDivID,boolFlg,fieldNameDivID)  ... {

  var url=checkURL(url);
  var boolasync=boolasync;
  if (boolasync=="")
      boolasync=true;
  var boolFlg=boolFlg;
  if (boolFlg=="")...{
      boolFlg=false;
      boolMyFlg="";
  }
  var reqStr;
  
  // branch for native XMLHttpRequest object
  if (window.XMLHttpRequest) ...{
    reqStr = new XMLHttpRequest();
    if (MsgDivID!="")
    ...{
        document.getElementById( MsgDivID ).innerHTML = "<img src="" + AjaxLoadingImg + "" style="vertical-align:middle;" alt=""/>" + AjaxLoadingText;
        document.getElementById( MsgDivID ).style.display = "";
        document.getElementById( MsgDivID ).className=AjaxOkClassName;
        
    }

    reqStr.onreadystatechange = function ()
    ...{
        if (reqStr.readyState == 4) 
        ...{
        
        if (reqStr.status == 200) 
            
            ...{
                str = reqStr.responseText;
                
                var strTemp=str.split("||AJAX||");
                var divTemp=DataDivID.split("||PAGE||");
                
                if (str!="")...{
                
                    if (!boolFlg)
                    ...{
                        for (var i=0;i<strTemp.length;i++)
                        ...{
                            
                            if (strTemp[i]!="")
                                ...{
                                    if (divTemp[i]!="")
                                    ...{
                                        document.getElementById( divTemp[i] ).innerHTML=strTemp[i];
                                        document.getElementById( divTemp[i] ).className="";
                                        document.getElementById( divTemp[i] ).style.display = "";
                                    }
                                    if (MsgDivID!="")
                                        if (MsgDivID!=divTemp[i])
                                            document.getElementById( MsgDivID ).style.display = "none";
                                    
                                } 
                        }
                     }
                    else
                    ...{
                        if (strTemp[0]=="OK")...{
                            
                            document.getElementById( "right_" + fieldNameDivID ).innerHTML=strTemp[1];
                            boolMyFlg="OK";
                            OnLoadDiv(fieldNameDivID);
                            
                            document.getElementById( "right_" + fieldNameDivID ).style.display = "";
                            document.getElementById( "right_" + fieldNameDivID ).className="ok";
                            }
                        else...{
                            
                            document.getElementById( "wrong_words_" + fieldNameDivID ).innerHTML=strTemp[1];
                            boolMyFlg="NO";
                            OnLoadDiv(fieldNameDivID);
                            document.getElementById( "wrong_" + fieldNameDivID ).style.display = "";
                            document.getElementById( "wrong_" + fieldNameDivID ).className="wrong";
                        }
                    }
                }
                else
                ...{
                    if (MsgDivID!="")
                    ...{
                        document.getElementById( MsgDivID ).innerHTML="<img src="" + AjaxErrImg + "" style="vertical-align:middle;" alt=""/>"+str;
                        document.getElementById( MsgDivID ).className=AjaxErrClassName;
                        document.getElementById( MsgDivID ).style.display = "";
                    }
                }
                
                return ;
            } 
        else 
            ...{
                if (MsgDivID!="")
                ...{
                    document.getElementById( MsgDivID ).innerHTML = "<img src="" + AjaxErrImg + "" style="vertical-align:middle;" alt=""/>"+AjaxErrText;
                    document.getElementById( MsgDivID ).className=AjaxErrClassName;
                    document.getElementById( MsgDivID ).style.display = "";
                }
                return ;
            }
        }
    }
    
    reqStr.open(method, url, boolasync);
    
    if (data!="")...{
        reqStr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        reqStr.send(data);
    }
    else
        reqStr.send(null);
        
  } // branch for IE/Windows ActiveX version
  else if (window.ActiveXObject) ...{
    reqStr = new ActiveXObject("Microsoft.XMLHTTP");
    if (MsgDivID!="")
    ...{
        document.getElementById( MsgDivID ).innerHTML = "<img src="" + AjaxLoadingImg + "" style="vertical-align:middle;" alt=""/>" + AjaxLoadingText;
        document.getElementById( MsgDivID ).style.display = "";
        document.getElementById( MsgDivID ).className=AjaxOkClassName;
    }
    
    if (reqStr) ...{
      reqStr.onreadystatechange = function ()
    ...{
        
        if (reqStr.readyState == 4) 
        ...{
        if (reqStr.status == 200) 
            ...{
                str = reqStr.responseText;
                var strTemp=str.split("||AJAX||");
                var divTemp=DataDivID.split("||PAGE||");

                if (str!="")...{
                
                   if (!boolFlg)
                    ...{
                        for (var i=0;i<strTemp.length;i++)
                        ...{
                            
                            if (strTemp[i]!="")
                                ...{
                                    if (divTemp[i]!="")
                                    ...{
                                        document.getElementById( divTemp[i] ).innerHTML=strTemp[i];
                                        document.getElementById( divTemp[i] ).className="";
                                        document.getElementById( divTemp[i] ).style.display = "";
                                    }
                                    if (MsgDivID!="")
                                        if (MsgDivID!=divTemp[i])
                                            document.getElementById( MsgDivID ).style.display = "none";
                                    
                                } 
                        }
                     }
                    else
                    ...{
                        if (strTemp[0]=="OK")...{
                            
                            document.getElementById( "right_" + fieldNameDivID ).innerHTML=strTemp[1];
                            boolMyFlg="OK";
                            OnLoadDiv(fieldNameDivID);
                            
                            document.getElementById( "right_" + fieldNameDivID ).style.display = "";
                            document.getElementById( "right_" + fieldNameDivID ).className="ok";
                            }
                        else...{
                            
                            document.getElementById( "wrong_words_" + fieldNameDivID ).innerHTML=strTemp[1];
                            boolMyFlg="NO";
                            OnLoadDiv(fieldNameDivID);
                            document.getElementById( "wrong_" + fieldNameDivID ).style.display = "";
                            document.getElementById( "wrong_" + fieldNameDivID ).className="wrong";
                        }
                    }
                }
                else
                ...{
                    if (MsgDivID!="")
                    ...{
                        document.getElementById( MsgDivID ).innerHTML="<img src="" + AjaxErrImg + "" style="vertical-align:middle;" alt=""/>"+str;
                        document.getElementById( MsgDivID ).className=AjaxErrClassName;
                        document.getElementById( MsgDivID ).style.display = "";
                    }
                    
                }
                
                return ;
            } 
        else 
            ...{
                if (MsgDivID!="")
                ...{
                    document.getElementById( MsgDivID ).innerHTML = "<img src="" + AjaxErrImg + "" style="vertical-align:middle;" alt=""/>"+AjaxErrText;
                    document.getElementById( MsgDivID ).className=AjaxErrClassName;
                    document.getElementById( MsgDivID ).style.display = "";
                }
                return ;
            }
        }
    }
      reqStr.open(method, url, boolasync);
      
    if (data!="")...{
        reqStr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        reqStr.send(data);
    }
    else
        reqStr.send();
    }
  }
}

// 查找关键字函数
function  findKey(stringKey,chrKey) ... {

    var str1 = stringKey
    var s = str1.indexOf(chrKey);
    return(s);

}

// Url编码及地址随机函数
function  checkURL(url)
... {
    if (findKey(url,"?")!=-1)
        if (findKey(url,"&")!=-1)
        ...{
            var urlTemp=url.split("&");
            var strTemp="";
            for (var i=0;i<urlTemp.length;i++)
            ...{
                if (findKey(url,"=")!=-1)
                    if (i==(urlTemp.length-1))
                        strTemp=strTemp+urlTemp[i].split("=")[0]+"="+escape(urlTemp[i].split("=")[1]);
                    else
                        strTemp=strTemp+urlTemp[i].split("=")[0]+"="+escape(urlTemp[i].split("=")[1])+"&";
                else
                    strTemp=strTemp+urlTemp[i];
            }
            url=strTemp;
            url += "&randnum=" + Math.random();
            return url;
        }
        else
        ...{
            url += "&randnum=" + Math.random();
            return url;
        }
    else
        ...{
            url += "?randnum=" + Math.random();
            return url;
        }
}

// 对采用eWebEditor编辑器的对象赋值

function  GeteWebEditorValue(fileName,ObjeWebEditorID)
... {
    document.getElementById(fileName).value=ObjeWebEditorID.getHTML();
}

// 将表单转换为字符串

function  formToRequestString(form_obj)
... {
    var query_string='';
    var and='';
    //alert(form_obj.length);
    for (i=0;i<form_obj.length ;i++ )
    ...{
        e=form_obj[i];
            
        if (e.name!='')
        ...{
            if (e.type=='select-one')...{
                element_value=e.options[e.selectedIndex].value;
            }
            else if (e.type=='checkbox' || e.type=='radio')...{
                if (e.checked==false)...{
                    continue; 
                }
                element_value=e.value;
            }
            
        else...{
            element_value=e.value;
        }
        query_string+=and+e.name+'='+escape(element_value.replace("&","&#38;"));
        and="&"
        }
    }
    return query_string;
}

// 初始化提示信息框函数
function  OnLoadDiv(objName)
... {
    document.getElementById("normal_" + objName).style.display = 'none';
    document.getElementById("awake_" + objName).style.display = 'none';
    document.getElementById("right_" + objName).style.display = 'none';
    document.getElementById("wrong_" + objName).style.display = 'none';
}


/**/ /*
==================================================================
通过url传值设置某ID的值
sType 当值为Val时返回值,当为Doc时给对像赋值
==================================================================
*/

function  SetElementObjValue(sElementID,sType,sObject) ... {    
    str=location.href.toString().toLowerCase();
    var num=str.indexOf("?");
    if (num>0)
    ...{
        strtemp=str.split("?")[1];
        var arrtmp=strtemp.split("&");
        for(i=0;i<arrtmp.length;i++)
        ...{
            var arrtmpi=arrtmp[i];
            num=arrtmpi.indexOf("=");
            
            if (num>0)
            ...{
                if ((arrtmpi.split("=")[0]).toLowerCase()==(sElementID).toLowerCase())
                ...{
                    if (sType=="Val")
                        return (arrtmpi.split("=")[1]).split("#")[0];
                    else
                        document.getElementById(sObject).value=(arrtmpi.split("=")[1]).split("#")[0];
                    break;
                }
            }
            else
            ...{
                if (sType=="Val")
                    return "";
                else
                    document.getElementById(sObject).value=0;
            }
        }
    }
    else
    ...{
        if (sType=="Val")
            return "";
        else
            document.getElementById(sObject).value=0; 
    }
}

 调用示例：

在页面上插入：

<script type="text/javascript" src="/App_Web/Share/上面的.js"></script>

<script language="javascript" type="text/javascript" >
    LoadPageData("GET", "/App_web/card/card.aspx?id=" + SetElementObjValue("id","Val"), "","", "relation_card","relation_card");
    LoadPageData("GET", "/App_web/Share/Contact_Info.aspx?id=" + SetElementObjValue("id","Val"), "","", "ContactInfo","ContactInfo");
    LoadPageData("GET", "/App_web/Share/Detail_Info.aspx?id=" + SetElementObjValue("id","Val"), "","", "DetailsInfo","DetailsInfo");
    LoadPageData("GET", "/App_web/Share/Message_business.aspx?inid=" + SetElementObjValue("id","Val") + "&messagetype=business&bizurl=<%=HttpUtility.UrlEncode(localurl) %>","","","","listmsg||PAGE||LeaveMessage");
</script>

 

效果：http://www.168ec.com/App_web/Share/Show_business.aspx?id=399213