首页 > 代码库 > 自己封装的ajax

自己封装的ajax

/** * ITCAST WEB * Created by lsy on 2016/5/24. *//* * 1. 请求的类型                type    get post * 2. 请求地址                  url * 3. 是异步的还是同步的         async   false true * 4. 请求内容的格式            contentType * 5. 传输的数据                data    json对象 * * 6.响应成功处理函数           success   function * 7.响应失败的处理函数         error     function * * 这些都是动态参数  参数对象  options * *//*封装一个函数*/window.$ = {};/*申明一个ajax的方法*/$.ajax = function(options){    if(!options || typeof options != ‘object‘){        return false;    }    /*请求的类型*/    var type = options.type || ‘get‘;/*默认get*/    /*请求地址 */    var url = options.url || location.pathname;/*当前的地址*/    /*是异步的还是同步的 */    var async = (options.async === false)?false:true;/*默认异步*/    /*请求内容的格式 */    var contentType = options.contentType || "text/html";    /*传输的数据 */    var data = http://www.mamicode.com/options.data || {};/*{name:‘‘,age:‘‘}*/    /*在提交的时候需要转成 name=xjj 这种格式*/    var dataStr = ‘‘/*数据字符串*/    for(var key in data){        dataStr += key+‘=‘+data[key]+‘&‘;    }    dataStr = dataStr && dataStr.slice(0,-1);    /*ajax 编程*/    var xhr = new XMLHttpRequest();    /*请求行*/    /*(type==‘get‘?url+‘?‘+dataStr:url)判断当前的请求类型*/    xhr.open(type,(type==‘get‘?url+‘?‘+dataStr:url),async);    /*请求头*/    if(type == ‘post‘){        xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);    }    /*请求主体*/    /*需要判断请求类型*/    xhr.send(type==‘get‘?null:dataStr);    /*监听响应状态的改变  响应状态*/    xhr.onreadystatechange = function(){        /*请求响应完成并且成功*/        if(xhr.readyState == 4 && xhr.status == 200){            /*success*/            var data = http://www.mamicode.com/‘‘;            var contentType = xhr.getResponseHeader(‘Content-Type‘);            /*如果我们服务器返回的是xml*/            if(contentType.indexOf(‘xml‘) > -1){                data = xhr.responseXML;            }            /*如果我们的服务器返回的是json字符串*/            else if(contentType.indexOf(‘json‘) > -1){                /*转化json对象*/                data = JSON.parse(xhr.responseText);            }            /*否则的话他就是字符串*/            else{                data = xhr.responseText;            }            /*回调 成功处理函数*/            options.success && options.success(data);        }        /*计时请求xhr.status不成功  他也需要的响应完成才认作是一个错误的请求*/        else if(xhr.readyState == 4){            /*error*/            options.error && options.error(‘you request fail !‘);        }    }}$.post = function(options){    options.type = ‘post‘;    $.ajax(options);}$.get = function(options){    options.type = ‘get‘;    $.ajax(options);}

 

自己封装的ajax