`
huoquan
  • 浏览: 27161 次
  • 性别: 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
分享到:
评论

相关推荐

    MFC类库详解.zip

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

    封装JavaScript常用类库.rar

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

    TCP类库.....学习模板

    然而,为了简化编程和提高可维护性,通常会封装成类库。在提供的文件"CNet.cpp"和"CNet.h"中,很可能就包含了这样的类库实现,用于管理和操作TCP连接。 类库的设计通常包括以下几个关键部分: 1. **连接管理**:...

    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...

    C#通用类库调用.zip

    这些类库通常是开发者为了提高代码复用性和减少重复工作而创建的,它们封装了复杂的操作,使开发过程更高效。 1. **文件操作**:文件操作是任何应用程序的基础。C#提供了System.IO命名空间,其中包含许多类,如File...

    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,提供了面向对象的接口,使得程序员可以更高效地...

    MFC类库详解....

    MFC(Microsoft Foundation Classes)是微软提供的一种C++类库,用于简化Windows应用程序的开发。它基于面向对象的编程理念,构建在Windows API之上,为开发者提供了丰富的类和功能,以便更加高效地创建桌面应用程序...

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

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

    javascript面向对象包装类Class封装类库剖析.docx

    总的来说,理解和掌握JavaScript的面向对象编程,包括其基于原型的继承机制,以及如何利用封装类库(如MY-CLASS)来简化代码结构,是成为一个高级JavaScript开发者的必备技能。这不仅可以提升代码质量,还能使代码...

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

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

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

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

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

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

    MFC类库详解.

    MFC类库的核心是它封装了Windows的消息处理机制,通过CWnd、CFrameWnd、CDocument、CView等基础类,将复杂的Windows消息映射到具体的成员函数,降低了编程难度。例如,CWinApp类是应用程序的入口点,负责初始化和...

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

    这个压缩包"基于Java的实例源码-google-api-translate(Java对Google翻译引擎的封装类库).zip"提供了一个用Java实现的类库,用于封装Google的翻译API,使得开发者能够更方便地在Java项目中集成Google的翻译功能。...

Global site tag (gtag.js) - Google Analytics