ajax基础(2)封装

原创 2015年11月19日 22:47:27

简单封装1

function ajax(method,url,data,success) {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (method == 'get' && data) {
        url+='?'+data;
    }

    xhr.open(method,url,true);

    if (method == 'get') {
        xhr.send();
    }else {
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(data)
    }


    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                success && success(xhr.responseText);
                // console.log(xhr.responseText)
            }else{
                alert('出错了: '+xhr.status )
            }
        };
    }
}

简单封装2

//method,url,opts,success
function ajax(opts) {
    var xhr = null;
    var options = {
        method : 'GET',
        url : '',
        data : '',
        async : true,
        timeout : function(){},
        success : function(){},
        error : function(){}
    }
    for(var key in opts){
        options[key] = opts[key]
    }
    if (window.XMLHttpRequest) {
        xhr = new  XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (options.method.toUpperCase() == 'GET'&& options.data) {
        var empty = '';
        for(var key in options.data ){  //options.data {'name' : 'bob', 'age' : 67}
            empty += encodeURI(key)+'='+encodeURI(options.data[key])+'&';
        }
        options.url+='?'+empty+new Date().getTime();

    };
    xhr.open(options.method,options.url,options.async);

    if (options.method.toUpperCase() == 'GET') {
        xhr.send();
    }else{
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        var data='';
        for(var key in options.data){
            data += key +'='+options.data[key]+'&';
        }
        data.slice(0,-1)
        xhr.send(data);
    }



    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                // alert(xhr.responseText)
                options.success && options.success(xhr.responseText);
            }else {
                alert('出错了:' + xhr.status)
            }
        };
    }
}

简单封装3 转载别人的

原文地址

/*
  *author: Ivan
  *date: 2014.06.01
  *参数说明:
  *opts: {'可选参数'}
  **method: 请求方式:GET/POST,默认值:'GET';
  **url:    发送请求的地址, 默认值: 当前页地址;
  **data: string,json;
  **async: 是否异步:true/false,默认值:true;
  **cache: 是否缓存:true/false,默认值:true;
  **contentType: HTTP头信息,默认值:'application/x-www-form-urlencoded';
  **success: 请求成功后的回调函数;
  **error: 请求失败后的回调函数;
 */
 function ajax(opts){
     //一.设置默认参数
     var defaults = {    
             method: 'GET',
                url: '',
               data: '',        
              async: true,
              cache: true,
        contentType: 'application/x-www-form-urlencoded',
            success: function (){},
              error: function (){}
         };    

     //二.用户参数覆盖默认参数    
     for(var key in opts){
         defaults[key] = opts[key];
     }

     //三.对数据进行处理
     if(typeof defaults.data === 'object'){    //处理 data
         var str = '';
         for(var key in defaults.data){
             str += key + '=' + encodeURI(defaults.data[key]) + '&';
         }
         defaults.data = str.substring(0, str.length - 1);
     }

     defaults.method = defaults.method.toUpperCase();    //处理 method

     defaults.cache = defaults.cache ? '' : '&' + new Date().getTime() ;//处理 cache

     if(defaults.method === 'GET' && (defaults.data || defaults.cache))   {
        defaults.url += '?' + defaults.data + defaults.cache;    //处理 url 
     }    

     //四.开始编写ajax
     //1.创建ajax对象
     var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
     //2.和服务器建立联系,告诉服务器你要取什么文件
     oXhr.open(defaults.method, defaults.url, defaults.async);
     //3.发送请求
     if(defaults.method === 'GET')    
         oXhr.send(null);
     else{
         oXhr.setRequestHeader("Content-type", defaults.contentType);
         oXhr.send(defaults.data);
     }    
     //4.等待服务器回应
     oXhr.onreadystatechange = function (){
         if(oXhr.readyState === 4){
             if(oXhr.status === 200)
                 defaults.success.call(oXhr, oXhr.responseText);
             else{
                 defaults.error();
             }
         }
     };
 }

jQuery封装的ajax——参数

参数 options 类型:Object 可选。AJAX 请求设置。所有选项都是可选的。 async 类型:Boolean 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,...
  • qq_36940798
  • qq_36940798
  • 2016年12月06日 14:06
  • 1057

AJAX的工作原理和封装

理解ajax之前,我们首先要知道什么是ajax(AsynchronousJavaScript and XML),翻译“异步的javascript 和 xml”,是指一种创建交互式网页应用的网页开发技术...
  • DreamChenMing
  • DreamChenMing
  • 2016年08月10日 16:50
  • 550

JQuery Ajax的实现原理以及二次封装通用的Ajax

Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML AJax所涉及到得技术:    1.使用CSS和XHTML来表示。 ...
  • u011659172
  • u011659172
  • 2016年05月04日 11:38
  • 2331

jQuery-jquery封装的ajax使用总结

对于页面一些效果,验证等,我们都是通过JavaScript语言进行完成的,但是它也就像我们的Java代码一样,是最前台语言最基础的,而jQuery则是对js代码进行封装方便我们前台代码的编写,而且它还...
  • qq_36859415
  • qq_36859415
  • 2016年12月20日 18:38
  • 3454

jquery Ajax 全局调用封装

有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....})写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端...
  • xllily_11
  • xllily_11
  • 2016年06月02日 15:03
  • 17255

ajax 异步封装-函数 javascript原生

以下为简单的案列代码: 无标题文档 * { margin: 0px; padding: 0px; } #box { float: left; width: 500px; } #left...
  • yy374864125
  • yy374864125
  • 2014年04月22日 17:02
  • 2551

简单封装$.ajax() 方法

我是新手最近一直再用 AJAX 这个方法简单的写成函数的方式不知道会不会方便,主要是ajax 传输成功之后 把后台的data 返回到自己的函数上 ,这样对数据就可以随意操作了。...
  • qq_33285292
  • qq_33285292
  • 2017年07月26日 15:17
  • 1641

自己封装ajax

/** 全局ajax对象 */ var ajax = new Object(); var ajaxCore = null;/** * @see 创建ajax核心对象,兼容浏览器有:IE6,7,8,9...
  • birdflyto206
  • birdflyto206
  • 2016年06月07日 20:48
  • 1253

原生js封装ajax

前两天闲着没事爬了下校园网的信息,实现了模拟登陆然后获取课表,考勤表,空教室的信息等,想着顺便结合前端也都实现一下。以前在请求接口数据时基本都利用了jquery ajax,方便嘛,这次我将原生拿出来溜...
  • shenmill
  • shenmill
  • 2017年06月08日 12:29
  • 922

基于jquery的ajax方法的二次封装

我并不是专业的前端开发攻城狮,所以,这篇文章的水平,可能是比较低的,里面一些观点,可能都比较可笑。如果有疏漏或错误的地方,希望大家能指出来。如果文章的价值不大,也希望大牛能指点一二,在此先谢谢了。  ...
  • u012491617
  • u012491617
  • 2017年01月02日 13:09
  • 1690
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax基础(2)封装
举报原因:
原因补充:

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