`
huoquan
  • 浏览: 27083 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类

封装过的Ajax工具类库AjaxUtil.js

阅读更多

封装过的Ajax工具类库AjaxUtil.js  可以500%提高开发效率的前端UI框架!

.代码  收藏代码
  1. var AjaxUtil = {  
  2.        
  3.     // 基础选项  
  4.     options : {  
  5.         method : "get", // 默认提交的方法,get post  
  6.         url : "", // 请求的路径 required  
  7.         params : {}, // 请求的参数  
  8.         type : 'text', // 返回的内容的类型,text,xml,json  
  9.         callback : function() {  
  10.         }// 回调函数 required  
  11.     },  
  12.        
  13.     // 创建XMLHttpRequest对象  
  14.     createRequest : function() {  
  15.         var xmlhttp;  
  16.         try {  
  17.             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");// IE6以上版本  
  18.         } catch (e) {  
  19.             try {  
  20.                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6以下版本  
  21.             } catch (e) {  
  22.                 try {  
  23.                     xmlhttp = new XMLHttpRequest();  
  24.                     if (xmlhttp.overrideMimeType) {  
  25.                         xmlhttp.overrideMimeType("text/xml");  
  26.                     }  
  27.                 } catch (e) {  
  28.                     alert("您的浏览器不支持Ajax");  
  29.                 }  
  30.             }  
  31.         }  
  32.         return xmlhttp;  
  33.     },  
  34.     // 设置基础选项  
  35.     setOptions : function(newOptions) {  
  36.         for ( var pro in newOptions) {  
  37.             this.options[pro] = newOptions[pro];  
  38.         }  
  39.     },  
  40.     // 格式化请求参数  
  41.     formateParameters : function() {  
  42.         var paramsArray = [];  
  43.         var params = this.options.params;  
  44.         for ( var pro in params) {  
  45.             var paramValue = params[pro];   
  46.             /*if(this.options.method.toUpperCase() === "GET")  
  47.             {  
  48.                 paramValue = encodeURIComponent(params[pro]);  
  49.             }*/  
  50.             paramsArray.push(pro + "=" + paramValue);  
  51.         }  
  52.         return paramsArray.join("&");  
  53.     },  
  54.        
  55.     // 状态改变的处理  
  56.     readystatechange : function(xmlhttp) {  
  57.         // 获取返回值  
  58.         var returnValue;  
  59.         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
  60.             switch (this.options.type) {  
  61.             case "xml":  
  62.                 returnValue = xmlhttp.responseXML;  
  63.                 break;  
  64.             case "json":  
  65.                 var jsonText = xmlhttp.responseText;  
  66.                 if(jsonText){  
  67.                     returnValue = eval("(" + jsonText + ")");  
  68.                 }  
  69.                 break;  
  70.             default:  
  71.                 returnValue = xmlhttp.responseText;  
  72.                 break;  
  73.             }  
  74.             if (returnValue) {  
  75.                 this.options.callback.call(this, returnValue);  
  76.             } else {  
  77.                 this.options.callback.call(this);  
  78.             }  
  79.         }  
  80.     },  
  81.        
  82.     // 发送Ajax请求  
  83.     request : function(options) {  
  84.         var ajaxObj = this;  
  85.        
  86.         // 设置参数  
  87.         ajaxObj.setOptions.call(ajaxObj, options);  
  88.        
  89.         // 创建XMLHttpRequest对象  
  90.         var xmlhttp = ajaxObj.createRequest.call(ajaxObj);  
  91.        
  92.         // 设置回调函数  
  93.         xmlhttp.onreadystatechange = function() {  
  94.             ajaxObj.readystatechange.call(ajaxObj, xmlhttp);  
  95.         };  
  96.        
  97.         // 格式化参数  
  98.         var formateParams = ajaxObj.formateParameters.call(ajaxObj);  
  99.        
  100.         // 请求的方式  
  101.         var method = ajaxObj.options.method;  
  102.         var url = ajaxObj.options.url;  
  103.        
  104.         if ("GET" === method.toUpperCase()) {  
  105.             url += "?" + formateParams;  
  106.         }  
  107.        
  108.         // 建立连接  
  109.         xmlhttp.open(method, url, true);  
  110.        
  111.         if ("GET" === method.toUpperCase()) {  
  112.             xmlhttp.send(null);  
  113.         } else if ("POST" === method.toUpperCase()) {  
  114.             // 如果是POST提交,设置请求头信息  
  115.             xmlhttp.setRequestHeader("Content-Type",  
  116.                     "application/x-www-form-urlencoded");  
  117.             xmlhttp.send(formateParams);  
  118.         }  
  119.     }  
  120. };  

 

一个简单的示例: 可以500%提高开发效率的前端UI框架!

.代码  收藏代码
  1. <strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">function findUser() {  
  2.         var userid = $("userid").value;  
  3.         if (userid) {  
  4.             AjaxUtil.request({  
  5.                 url:"servlet/UserJsonServlet",  
  6.                 params:{id:userid},  
  7.                 type:'json',  
  8.                 callback:process  
  9.             });  
  10.         }  
  11.     }  
  12.     
  13.     function process(json){  
  14.             if(json){  
  15.                 $("id").innerHTML = json.id;  
  16.                 $("username").innerHTML = json.username;  
  17.                 $("age").innerHTML = json.age;  
  18.             }  
  19.             else{  
  20.                 $("msg").innerHTML = "用户不存在";  
  21.                 $("id").innerHTML = "";  
  22.                 $("username").innerHTML = "";  
  23.                 $("age").innerHTML = "";  
  24.             }  
  25.     }  
  26.     
  27.     
  28.     function $(id) {  
  29.         return document.getElementById(id);  
  30.     }</strong>  
0
0
分享到:
评论

相关推荐

    基于java的开发源码-google-api-translate(Java对Google翻译引擎的封装类库).zip

    基于java的开发源码-google-api-translate(Java对Google翻译引擎的封装类库).zip 基于java的开发源码-google-api-translate(Java对Google翻译引擎的封装类库).zip 基于java的开发源码-google-api-translate(Java对...

    MFC类库详解.zip

    这个类库基于面向对象的设计,它封装了Windows API,使得程序员可以使用更高层次的抽象来构建应用程序,而不是直接处理底层的Windows消息和句柄。 MFC的核心组件包括: 1. **框架类**:如CWinApp、CWinThread、...

    封装JavaScript常用类库.rar

    "封装JavaScript常用类库.rar"是一个压缩包,其中包含了一个或多个文本文件,很可能是为了便于开发者复用和管理常见的JavaScript功能,避免重复编写相同或相似的代码,从而提高开发效率并减少潜在错误。 首先,让...

    一个对JDBC进行简单封装的开源工具类库._使用它能够简化JDBC应用程序的开发,不会影响程序的性能_wasdb.zip

    一个对JDBC进行简单封装的开源工具类库._使用它能够简化JDBC应用程序的开发,不会影响程序的性能_wasdb

    MFC全中文版类库——.chm格式

    **MFC全中文版类库——.chm格式** MFC(Microsoft Foundation Classes)是微软提供的一套面向对象的C++库,它基于Windows API,为开发者提供了构建Windows应用程序的便利框架。MFC使得程序员能够更容易地利用...

    C#读取thumbs.db类库下载.rar

    首先,`ThumbDBLib.dll`很可能是一个封装了读取`thumbs.db`文件的C#类库。这个库可能包含了各种方法和类,用于解析`thumbs.db`文件结构,提取其中的图片缩略图信息。类库可能会提供如打开`thumbs.db`文件、获取特定...

    prototype(JS类库).rar

    Prototype是一个强大的JavaScript类库,它的出现是为了弥补JavaScript在面向对象编程方面的不足,提供了一套丰富的函数和工具,使开发者能够更高效地编写可维护的JavaScript代码。Prototype的核心理念是通过模拟传统...

    MFC类库详解 MFC类库详解.chm

    MFC包含了大量封装了Windows API的类,如窗口、控件、文档/视图架构、数据库访问等,极大地提高了开发效率。 MFC类库详解.chm文件是一个帮助文档,通常用于提供MFC类库的详细说明和教程。CHM是Microsoft的 Compiled...

    MicrosoftAjax.js 实现Ajax类库

    总的来说,MicrosoftAjax.js为.NET开发者提供了一个强大且易用的Ajax实现工具,使得在ASP.NET环境中构建动态、交互性强的Web应用变得更加便捷。它集成了完整的生命周期管理、错误处理、状态维护等功能,极大地提高了...

    MFC类库详解.rar

    MFC(Microsoft Foundation Classes)是微软提供的一种C++类库,用于简化Windows应用程序的开发。这个压缩包“MFC类库详解.rar”包含了详细的MFC类库和函数库的解释,是学习MFC的重要资源。其中包含的“MFC类库详解....

    MFC 类库chm.rar

    《深入理解MFC类库:从VC 6到现代编程实践》 MFC(Microsoft Foundation Classes)是微软提供的一种C++类库,用于简化Windows应用程序的开发。它封装了Windows API,提供了面向对象的接口,使得程序员可以更高效地...

    C#封装的Utilities基础类库.rar

    "C#封装的Utilities基础类库.rar"提供了一组实用工具类,帮助开发者快速高效地完成这些常见任务。这个类库涵盖了多个核心功能模块,包括JSON和XML操作、字符串处理、验证码生成、压缩与解压缩、文件操作以及各种验证...

    清明_跨程序辅助类库 8.0.zip

    清明_跨程序辅助类库 8.0 是一个专为E4A(Easy4App)开发者设计的强大工具,旨在提供跨应用的辅助功能,提升开发效率和代码质量。这款类库是E4A开发环境的一个扩展,通过集成一系列实用的函数和模块,使得开发者能够...

    NETPPRO一组独立中间件的类库 NetPro.rar

    NetpPro一组独立中间件的类库 简要 .NetpPro是一组独立中间件的类库统称,具有轻量级,依赖小,易用使用且高效。 在以往的开发中我们常常封装内置一堆组件作为框架进行使用,项目是否使用这些组件功能都将统统加载...

    基于PHP的简繁中文互转类库源码.zip

    1. **PHP类库**:在PHP中,类库是一组相关的函数和方法,封装在一起以实现特定的功能。在这个案例中,类库专注于简繁体中文的转换,可能包含一个或多个类,每个类有其特定的转换方法。 2. **简繁体转换算法**:此...

    IOS应用源码之【类库与框架】-麦克风检测类库SCListener.rar

    SCListener类库可能是基于Core Audio进行封装,为开发者提供了一个更高级别的API,以便于实现对麦克风是否可用、是否有权限以及音量检测等功能。通过这样的库,开发者可以更便捷地处理与麦克风相关的用户交互和权限...

    C#官方通用类库及通用数据库类库

    1. 通用类库 DC.CommonLiteLib针对一些常用算法,线程管理,IO控制,以及ConvertHelper类型转换,StringHelper字符串封装,FileHelper 文件操作封装等,另有CHM官方文件解释用法。 2. 用数据库类库 DC....

Global site tag (gtag.js) - Google Analytics