简单ajax与jsonp封装方法

ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本

ajax函数封装

function ajax(obj){
    var defaults={
        type:"get",
        url:"#",
        data:{},
        dataType:"json",
        success:function(data){
            callback(data);
        },
        error:function(){
            callback();
        },
        async:true
    }
    // 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数
    for(var key in obj){
        defaults[key]=obj[key];
    }
    // 1、创建XMLHttpRequest对象
    var xhr=null;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 把对象形式的参数转化为字符串形式的参数
    for(var key in obj.data){
        var param=key+"="+defaults.data[key]+"&"
    }
    if(param){
        param=param.substring(0,param.length-1);
    }
    // 处理get请求参数并且处理中文乱码问题
    if(defaults.type=="get"){
        defaults.url+="?"+encodeURI(param);
    }
    //准备发送请求
    xhr.open(defaults.type,defaults.url,defaults.async);
    // 处理post请求参数并且加上头部
    var data=null;
    if(defaults.type=="post"){
        data=param;
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    //执行发送请求
    xhr.send(data);
    //同步请求
    if(!defaults.async){
        if(defaults.dataType=="json"){
            return JSON.parse(xhr.responseText);
        }
        return xhr.responseText;
    }
    // 回调函数,监听事件
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            var data=xhr.responseText;
            if(defaults.dataType=="json"){
                data=JSON.parse(data);
            }
            defaults.success(data);
        }
    }
}

ajax和jsonp综合封装

function ajax(obj){
    var defaults={
        type:"get",
        url:"#",
        data:{},
        dataType:"text",
        jsonp:"callback",
        async:true,
        success:function(data){
            console.log(data);
        }
    };
    for(var key in obj){
        defaults[key]=obj[key];
    }
    if(defaults.dataType=="jsonp"){
        jsonp(defaults);
    }else{
        json(defaults);
    }
}
function json(defaults){
    var xhr=null;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    for(var key in defaults.data){
        var param=key+"="+defaults.data[key]+"&";
    }
    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);
    if(!defaults.async){
        if(defaults.dataType=="json"){
            return JSON.parse(xhr.responseText);
        }
        return xhr.responseText;
    }
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            var data=xhr.responseText;
            if(defaults.dataType=="json"){
                data=JSON.parse(data);
            }
            defaults.success(data);
        }
    }
}
function jsonp(defaults){
    var cbName = 'jQuery' + ('1.11.1' + Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());
    if(defaults.jsonpCallback){
        cbName=defaults.jsonpCallback;
    }
    //回调函数，服务器响应内容 来 调用该回调函数
    //向window对象中添加一个方法，cbName的值为该方法的名称
    window[cbName]=function(data){
        defaults.success(data);
    }
    var param="";
    for(var key in defaults.data){
        param=key+"="+defaults.data[key]+"&";
    }
    if(param){
        param=param.substring(0,param.length-1);
        param="&"+param;
    }
    var script=document.createElement("script");
    script.src=defaults.url+"?"+defaults.jsonp+"="+cbName+param;
    var head=document.querySelector("head");
    head.appendChild(script);
}

什么是ajax

在不刷新页面的情况下，浏览器悄悄地、异步地向服务器发出HTTP请求。
服务器收到请求后，传回新的格式化数据回来（通常是JSON）。
浏览器解析JSON，通过DOM将新数据呈递显示，页面仅局部刷新

请求的状态码

xhr.readyState属性的值

• 0 表示 xhr对象创建成果
• 1 表示 已经发送了请求
• 2 表示 浏览器已经收到了服务器响应的数据 (还没解析)
• 3 表示 浏览器正在解析数据
• 4 表示 数据已经解释完成

HTTP 创建状态码

xhr.status

• 200 表示成功
• 404 表示没有找到
• 500 服务器错误

jsonp原理

  jsonp的本质：动态创建script标签，然后通过它src属性发送跨域请求，然后服务器响应的数据格式为【函数调用（foo实参）】
  所以在发送请求之前必须显示先声明一个函数，并且函数的名字与参数中传递的名字要一致，这里声明的函数是由服务器响应的内容
  （实际就是一段js代码-函数调用）来调用

ajax和jsonp其实本质上是不同的东西。

ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

我的个人博客,有空来坐坐