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
 }
 });