AJAX封装与调用

AJAX封装

function ajax(obj){
                //1.创建ajax对象
                var xhr
                if(window.XMLHttpRequest){           支持此对象
                    xhr=new XMLHttpRequest()                    //IE7以上浏览器
                }else{
                    xhr=new ActiveXObject("Microsoft.XMLHTTP")  //只有IE6支持此对象
                }
                //2.打开请求
                //第一个参数表示请求方式,值为get/post,是字符串
                //第二个参数表示请求的地址
                //第三个参数是布尔值,默认是true表示异步,false表示同步
                xhr.open(obj.type,obj.url,obj.async)
                //3.判断请求方式get/post,发送数据(post方式必须发送请求头)
                if(obj.type.toLowerCase()=="get"){
                    xhr.send()
                }else if(obj.type.toLowerCase()=="post"){
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")      //设置请求头
                    xhr.send(toUrl(obj.data))//name=1&name2=2
                }
                
                //4.操作返回的数据
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        //1.readyState属性:ajax工作状态
                        //2.每当readyState的值发生改变时,就会触发         onreadystatechange事件
                        //存有XMLHttpRequest的状态.从0-4发生变化
                        //0:请求未初始化
                        //1:服务器连接已建立
                        //2:请求已接收
                        //3:请求处理中
                        //4:请求已完成,且响应已就绪

                        //http状态码
                        //200代表请求成功
                        //403禁止访问
                        //404文件未找到
                        //500服务器错误
                        //对responseText进行json转化
                        var data=JSON.parse(xhr.responseText)
                        //把转化好的数据当做参数返回给obj.success函数
                        obj.success(data)
                    }
                }
                
                //对obj.data进行转化,把对象转化成url形式
                function toUrl(obj){
                    var arr=[]
                    for(var i in obj){
                        arr.push(i+"="+obj[i])
                    }
                    return arr.join("&")
                }
            }

ajax调用

ajax({
                type:"post或者get",
                url:"地址",
                //加post的话用到data
                //get的话直接用&拼接  
                data:{
                        key:"c0bf48603646fc9a7c831342cb34a9b,
                    },
                async:true,
                success:function(res){      
                    console.log(res);
                }
            })

//直接返回调用的对象
//请求方式type用get/post
//get方式直接拼接key必选项
//post方式直接传入data对象再设置key必选项

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

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,741评论 1 45
  • 在火车上吃方便面已经变成了一种神圣的仪式,搭乘任何一列内地火车,你都能看到一车厢的人都在埋头吃方便面的壮观场景。 ...
    于加泽阅读 441评论 0 3
  • 有时候不是老板给你多少工资,而是自身的价值决定了你拿多少工资。能力到位了,收入自然会到位。所以不断地学习技术和本领...
    顷禾随笔阅读 279评论 0 0
  • 洛言没有想过多年后再见路亦燃会是在她的婚礼上,一场她没有邀请任何人的婚礼,更没有想到他们再次见面会是以那样特别的方...
    风在奔驰阅读 630评论 0 3
  • 抱歉!其实本文其实与经济学并未半毛钱关系。 最近,娱乐圈炮轰小鲜肉的越来越多了,看到这类的新闻,总是会特别留意、仔...
    造梦弄人阅读 337评论 0 0