`
anson_xu
  • 浏览: 510685 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类

ajax封装(创建,调用)实例

    博客分类:
  • ajax
阅读更多
1.share.js

function MyAjax(url) {
this.url = url;
this.xmlHttp = {};
};
MyAjax.prototype.createXMLHttpRequest = function() {
if (window.XMLHttpRequest) {
this.xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
};
MyAjax.prototype.sendPostRequest = function(queryString, handle) {
this.createXMLHttpRequest();
this.xmlHttp.open("POST", this.url, true);
this.xmlHttp.onreadystatechange = handle;
this.xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
this.xmlHttp.send(queryString);
};
MyAjax.prototype.sendPostRequest = function(queryString, url, winnercallback) {
this.createXMLHttpRequest();
this.xmlHttp.open("POST", url, true);
this.xmlHttp.onreadystatechange = winnercallback;
this.xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
this.xmlHttp.send(queryString);
};
2.类重写方法基础类
Ext = {};//Ext = {};
Ext.javapackage = function() {
var a = arguments, o = null, i, j, d, rt;
for (i = 0;i < a.length; ++i) {
d = a[i].split(".");
rt = d[0];
eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = '
+ rt + ';');
for (j = 1;j < d.length; ++j) {
o[d[j]] = o[d[j]] || {};
o = o[d[j]];
}
}
};

Ext.apply = function(o, c, defaults){
    if(defaults){
        // no "this" reference for friendly out of scope calls
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
};

/*====================Array====================*/
Ext.apply(Array.prototype, {
    indexOf : function(o){
       for (var i = 0, len = this.length; i < len; i++){
      if(this[i] == o) return i;
       }
   return -1;
    },
    remove : function(o){
       var index = this.indexOf(o);
       if(index != -1){
           this.splice(index, 1);
       }
    }
});

/*====================String====================*/
Ext.apply(String.prototype, {
trim : function() {
return this.replace(/(\s*$)/g, "").replace(/(^\s*)/g, "");//先去掉结尾空格,再去掉开头空格。
},
format : function() {
    var args = Array.prototype.slice.call(arguments, 0);
    return this.replace(/\{(\d+)\}/g, function(m, i){return args[i];});
    },
formatAry : function() {
var a=arguments;
if(typeof arguments[0]=="object"){
a=arguments[0];
}
var args = Array.prototype.slice.call(a, 0);
    return this.replace(/\{(\d+)\}/g, function(m, i){return args[i];});
},
    zero2int: function() {
    if(parseInt(this)!=0)return parseInt(this);
    return parseInt(this.replace(/^0/,""));
    },
    clearZero: function(){
    var t=""+this;
if(t[0]=="0"){
t=this.replace(/^0/,"");
t=clearZear(t);
}
return t;
},
string2int: function(){//前面n个0的字符串变数字
var t=""+this;
while((/^0/.test(t)))t=t.replace(/^0/,"");
return /^\d+$/.test(t)?parseInt(t):t;
}
});

/*====================Function====================*/
Ext.apply(Function.prototype, {
    createCallback : function(/*args...*/){
        var args = arguments;
        var method = this;
        return function() {
            return method.apply(window, args);
        };
    },
    createDelegate : function(obj, args, appendArgs){
        var method = this;
        return function() {
            var callArgs = args || arguments;
            if(appendArgs === true){
                callArgs = Array.prototype.slice.call(arguments, 0);
                callArgs = callArgs.concat(args);
            }else if(typeof appendArgs == "number"){
                callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
                var applyArgs = [appendArgs, 0].concat(args); // create method call params
                Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
            }
            return method.apply(obj || window, callArgs);
        };
    },
    defer : function(millis, obj, args, appendArgs){
        var fn = this.createDelegate(obj, args, appendArgs);
        if(millis){
            return setTimeout(fn, millis);
        }
        fn();
        return 0;
    },
    createSequence : function(fcn, scope){
        if(typeof fcn != "function"){
            return this;
        }
        var method = this;
        return function() {
            var retval = method.apply(this || window, arguments);
            fcn.apply(scope || this || window, arguments);
            return retval;
        };
    },
    createInterceptor : function(fcn, scope){
        if(typeof fcn != "function"){
            return this;
        }
        var method = this;
        return function() {
            fcn.target = this;
            fcn.method = method;
            if(fcn.apply(scope || this || window, arguments) === false){
                return;
            }
            return method.apply(this || window, arguments);
        };
    }
});
3.调用
jsp页面中

<script>
(function kaijiangxinxiList(){
var a = new MyAjax();
a.sendPostRequest(null,kaijiangxinxiUrl, getCallback.createDelegate(a));
}())
</script>
4.返回处理
function getKaijiangxinxiCallback() {
var xmlHttp = this.xmlHttp;
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var json = eval("(" + xmlHttp.responseText + ")");
//alert("items.length="+json.items.length);
var s="";
for(var i=0;i<json.items.length;i++){//循环开始
    s+="<div class=\"kaijiangxinxi_list_one\" onmouseout=\"this.className='kaijiangxinxi_list_one'\" onmouseover=\"this.className='kaijiangxinxi_list_two'\">";
s+="<div class=\"kaijiangdetail\">";
s+="<div class=\"kaijiangmessage\">";
分享到:
评论

相关推荐

    ajax封装实例代码

    本篇文章将深入探讨Ajax封装实例代码及其相关知识点。 首先,我们来看Ajax的核心原理:通过JavaScript创建XMLHttpRequest对象,发送异步请求到服务器,然后接收服务器返回的数据,最后更新DOM以显示新数据。在实际...

    jquery Ajax 全局调用封装实例详解

    ### jQuery Ajax 全局调用封装实例详解知识点 #### 前言 在前端开发中,异步数据交互是核心功能之一,通常使用Ajax技术实现。当全站需要频繁进行数据交互时,如果每次都写重复的`$.ajax`代码,不仅效率低下,而且...

    自己用的简单封装AJAX类

    **标签分析:** "AJAX类"标签表明这是一个与AJAX相关的代码实现,可能是一个JavaScript对象或函数,用于简化AJAX请求的创建和管理。 **子文件内容推测:** - **ajax.js**:这是实际封装的AJAX类的源代码文件,可能...

    jQuery Ajax 全局调用封装实例代码详解

    接下来,我们可以定义一个全局的Ajax封装类,称为“linjq”,这个封装类通过内部的函数来实现不同的请求方式,并且可以处理各种请求参数和回调函数。封装类通常定义在文档加载完成后立即执行的函数中,这样做可以...

    java中对ajax经典封装

    - 创建XMLHttpRequest对象实例。 - 使用open()方法设置请求类型(GET或POST)、URL以及是否异步执行。 - 发送请求,对于GET,直接调用send();对于POST,需要先setRequestHeader()指定Content-Type,然后send()...

    asp.net+ajax网站开发典型实例(第一篇)

    2. **Web服务与AJAX**:讲解如何创建和调用Web服务(ASMX或WCF),以异步方式获取和更新数据,提高用户体验。 3. **页面生命周期与AJAX**:探讨在使用AJAX时,页面生命周期的变化,以及如何在AJAX请求中处理页面...

    Ajax-Ajax基础实例

    **Ajax基础实例详解** AJAX,全称"Asynchronous ...虽然现代前端框架已经封装了复杂的AJAX操作,但了解其基本原理和工作流程对于开发者来说仍然非常重要。通过实践基础的AJAX实例,可以更好地理解和运用这一技术。

    简单封装Ajax

    通过这样的封装,我们可以创建一个自定义的Ajax函数,如`ajaxRequest`,将上述逻辑整合在一起,接受URL、请求类型、数据等参数,以简洁的方式调用,提高代码复用性。 在实际应用中,还可以考虑添加其他功能,如超时...

    Ajax封装

    在实际的Web应用开发中,Ajax封装类是常见的实践,它可以帮助开发者更方便、高效地进行异步数据交互,提高用户体验。下面我们将深入探讨Ajax封装的原理、实现方式以及如何使用。 **Ajax原理** Ajax的核心是...

    Ajax经典实例大全

    为了简化Ajax的开发,许多JavaScript库和框架提供了高级封装,如jQuery的$.ajax(),Vue.js的axios,React的fetch API等。它们提供了更友好的API,简化了Ajax操作。 在"Ajax经典实例大全"中,你将找到各种实用的示例...

    简单ajax封装小工具

    这个“简单ajax封装小工具”可能是将常见的Ajax请求功能如GET、POST等进行了抽象和简化,方便开发者快速调用。通常,一个简单的Ajax封装可能包括以下组成部分: 1. **创建XMLHttpRequest对象**:这是Ajax的核心,...

    分享Ajax创建简单实例代码

    今天,我们将分享一个创建Ajax简单实例的代码示例,帮助初学者理解如何在实际项目中应用Ajax。 首先,我们需要了解什么是XMLHttpRequest对象。XMLHttpRequest是一个JavaScript对象,它提供了一种在后台与服务器交换...

    ajax+jsp经典实例

    创建一个名为`validateIDCard.jsp`的JSP文件,接收Ajax请求,调用身份证效验的Java方法,并将结果封装成JSON格式返回。例如: ```jsp *,your.package.IdCardValidator" %&gt; String idCard = request....

    ASP实例开发源码—ASP基于Prototype的Ajax无刷新登录实例.zip

    这个实例“ASP基于Prototype的Ajax无刷新登录实例”是关于如何在ASP中利用Ajax技术实现用户登录功能,无需页面刷新即可完成交互。Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下更新...

    如何操作ajax调用

    1. **创建`XMLHttpRequest`对象**:这是执行Ajax调用的基础,通过创建一个`XMLHttpRequest`实例来建立与服务器的连接。 2. **设置请求方式和URL**:通过调用`open`方法,指定请求类型(如GET或POST)以及目标...

    ajax1.dll 开发实例 .net

    1. **Ajax.dll** - 这个文件很可能是封装了Ajax功能的.NET DLL库,它包含了一系列预定义的类和方法,可以被C#代码引用并调用,以实现异步通信和页面更新。 2. **AjaxGuide.doc** - 这可能是一个详细的指南文档,为...

    Ajax自动补全效果实例

    JavaScript的响应处理函数会在Ajax请求完成时被调用,它解析服务器返回的数据,通常是JSON格式,然后动态创建HTML元素,如`&lt;li&gt;`,并将这些建议显示在输入框下方。这种实时更新的体验使得用户可以快速浏览和选择合适...

Global site tag (gtag.js) - Google Analytics