ajax的一些实用技巧

1.尽量优先采用ajax获取html文件，然后再操作dom把数据填充到里面

在实际项目中，如果前端开发人员没有把页面给切分开，那么有如下两种办法可供选择：其一是，在各种点击事件中，用js去拼接并在拼接的时候把数据填充到里面。代码如下：

$(‘#myPublishs‘).unbind().bind(‘click‘,function(){ $.ajax({ url : initPublishUrl, dataType: "json", type:‘post‘, xhrFields: { withCredentials: true }, data:JSON.stringify({‘page‘:1,‘pageSize‘:5}), contentType: ‘application/json; charset=utf-8‘, success : function(res) { if(res.code == 200 && res.data){ var htmlStr = ""; var result = res.data.data; if(result && result.length != 0){ htmlStr = "<ul class=‘artile-wap MyCollection-content‘ style=‘min-height:auto‘>" + "<span class=‘rfuse-circular2‘></span>"; for(var i = 0; i < result.length; i++){ var row = result[i]; var time = row.updateTime; time = kk_main.subTime(time); htmlStr += "<li class=‘artile-item clearfix‘ articleid=" + row.id +">" + "<div class=‘margin‘>" + "<span class=‘time-pub‘>" + row.updateTime + "</span>" + "<div class=\"item-border item2 col-sm-12 clearfix\">" ; if(row.cover){ htmlStr +="<div class=\"col-sm-4 col-md-4 item-img myCollectionPic\">" + "<img src=\""+row.cover+"\" class=\"img-responsive\" alt=\"\" />" + "</div>"+ "<div class=\"col-sm-8 col-md-8 item-body\">"; }else{ htmlStr += "<div class=\"col-sm-12 col-md-12 item-body\">" ; }

 htmlStr +=‘<h3><a href="/v/‘+row.id+‘">‘ + row.realTitle + "</a></h3>" + ‘<p><a href="/v/‘+row.id+‘">‘ + row.summary + "</a></p>" + "<ul class=\"list-unstyled list-inline inline-black-span\">" ; if(row.tags){ htmlStr += ‘<li><span class=\"glyphicon glyphicon-tag\" aria-hidden=\"true\"></span>‘; for(var j=0; j< row.tags.length; j++){ if(j < 3){ //最多取3个标签 htmlStr += "<a href=\"/t/"+row.tagIds[j]+"\">" + "<span class=\"\">"+ row.tags[j]+"</span></a>，" ; }else{ break; } } htmlStr = htmlStr.substring(0,htmlStr.length-1); //去掉最后一个‘,‘ } htmlStr += "</li><li class=\"blue\"><span class=\"glyphicon glyphicon-eye-open\" aria-hidden=\"true\"></span><span>"+ row.viewCnt + "</span></li>" + "<li><span class=\"glyphicon glyphicon-comment\" aria-hidden=\"true\" style=\"color:#ddd;\"></span><span>"+ row.commentCnt +"</span></li>" +  "</ul>" + "</div>" + "</div>" + "</div>" + "</li>"; }

 htmlStr += "</ul>" + "<div class=\"text-center col-sm-12 color-f\">" + "<div class=\"load-btn\">" + "<a id=\"morePubs\" href=\"#\" class=\"btn btn-load\">加载更多</a>" + "</div>" + "</div>";

 }else{ htmlStr = emptyHtml(); } $(‘#content‘).append(htmlStr);  //事件绑定 publicBind(); }else if(res.flag && res.flag == 0){ window.location.href = ‘/a/Login.html‘; }

 }, error: function (res) {} });});

这种方法优点是，方便将后台获取的数据填充到html字符串中。缺点也很明显，各种字符串拼接和js代码都混合在一起。

其二代码如下：

$(‘#myPublishs‘).unbind().bind(‘click‘,function(){ $.ajax({ url : initPublishUrl, dataType: "json", type:‘post‘, xhrFields: { withCredentials: true }, data:JSON.stringify({‘page‘:1,‘pageSize‘:5}), contentType: ‘application/json; charset=utf-8‘, success : function(res) { if(res.code == 200 && res.data){ $(‘#myPublishs‘).unbind().bind(‘click‘,function(){ $("#content").load("example.html"); //操作dom进行数据填充 }); } }, error: function (res) {} }); });});

该方法的优点是，不需要繁琐的进行html字符串的拼接，主要关注数据的填充就可以。

2.$.ajaxSetup设置全局 AJAX 默认选项。

把共有的ajax设置抽取出来，这样就不用每次写ajax时都要配置共有的选项了

// 设置AJAX请求时某些参数的的默认值 $.ajaxSetup({ type: "POST", contentType: "application/x-www-form-urlencoded; charset=UTF-8", //设置AJAX请求时，带上cookie xhrFields : { withCredentials : true } });

很方便有木有…

3.$.ajaxSuccess(callback)请求成功时执行函数。

 // 全局定义AJAX完成后需要做的操作，检测是否登录 $("document").ajaxSuccess(function(evt, request, settings){
   $(this).append("<li>请求成功!</li>");
 });

一般常用在校验用户是否登录，给予相应的提示信息。

巧用ajax事件可以避免在每一个ajax请求中书写同样的代码，降低代码的冗余度。

4.ajax跨域请求

说明：没有进行跨域请求时，在进行请求时，浏览器会默认带上cookie数据，而跨域请求时，浏览器不会带上cookie需要手动加上如下代码

// 设置AJAX请求时某些参数的的默认值 $.ajaxSetup({ //设置AJAX跨域请求时，手动带上cookie xhrFields : { withCredentials : true } });