ajax的原生和jquery封装

1，什么是ajax

Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术，它可以在不重新刷新页面的情况下，通过异步请求加载后台数据，并在网页上呈现出来。

2，ajax的原理

3，封装ajax涉及的知识点

3.1 ajax创建的对象的方法：xhr=new XMLHttpRequest();
3.2 ajax准备发送：xhr.open(type,url,true);
3.3 ajax的发送请求：xhr.send(null);
3.4 ajax的加载函数：xhr.onreadystatechange=function(){}
3.5：get和post的区别：get的请求数据需要拼接在url后面，post的请求数据需要作为参数用send()方法传递；post请求需要加请求头。

4，原生js实现ajax请求

function ajax(url,type,param,dataType,callback)
{    // console.log(id)    var xhr=null;   
 if(window.XMLHttpRequest){       
     xhr=new XMLHttpRequest();    
  }else{        
        xhr=new ActiveXObject("Microsoft.XMLHTTP");   
         }    
         if(type=='get'){       
          url+='?'+param;    
          }    
          xhr.open(type,url,true);   
           var data=null;   
            if(type=='post'){        
            data=param;        
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');    
            }   
             xhr.send(data);    
             xhr.onreadystatechange=function(){if(xhr.readyState==4)
             {            
             if(xhr.status==200)
             {  //响应成功时的状态码                
             var data=xhr.responseText;               
                 if(dataType=='json'){                    
                 data=JSON.parse(data);               
                  }                
                  callback(data);            
              }       
          }   
      }}

5，jquery实现ajax请求

function ajax(obj) { 
   // 默认的参数    
   var defaults = {            
                            type: 'get',           
                             data: {},           
                              url: '#',            
                              dataType: 'text',            
                              async: true,            
                              success: function(data){               
                               console.log(data);            
                               }       
                    }      
//  处理形参,传递参数的时候 就要覆盖默认的参数, 不传递 则就使用 默认的参数    
           for (var key in obj) {
              defaults[key] = obj[key];   
         }    
           var xhr = null;  
             if (window.XMLHttpRequest) {       
              xhr = new XMLHttpRequest();   
               } else {        
               xhr = new ActiveXObject("Microsoft.XMLHTTP");   
                }    
                var param = '';    
                // 拼接 需要传输的数据    
                for (var attr in obj.data) {

                       param += attr + '=' + obj.data[attr] + '&';            }   
                        if (param) {       
                         // 截取 字符串        
    param = param.substring(0, param.length - 1);        
                          }   
    if (defaults.type == 'get') {
        defaults.url += '?' +    encodeURI(param);    
       }    
         //准备发送 
       xhr.open(defaults.type, defaults.url, defaults.async);
     var data = null;    
     if (defaults.type == 'post') { 
            data = param;        
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   
             }    
   // 执行发送    xhr.send(data);
    xhr.onreadystatechange = function() {        
    if (xhr.readyState == 4) { 
               if (xhr.status == 200) { 
                 var data = xhr.responseText;                
                 if (defaults.dataType == 'json') {
                                     data = JSON.parse(data);
                                                    
                    }                     
    // 回调函数 
defaults.success(data);           
         }        
     }   
}}