封装过的Ajax工具类库AjaxUtil.js 可以500%提高开发效率的前端UI框架!
- var AjaxUtil = {
- // 基础选项
- options : {
- method : "get", // 默认提交的方法,get post
- url : "", // 请求的路径 required
- params : {}, // 请求的参数
- type : 'text', // 返回的内容的类型,text,xml,json
- callback : function() {
- }// 回调函数 required
- },
- // 创建XMLHttpRequest对象
- createRequest : function() {
- var xmlhttp;
- try {
- xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");// IE6以上版本
- } catch (e) {
- try {
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6以下版本
- } catch (e) {
- try {
- xmlhttp = new XMLHttpRequest();
- if (xmlhttp.overrideMimeType) {
- xmlhttp.overrideMimeType("text/xml");
- }
- } catch (e) {
- alert("您的浏览器不支持Ajax");
- }
- }
- }
- return xmlhttp;
- },
- // 设置基础选项
- setOptions : function(newOptions) {
- for ( var pro in newOptions) {
- this.options[pro] = newOptions[pro];
- }
- },
- // 格式化请求参数
- formateParameters : function() {
- var paramsArray = [];
- var params = this.options.params;
- for ( var pro in params) {
- var paramValue = params[pro];
- /*if(this.options.method.toUpperCase() === "GET")
- {
- paramValue = encodeURIComponent(params[pro]);
- }*/
- paramsArray.push(pro + "=" + paramValue);
- }
- return paramsArray.join("&");
- },
- // 状态改变的处理
- readystatechange : function(xmlhttp) {
- // 获取返回值
- var returnValue;
- if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
- switch (this.options.type) {
- case "xml":
- returnValue = xmlhttp.responseXML;
- break;
- case "json":
- var jsonText = xmlhttp.responseText;
- if(jsonText){
- returnValue = eval("(" + jsonText + ")");
- }
- break;
- default:
- returnValue = xmlhttp.responseText;
- break;
- }
- if (returnValue) {
- this.options.callback.call(this, returnValue);
- } else {
- this.options.callback.call(this);
- }
- }
- },
- // 发送Ajax请求
- request : function(options) {
- var ajaxObj = this;
- // 设置参数
- ajaxObj.setOptions.call(ajaxObj, options);
- // 创建XMLHttpRequest对象
- var xmlhttp = ajaxObj.createRequest.call(ajaxObj);
- // 设置回调函数
- xmlhttp.onreadystatechange = function() {
- ajaxObj.readystatechange.call(ajaxObj, xmlhttp);
- };
- // 格式化参数
- var formateParams = ajaxObj.formateParameters.call(ajaxObj);
- // 请求的方式
- var method = ajaxObj.options.method;
- var url = ajaxObj.options.url;
- if ("GET" === method.toUpperCase()) {
- url += "?" + formateParams;
- }
- // 建立连接
- xmlhttp.open(method, url, true);
- if ("GET" === method.toUpperCase()) {
- xmlhttp.send(null);
- } else if ("POST" === method.toUpperCase()) {
- // 如果是POST提交,设置请求头信息
- xmlhttp.setRequestHeader("Content-Type",
- "application/x-www-form-urlencoded");
- xmlhttp.send(formateParams);
- }
- }
- };
一个简单的示例: 可以500%提高开发效率的前端UI框架!
- <strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">function findUser() {
- var userid = $("userid").value;
- if (userid) {
- AjaxUtil.request({
- url:"servlet/UserJsonServlet",
- params:{id:userid},
- type:'json',
- callback:process
- });
- }
- }
- function process(json){
- if(json){
- $("id").innerHTML = json.id;
- $("username").innerHTML = json.username;
- $("age").innerHTML = json.age;
- }
- else{
- $("msg").innerHTML = "用户不存在";
- $("id").innerHTML = "";
- $("username").innerHTML = "";
- $("age").innerHTML = "";
- }
- }
- function $(id) {
- return document.getElementById(id);
- }</strong>
相关推荐
基于java的开发源码-google-api-translate(Java对Google翻译引擎的封装类库).zip 基于java的开发源码-google-api-translate(Java对Google翻译引擎的封装类库).zip 基于java的开发源码-google-api-translate(Java对...
主要介绍了JavaScript封装的常用工具类库bee.js用法,结合实例形式详细分析了经典类库bee.js常见的手机、身份证、邮箱校验,以及字符串操作、四则运算、正则验证等相关操作的封装与使用技巧,需要的朋友可以参考下
javascript面向对象包装类Class封装类库剖析.docx
google-api-translate-java(Java 语言对Google翻译引擎的封装类库).7z
封装JavaScript常用类库,方便对其调用,不用一直手写,避免出错!
基于Java的实例开发源码-(Java 语言对Google翻译引擎的封装类库).zip
推荐,嵌入式常用基础元件的PCB封装库集合,共21个类库。 01.电阻、电位器、压敏电阻 02.电容、电解电容、钽电容、安规电容、薄膜电容 03.电感、变压器、互感器、磁珠 04.二极管、整流桥 05.三极管、MOSFET 06.发光...
基于Java的源码-google-api-translate(Java对Google翻译引擎的封装类库).zip
基于Java的实例源码-google-api-translate(Java对Google翻译引擎的封装类库).zip
基于java的google-api-translate-java(Java 语言对Google翻译引擎的封装类库).zip
java源码:google-api-translate-java(Java 语言对Google翻译引擎的封装类库).rar
商业编程-源码-封装较完整的串口类库.zip
轻量级的Canvas类库 ZRender ,zrender(Zlevel Render) 是一个轻量级的Canvas类库,MVC封装,数据驱动,...
NetpPro一组独立中间件的类库 简要 .NetpPro是一组独立中间件的类库统称,具有轻量级,依赖小,易用使用且高效。 在以往的开发中我们常常封装内置一堆组件作为框架进行使用,项目是否使用这些组件功能都将统统加载...
IOS应用源码之采用ARC-Blocks-GCD封装的网络下载类库.zip
支持C#语言,封装了json操作,xml操作,字符串操作,验证码操作,压缩解压缩操作,文件操作,验证数字、邮箱、身份证、手机号等操作,网络操作等等。
介绍php封装的mysqli类,结合实例形式分析了php针对mysqli操作类的定义与使用技巧,掌握满足单例模式的必要条件 (1)私有的构造方法-为了防止在类外使用new关键字实例化对象 (2)私有的成员属性-为了防止在...
ajax轻量级封装,简单实用,带有详细注释。 一、同一个对象可以发送多个请求,按顺序执行请求,有简单的超时机制,httpXMLRequest对象复用,无序的可以建立多个对象发送请求来实现; 二、兼容IE,FF,支持同步、异步...
此工具比较有针对性,专门针对封装系统或新笔记本优化设置时将各种繁琐的手动操作内容自动化完成。工具可根据自己的需求环境,自由配置需要优化的项目。上百项优化内容,近乎一键完成,非常灵活高效。并且附带很多...