Skip to content

Zoc Ajax开发包(核心) ver 0.1.0

· 技术 · 1 分钟阅读

对前面的版本进行了修正，主要有:将Change函数针对不同浏览器做了优化，使得对大多数浏览器有效;对主对象进行了OO封装，定义了net名字空间，从而大幅减少了使用时的代码。可从测试用例中看出简化的情况，只需一个new~。重载了处理函数，使得在客户自定义处理函数中要调用返回的参数只需用this.来引用。

//名字空间对象
var net=new Object();
//未初始化状态
net.UNINITIALIZED=0;
//装载中
net.LOADING=1;
//已装载
net.LOADED=2;
//已中止
net.INTERACTIVE=3;
//已完成
net.COMPELETE=4;
//HTTP完成
net.HTTP_OK=200;

//构造函数
//method:请求方式，GET或POST
//url:请求的url
//onload:请求完成后执行的回调函数，将传入参数this
//onerror:错误后执行的回调函数，将传入参数this
net.AjaxRequest=function(method,url,asyn,onload,onerror)
{
 //初始化传入的构造变量
 this.url=url;
 this.onload=onload;
 this.method=method;
 this.asyn=asyn;
 this.onerror=(onerror)?onerror:this.DefaultError;
 //XMLHttpRequest对象
 this.xmlHttp=null;
 //开始请求
 this.StartRequest();
}

//获取XMLHttpRequest对象
net.AjaxRequest.prototype.GetXmlHttp=function()
{
 if (window.ActiveXObject)
 {
  this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if (window.XMLHttpRequest)
 {
  this.xmlHttp = new XMLHttpRequest();
 }
}

//请求状态变化处理函数
net.AjaxRequest.prototype.onReadyState=function()
{
 //取得这一时刻的XMLHttpRequest对象副本
 var xmlhttp=this.xmlHttp;
 var ready=xmlhttp.readyState;
 //判断是否请求完成
 if(ready==net.COMPELETE)
 {
  //判断请求结果
  var status=xmlhttp.status;
  if(status==net.HTTP_OK||status==0)
  {
   //执行客户的自定义请求完成处理函数
   this.onload.call(this);
  }
  else
  {
   //执行错误处理函数
   this.onerror.call(this);
  }
 }
}

//开始请求
net.AjaxRequest.prototype.StartRequest=function()
{
 //获取XMLHttpRequest对象
 this.GetXmlHttp();
 //如果获取XMLHttpRequest对象成功
 if(this.xmlHttp)
 {
  try
  {
   //获取自身的一个副本
   var loader=this;
   //设置状态变化回调函数
   this.xmlHttp.onreadystatechange = function()
   {
    //请求状态变化处理函数，传入this
    loader.onReadyState.call(loader);
   }
   //打开连接，开始请求
   this.xmlHttp.open(this.method,this.url,this.asyn);
   //模拟浏览器
   this.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //发送请求
   this.xmlHttp.send(null);
  }
  catch(err)
  {
   //错误处理
   this.onerror.call(this);
  }
 }
}

//默认错误处理函数
net.AjaxRequest.prototype.DefaultError=function()
{
 alert("发生错误!"+"\
readyState:"+this.xmlHttp.readyStatus+"\
state:"+this.xmlHttp.status+"\
headers:"+this.xmlHttp.getAllResponseHeaders());
}

function AddURLParam(sURL,sParamName,sParamValue)
{
 sURL+=((sURL.indexOf("?")==-1?"?":"&"));
 sURL+=encodeURIComponent(sParamName)+"="+encodeURIComponent(sParamValue);
 return sURL;
}

function Change(target,content)
{
 if(!target||!content)
 {
  DefaultError("无目标");
 }
 else
 {
  SetInnerHTML(document.getElementById(target),content);
 }
}

function SetInnerHTML(el, htmlCode)
{
 var ua = navigator.userAgent.toLowerCase();
 if(ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0)
 {
  htmlCode = '<div style="display:none">for IE</div>' + htmlCode;
  htmlCode = htmlCode.replace(/<script([^>]*)>/gi,'<script$1 defer>');
  el.innerHTML = '';
  el.innerHTML = htmlCode;
  el.removeChild(el.firstChild);
 }
 else
 {
  var el_next = el.nextSibling;
  var el_parent = el.parentNode;
  el_parent.removeChild(el);
  el.innerHTML = htmlCode;
  if (el_next)
  {
   el_parent.insertBefore(el, el_next);
  }
  else
  {
   el_parent.appendChild(el);
  }
 }
}

测试用例:

index.html

<html>
<head>
<title>Test Zoc Ajax 0.1.0</title>
</head>
<body>
<script language="JavaScript" type="text/javascript" src="inc/AjaxRequest.js"></script>
<div id="zone">Loading...</div>

<script language="JavaScript" type="text/javascript">
 var ajax=new net.AjaxRequest("GET","test.htm?time="+new Date(),true,loaded);
 function loaded()
 {
  Change("zone",this.xmlHttp.responseText);
 }
</script>

</body>
</html>

test.htm

This is a test string.
ComputerWeb