纯JS封装Ajax对象

转载 2013年12月03日 20:52:12

封装好的对象:

var Ajax = function (sUrl, sMethod, oParam, fCallback) {
    this.sUrl = sUrl;
    this.sMethod = sMethod;
    this.oParam = oParam;
    this.fCallback = fCallback;
    this.status = {
        1: '请求成功',
        2: 'http返回失败',
        3: '数据加载中'
    }
    this.xmlHttp = null;
    //驱动函数  
    this.Driver = function () {
        this.xmlHttp = this.CreateXmlHttp();
        this.xmlHttp.open(this.sMethod, this.sUrl, true);
        this.xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        this.xmlHttp.onreadystatechange = GetResult; //指定回调函数   
        this.xmlHttp.send(this.oParam); //发送请求   
    };
    //创建操作对象  
    this.CreateXmlHttp = function () {
        var xmlHttp;
        if (window.ActiveXObject) { //IE下   
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (window.XMLHttpRequest) { //其他浏览器如火狐   
            xmlHttp = new XMLHttpRequest();
        }
        return xmlHttp;
    };
    //回调方法  
    var GetResult = function () {
        if (this.readyState == 4) {//请求状态为4表示成功    
            if (this.status == 200) {//http状态200表示OK    
                eval(fCallback)(this.responseText);
            } else {//http返回状态失败    
                return this.status[2];
            }
        } else {//请求状态还没有成功,页面等待    
            return this.status[3];
        }
    }
}


调用方法:

new Ajax('test.php', 'get', {}, function (responseText) {
    alert(responseText);
}).Driver();


 

相关文章推荐

js 实现对ajax请求面向对象的封装

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。         ...

关于JS中ajax的XMLHttpRequest对象的使用

JS中的Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本(客户端)与服务器之间的中间人的角色。以往的请求都由浏览器发出,而JavaScript通过这个对象可以自己发...

Stripes视图框架Java对象属性验证和prototype.js Ajax的测试

Stripes视图框架Java对象属性验证,它允许对字段设置是否必须填写,对数字大小进行限制等。prototype.js Ajax 将验证后的数据及时地展示出来,下面来看程序。 1、编写User实体类...
  • boonya
  • boonya
  • 2013年11月06日 00:14
  • 2291

关于JS中的Ajax对象的兼容

自从Ajax出现以来,就成了一个前端工程师必不可少的知识点。但是,由于IE的“异样”性,使得我们不得不对其进行兼容性检查。其实,为了图方便,我们可以采用jQuery里面的$.ajax()方法来使用Aj...

AJAX学习笔记之XML对象原生JS使用方法

首先在src文件下写好servlet,命名为AJAXMLServe: import javax.servlet.http.HttpServlet; import javax.servlet.http...

js实现的ajax对象创建&与服务器交互

尽管各种各样简化ajax方式有很多,但是在开发中不免会遇到只能写js的时候,下面写一下自己用js直接实现与服务器交互的代码 创建Ajax对象—>w3school粘过来的(固定写法)function ...

Ajax原理-原生js的XMLHttpRequest对象意义

Ajax原理-原生js的XMLHttpRequest对象意义

jquery中ajax如何返回值到上层函数的方法以及对于js处理json对象方法的记录

jquery中ajax如何返回值到上层函数的方法以及对于js处理json对象方法的记录

使用JS和Ajax发出异步请求,XmlHttpRequest对象详解

本文介绍了如何创建能够适应不同浏览器的XMLHttpRequest实例,建立和发送请求,并响应服务器。您将开始接触最基本和基础性的有关Ajax的全部对象和编程方法:XMLHttpRequest对象。该...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯JS封装Ajax对象
举报原因:
原因补充:

(最多只允许输入30个字)