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();
             }
         }
     };
 }
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Ajax基础教程2

  • 2014-12-22 20:32
  • 542KB
  • 下载

Ajax基础教程(part 2)

  • 2011-05-06 16:15
  • 14.31MB
  • 下载

struts2 - ajax -基础

开发环境JDK1.8 eclipse struts2-2.3.31 jquery-3.1.1.min.js 1.创建web项目 2.导入struts2核心jar包(另外还要导入struts2-js...

ajax基础2

  • 2007-06-27 16:14
  • 143KB
  • 下载

【SSH三大框架】Struts2基础第八篇:Struts2用AJAX实现JSON插件的使用

AJAX的详细描述就不做介绍了,大家基本都懂这个。 下面我们会通过两个具体的案例,来做具体的实现: 案例一: 案例描述:输入用户名,把用户名通过AJAX异步传输的方式发送至后台,判断此用户名是否存在。...

ajax基础教程2

Ajax Zero to Hero (2)入门代码的简单封装

Ajax Zero to Hero (2)入门代码的简单封装

Ajax基础教程(part2)

  • 2008-08-06 18:25
  • 5.72MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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