利用Ajax进行交互JS类

2016-02-19 15:33 8 1 收藏

今天图老师小编给大家精心推荐个利用Ajax进行交互JS类教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

    最近做的一个项目中有需要使用Ajax的部分,正好不是很忙,所以自己写了一个简单的Ajax类,拿出来share一下:

function BmAjaxObject()
{
 this.ajaxObj = this.getXmlHttpObject();
}

BmAjaxObject.prototype.getXmlHttpObject = function()
{
 var _ajaxObj;
 try
 {
  _ajaxObj = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch(e1)
 {
  try
  {
   _ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch(e2)
  {
   _ajaxObj = false;
  }
 }
 if(!_ajaxObj && typeof(XMLHttpRequest) != 'undefined')
 {
  _ajaxObj = new XMLHttpRequest();
 }
 return _ajaxObj;
}

BmAjaxObject.prototype.doCallBack = function(url)
{
 if(this.ajaxObj)
 {
  this.ajaxObj.open('GET', url);
  var othis = this;
  this.ajaxObj.onreadystatechange = function() {othis.readyStateChange()};
  this.ajaxObj.send(null);
 }
}

BmAjaxObject.prototype.abortCallBack = function()
{
 if(this.ajaxObj)
 {
  this.ajaxObj.abort();
 }
}

BmAjaxObject.prototype.readyStateChange = function()
{
 if(this.ajaxObj.readyState == 1)
 {
  this.onLoading();
 }
 else if(this.ajaxObj.readyState == 2)
 {
  this.onLoaded();
 }
 else if(this.ajaxObj.readyState == 3)
 {
  this.onInteractive();
 }
 else if(this.ajaxObj.readyState == 4)
 {
  if(this.ajaxObj.status == 0)
  {
   this.onAbort();
  }
  else if(this.ajaxObj.status == 200)
  {
   this.onComplete(this.ajaxObj.responseText, this.ajaxObj.responseXML);
  }
  else
  {
   this.onError(this.ajaxObj.status, this.ajaxObj.statusText, this.ajaxObj.responseText);
  }
 }
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

BmAjaxObject.prototype.onLoading = function() {}

BmAjaxObject.prototype.onLoaded = function() {}

BmAjaxObject.prototype.onInteractive = function() {}

BmAjaxObject.prototype.onComplete = function(responseText, responseXml) {}

BmAjaxObject.prototype.onError = function(status, statusText, responseText) {}

BmAjaxObject.prototype.onAbort = function() {}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

使用方法:

var a = new BmAjaxObject();
a.doCallBack('DesignFacade');

a.onComplete = function(responseText, responseXml)
{
 alert(responseText);
}

 

    同样,其他的方法可以使用相同的方式加上,项目中试用后,效果还可以。(里边用到了JS的类的概念)

来源:http://www.tulaoshi.com/n/20160219/1609890.html

延伸阅读
标签: PHP
  該方法已經屬於過時方法,其中關鍵的地方也從論壇上得來的,我只是把它消化吸收后重新写了更全面的出来。公布出來只是希望更多的新手能從中學到一些東西。如果你對該代碼有任何意見可以留言,但請勿進行人身攻擊,我是一個菜鳥只能寫出這樣的東西,每个老鸟都有这样的过程。 鉴于时间问题,代碼的提交部分使用的是传统的表单POST,如...
标签: Web开发
如下是其中关于 prototype 的说明: ===== constructor 属性 应用于: Array 对象 | Boolean 对象 | Date 对象 | Function 对象 | Number 对象 | Object 对象 | String 对象 要求 版本 2 返回对象类型...
标签: Web开发
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: Web开发
程序代码: script type="text/javascript" function Ajax(sUrl,sRecvTyp,sQueryString,oResultFunc) { this.Url = sUrl; this.QueryString = sQueryString; this.XmlHttp = this.createXMLHttpRequest(); if (this.XmlHttp == null) { alert("erro"); return; } var objxml = this.XmlHttp; objxml.onreadystatechange = function (){Ajax.han...

经验教程

380

收藏

7
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部