完美封装一个ajax

完美封装一个ajax,第1张

什么是ajax?

大白话:就是可以局部刷新页面的一种技术。

创建ajax的步骤是什么?

 字优点小,放大后看哦~ 封装中要考虑的问题有什么?

over~

源码如下:
 function myAjax(obj){
           
            var defaults={
               type:"get",
               url:"#",
               dataType:"json",
               data:{},//用对象存储参数
               async:true,
               success:function(result){
                   console.log(result)
               }
                   
           }
 
           //让obj中的属性,覆盖到default中的属性
           for(var key in obj){
               defaults[key]=obj[key]
           }

            var  xhr=null
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest()
            }
            else{
                xhr=new ActiveXObject("Microsoft.XMLHTTP")
            }

            //得到params
            var params=""
            for(var  attr in defaults.data){
                params+=attr+"="+defaults.data[attr]+"&"
            }
            if(params){
                params=params.substring(0,params.length-1)
            }
            //判断类型
            if(defaults.type=="get"){
                defaults.url+="?"+params
            }
            xhr.open(defaults.type,defaults.url,defaults.async)
            
            if(defaults.type=="get"){
                xhr.send(null)
            }
            else if(defaults.type=="post"){
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
                xhr.send(params)
            }


            if(defaults.async){
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200){
                            var result=null
                            if(defaults.dataType=="json"){
                                result=xhr.responseText
                                result=JSON.parse(result)
                            }else if(defaults.dataType=="xml"){
                                result=xhr.responseXML
                            }else{
                                result=xhr.responseText
                            }
                           
                            defaults.success(result)
        
                        }
                    }
                }
            }
           else {
            if(xhr.status==200){
                            var result=null()
                            if(defaults.dataType=="json"){
                                result=xhr.responseText
                                result=JSON.parse(result)
                            }else if(defaults.dataType=="xml"){
                                result=xhr.responseXML
                            }else{
                                result=xhr.responseText
                            }
                            defaults.success(result)
        
                        }
           }

        }



       
       

可以直接测试使用袄~,经验不足,请多多指教。

如果有用的话,那就。。。留个

吧 

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/925647.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-16
下一篇 2022-05-16

发表评论

登录后才能评论

评论列表(0条)

保存