小结--ajax的封装

在前后端的交互过程中,ajax是一个常用的手段,但是其使用方法比较繁琐,所以封装一个惯用的方法。通常前后端交互的方法有get和post方式,今天就ajax在两种方式交互数据的情况下,总结两种封装方法:

1.ajax的get封装

function ajaxGet(url,cb,data){
    data = data || {};
    var str = "";
    for(var i in data){
        str += i + "=" + data[i] + "&";
    }
    url = url + "?" + str + "__js=" + (new Date()).getTime();
    var ajax = new XMLHttpRequest();
    ajax.open("get",url,true);
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4 && ajax.status == 200){
            cb(ajax.responseText);
        }
    }
    ajax.send();
}

2.ajax的post封装

function ajaxPost(url,cb,data){
    data = data || {};
    var str = "";
    for(var i in data){
        str += `${i}=${data[i]}&`;
    }
    str = str.slice(0,str.length-1);
    var ajax = new XMLHttpRequest();
    ajax.open("post",url,true);
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4 && ajax.status == 200){
            cb(ajax.responseText);
        }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send(str);
}

以上封装方法仅是个人的平时总结,若有不足或者错误之处,欢迎大家指出......

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,378评论 0 7
  • $.ajax({type:"POST",url:"xxx",data:"aaa",async:ture, //...
    天字一等阅读 432评论 0 9
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,174评论 1 32
  • Ajax在前端开发中有着举足轻重的地位,关于Ajax的使用和注意事项一直是一个重要的话题,借此机会,本文希望对Aj...
    grain先森阅读 1,535评论 4 55
  • ajax是什么?ajax简单的说就是做数据交互使用的。Ajax的原理简单来说通过XmlHttpRequest对象来...
    吖蛋黄阅读 444评论 0 1