如下是对XMLHttpRequest的封装,为一个简易的工厂模式

/* AjaxHandler interface. */

var AjaxHandler = new Interface('AjaxHandler',['request','createXhrObject']);

/* SimpleHandler class. */

var SimpleHandler = function() {}; // implements AjaxHandler
SimpleHandler.prototype = {
  request: function(method,url,callback,postvars) {
    var xhr = this.createXhrObject();
    xhr.onreadystatechange = function() {
      if(xhr.readyState !== 4) return;
      (xhr.status === 200) ? 
        callback.success(xhr.responseText,xhr.responseXML) : 
        callback.failure(xhr.status);
    };
    xhr.open(method,true);
    if(method !== 'POST') postvars = null;
    xhr.send(postvars);
  },createXhrObject: function() { // Factory method.
    var methods = [
      function() { return new XMLHttpRequest(); },function() { return new ActiveXObject('Msxml2.XMLHTTP'); },function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
    ];
    
    for(var i = 0,len = methods.length; i < len; i++) {
      try {
        methods[i]();
      }
      catch(e) {
        continue;
      }
      // If we reach this point,method[i] worked.
      this.createXhrObject = methods[i]; // Memoize the method.
      return methods[i];
    }
    
    // If we reach this point,none of the methods worked.
    throw new Error('SimpleHandler: Could not create an XHR object.');
  } 
};

/* Usage. */

var myHandler = new SimpleHandler();
var callback = { 
  success: function(responseText) { alert('Success: ' + responseText); },failure: function(statusCode) { alert('Failure: ' + statusCode); } 
};
myHandler.request('GET','script.PHP',callback);


如下是辅助类的实现:

// Constructor.

var Interface = function(name,methods) {
    if(arguments.length != 2) {
        throw new Error("Interface constructor called with " + arguments.length
          + "arguments,but expected exactly 2.");
    }
    
    this.name = name;
    this.methods = [];
    for(var i = 0,len = methods.length; i < len; i++) {
        if(typeof methods[i] !== 'string') {
            throw new Error("Interface constructor expects method names to be " 
              + "passed in as a string.");
        }
        this.methods.push(methods[i]);        
    }    
};    

// Static class method.

Interface.ensureImplements = function(object) {
    if(arguments.length < 2) {
        throw new Error("Function Interface.ensureImplements called with " + 
          arguments.length  + "arguments,but expected at least 2.");
    }

    for(var i = 1,len = arguments.length; i < len; i++) {
        var interface = arguments[i];
        if(interface.constructor !== Interface) {
            throw new Error("Function Interface.ensureImplements expects arguments "   
              + "two and above to be instances of Interface.");
        }
        
        for(var j = 0,methodsLen = interface.methods.length; j < methodsLen; j++) {
            var method = interface.methods[j];
            if(!object[method] || typeof object[method] !== 'function') {
                throw new Error("Function Interface.ensureImplements: object " 
                  + "does not implement the " + interface.name 
                  + " interface. Method " + method + " was not found.");
            }
        }
    } 
};

Ajax之工厂模式封装XMLHttpRequest的更多相关文章

  1. PHP设计模式之工厂模式详解

    这篇文章主要为大家详细介绍了PHP设计模式之工厂模式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. PHP中单例模式与工厂模式详解

    本文主要介绍了PHP中单例模式与工厂模式的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧

  3. AJAX在不同浏览器中XMLHttpRequest对象的生成示例

    本文为大家介绍下AJAX在不同浏览器中XMLHttpRequest对象是怎样生成的,以方便我们针对不同浏览器进行测试,感兴趣的朋友可以参考下,希望对大家有所帮助

  4. PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】

    这篇文章主要介绍了PHP中常用的三种设计模式,结合实例形式详细分析了php单例模式、工厂模式与观察者模式概念、功能、相关使用技巧与操作注意事项,需要的朋友可以参考下

  5. JSONP之我见

    本文主要向大家介绍了个人对于jsonp的理解,jsonp的概念,跨域问题,以及jsonp与XMLHttpRequest的区别,由于本人也是javascript的初学者,难免会有些不当之处,还请指正,谢谢。

  6. javascript XMLHttpRequest对象全面剖析

    通过不必把Web页面寄送到服务器而实现数据传送,XMLHttpRequest对象为客户端与服务器之间提供了一种动态的交互能力。

  7. 使用Ajax技术通过XMLHttpRequest对象完成首页登录功能

    这篇文章主要介绍了使用Ajax技术通过XMLHttpRequest对象完成首页登录功能,很不错的尝试,需要的朋友可以参考下

  8. PHP单例模式与工厂模式详解

    这篇文章主要为大家详细介绍了PHP单例模式与工厂模式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Javascript面向对象设计一 工厂模式

    工厂模式抽象了创建具体对象的过程,但是在ECMAScript中无法创建类,所以就使用一种函数来封装以特定接口创建对象的细节

  10. JSP XMLHttpRequest动态无刷新及其中文乱码处理

    最近用到了XMLHttpRequest 动态无刷新技术 不刷新当前页面发送请求,并得到返回结果 主要是jsp页面内的js与后台的servlet交互,返回值为文本~~~

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部