前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简单的Ajax封装

简单的Ajax封装

原创
作者头像
似水的流年
发布2018-01-14 14:08:16
8750
发布2018-01-14 14:08:16
举报
文章被收录于专栏:电光石火电光石火
/*
    *参数说明:
    *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){
    //一、设置默认参数
    defaults = {
        url          : '',
        data         : '',
        method       : 'GET',
        aysnc        : 'true',
        cache        : 'true',
        ContentType  : 'application/x-www-form-urlencode',
        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'+'='+defaults.data[key]+'&';
        }
        defaults.data = str.substring(0,str.length-1);
    }
    defaults.method = defaults.data.toupperCase();//处理method
    //处理缓存
    defaults.cache = defaults.cache ? '':'&' + new Date().getTime();
    if(defaults.method === 'GET' && (defaults.data || defaults.cache)){//处理url
        defaults.url +='?' + defaults.data +  defaults.cache;
    }
    //四、开始编写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({
    url: '1.php',
    data: {name: 'ivan', sex: 'male', age: '23'},
    success: function (data){ alert('返回数据是:' + data); }
  });
ajax({
   url: '1.php',
   data: 'name=ivan&sex=male&age=23',
   cache: false,
   success: function (data){ alert('返回数据是:' + data); }
});

关于ajax缓存

只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。

只要是POST请求,浏览器都不会缓存。

不缓存的办法:

1、在服务端加header("Cache-Control: no-cache, must-revalidate");(如php中)

2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");

3、在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache");

4、在 Ajax 的 URL 参数后加上"?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了

5、第五种方法和第四种类似,在 URL 参数后加上"?timestamp=" + new Date().getTime();

跨域问题:https://cloud.tencent.com/developer/article/1023806

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档