AJAX的一个小东西--转贴

發表於   |   分類於
出处:蓝色理想

作者:hubro


www.hubro.net/spank.aspx
还是老外写得好
用AJAX请求XML文件,返回XML再处理,生成HTML



…
xmlhttp.open(sMethod, sURL, true); 这个true才是不卡的原因
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && !bComplete)//再才发现,为什么别人写的不卡了,原因在这,请求完成后才处理
…

顺便问问网速慢的卡不

function ajaxObj()
{
  var xmlhttp, bComplete = false;
  try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { try { xmlhttp = new XMLHttpRequest(); }
  catch (e) { xmlhttp = false; }}}
  if (!xmlhttp) return null;
  this.connect = function(sURL, sMethod, fnDone)
  {
    if (!xmlhttp) return false;
    bComplete = false;
    sMethod = sMethod.toUpperCase();

    try
    {
      if (sMethod == "GET")
      {
        xmlhttp.open(sMethod, sURL, true);
        sVars = "";
      }
      else
      {
        xmlhttp.open(sMethod, sURL, true);
        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      }
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && !bComplete)//再才发现,为什么别人写的不卡了,原因在这,请求完成后才处理
        {
          bComplete = true;
          fnDone(xmlhttp);
        }};
      xmlhttp.send(sVars);
    }
    catch(z) { return false; }
    return true;
  };
  return this;
}
代码分析
var p=15;//初始每页大小
var page=1;//初始当前页
var count=0;//初始请求的总数
var q="";//是不是有查询
var all_count=0;//初始DATATABLE的总数,由XML文件的COUNT返回
var page_count=0;//初始分页数
var t_out=false;
function replaceit(str)
{
    var re;
    re=/</g;
    str=str.replace(re,"&lt;");
    re=/>/g;
    str=str.replace(re,"&gt;");
    return str;
}

function ajaxObj()//完成一个XMLHTTP请求,并处理
{
  var xmlhttp, bComplete = false;
  try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { try { xmlhttp = new XMLHttpRequest(); }
  catch (e) { xmlhttp = false; }}}
  if (!xmlhttp) return null;
  this.connect = function(sURL, sMethod, fnDone)
  {
    if (!xmlhttp) return false;
    bComplete = false;
    sMethod = sMethod.toUpperCase();

    try
    {
      if (sMethod == "GET")
      {
        xmlhttp.open(sMethod, sURL, true);
        sVars = "";
      }
      else
      {
        xmlhttp.open(sMethod, sURL, true);
        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      }
      xmlhttp.onreadystatechange = function() {//处理在这呢
        if (xmlhttp.readyState == 4 && !bComplete)
        {
          bComplete = true;
          fnDone(xmlhttp);
        }};
      xmlhttp.send(sVars);
    }
    catch(z) { return false; }
    return true;
  };
  return this;
}

function http_send(url)//发出添加请求
{
    var request = new ajaxObj();
    var requestComplete = function (oXML) {
        //o("spank_body").innerHTML="Loading…";
    };
    request.connect(url, "POST", requestComplete);
}
function xml_dom() { //返回一个XML对像,没用了
    var xmldom;
    if (window.ActiveXObject){
         xmldom = new ActiveXObject("Microsoft.XMLDOM");
    } else {
        if (document.implementation && document.implementation.createDocument) {
         xmldom = document.implementation.createDocument("","doc",null);
        }
    }
    xmldom.async = false;
    xmldom.resolveExternals = false;
    xmldom.validateOnParse = false;
    xmldom.preserveWhiteSpace = true;
    return xmldom;
}

function o(obj)//获取一个元素
{
return document.getElementById(obj)
}

function spank_it()//添加一个新记录
{
var ss1=o("select").value;
var ss2=o("talk").value;
url="?inc=new&s="+ss1+"&t="+ss2;
http_send(url);
//document.write(url)
q="";
first();
o("talk").value="";
return false;
}
function settimeout()//发出对XML文件的请求
{
//var objDom = xml_dom()
url="?inc=list&q="+q+"&page=" +page+"&p="+p+"&s="+Math.random();

//objDom.load(url);

var request = new ajaxObj();
var objDom;
    var requestComplete = function (oXML) {
        responsexml(oXML.responseXML);
    };
    request.connect(url, "GET", requestComplete);
    //objDom(objDom)

}
function responsexml(objDom)//输出XML
{
    var span_td=o("spank_body");
    var items=objDom.getElementsByTagName("item");
all_count=objDom.getElementsByTagName("count").item(0).firstChild.nodeValue;
str="<table width=90%  align=right border=0 align=center cellpadding=4 cellspacing=0>";
for (var i=0; i<items.length; i++)
      {
      str1=items[i].childNodes[0].firstChild.nodeValue;
      str2=items[i].childNodes[1].firstChild.nodeValue;
      str3=items[i].childNodes[2].firstChild.nodeValue;
      str+="<tr><td align=right width=120 class=sp_title>"+replaceit(str1)+":</td><td class=sp_content>"+replaceit(str2)+"</td></tr>";

      }
      count=items.length;
      str+="</table>";
      span_td.innerHTML=str;
      var pspan=o("page_span1");
      if(all_count % p>0)
      page_count=Math.floor(all_count / p)+1;
      else
      page_count=all_count / p;
      pspan.innerHTML=page_count;
}
function re_load()//初始化,当搜索和分页时
{
    q="";
    first();
}

function set_p(value)//设置每页大小,重新初始化
{
p=value;
load_spank();
}
function change_pagetxt(num)//更改分页显示
{
    o("page_span").innerText=num;
}
/分页,就不多说了/
function next()
{
if(count==p)
{
page+=1;
load_spank();
}
change_pagetxt(page);
}
function last()
{
if(page>1)
{
page-=1;
load_spank();
}
change_pagetxt(page);
}
function first()
{
    page=1;
load_spank();
change_pagetxt(page);
}

function end()
{
    page=page_count;
load_spank();
change_pagetxt(page);
}

function search_spank()
{
    q=o("q").value;
    load_spank();
    return false;
}
function load_spank()
{
    t_out=false;
    o("spank_body").innerHTML="Loading…";
    settimeout();
}


关键在这里
function settimeout()
{
//var objDom = xml_dom()
url="?inc=list&q="+q+"&page=" +page+"&p="+p+"&s="+Math.random();

//objDom.load(url);

var request = new ajaxObj();
var objDom;
    var requestComplete = function (oXML) {//在完成请求时执行该方法
        responsexml(oXML.responseXML);
    };
    request.connect(url, "GET", requestComplete);
    //objDom(objDom)

}