基于jquery的ajax封装

jquery给我们的开发带来了很多的便利，对其熟练的运用是现在前端开发人员的必要技能之一。其封装的很多方法都做了兼容的处理，就少去了部分开发人员做兼容处理的问题，从而提高工作效率，有更多时间来学习其它技能…
今天来聊聊其的ajax()方法，ajax() 方法通过 HTTP 请求加载远程数据。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
一般的ajax请求实例：

$.ajax({
type:"get/post", 
        url:"", 
        data:data,
        async:true, 
        datatype:"json",
        success:function(res){
            console.log(res);
        },
error:function(err){
            console.log(err);
        }
    });

参数说明：

async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)
类型：Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
data
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
•”xml”: 返回 XML 文档，可用 jQuery 处理。
•”html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
•”script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
•”json”: 返回 JSON 数据。
•”jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
•”text”: 返回纯文本字符串
error
类型：Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。
这是一个 Ajax 事件。
success
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。
type
类型：String
默认值: “GET”)。请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url
类型：String
默认值: 当前页地址。发送请求的地址。
complete
当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
timeout
类型：Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
jsonp
类型：String
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分，比如 {jsonp:’onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。
jsonpCallback
类型：String
为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

问题初见：今天工作时一个页面需要调用到5个接口，写之前用到上面的实例，啪啪啪~一谷脑写出来请求的参数ctrl+c，ctrl+v，后来写完发现毕乐苟好多重复的参数，看着好不爽=。=，没办法简化呗，怎么优化呢？写方法调用？jQuery的ajax方法封装了还要写方法？用原生封装？太麻烦！不考虑。
问题解决：

// 基于jquery的Ajax封装
function ReadAjax(url, data, async, type, dataType, successfn, errorfn){
        async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;
type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;
        dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;
        var srt = JSON.stringify(data);
        var dataPara = {
            userId:userId,
            timestamp:time,     
            sign:sign,
            para:srt,
            pim:pim,
            version:"1.0.0",
            terminal:terminal,   
            h5:0,
        }
        $.ajax({
type: type,
            async: async,
            data: dataPara,
            url: url,
            dataType: dataType,
            success: function(d){
                successfn(d);
            },
            error: function(e){
                errorfn(e);
            }
        });     
    }

调用：

var data = {
            groupId:promotionData.groupId,
            userId:userId,          
            adId:promotionId,
            webUrl:promotionData.entWebsite,
            adName:promotionData.title
        };  //接口需要的请求参数object
ReadAjax(url,data,null,null,null,function(data){
    ... 
//成功code
},function(
//错误 
){
});

这个封装可能还不够完善，需要更多的参数时需要增减。

高级选项(ps:从未使用)
Ajax 的第一个字母是 asynchronous 的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。 .ajax()的async参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。 .ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象，但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的 .abort() 可以在请求完成前挂起请求。

活到老学到老，学到老活到老。一直致力于前端的学习，完成页面仔的逆袭，这就是我！

秒客网

基于jquery的ajax封装

基于jquery的ajax封装

相关文章