jquery以及bootstrap合并使用ajax有什么兼容性问题

框架里使用了jquery\bootstrap\baidutemplate，使用ajax的时候发现很多问题，好像IE8以下的都无法发送ajax请求

页面代码如下，为啥IE8以下ajax发送都发不出去，求大神指教，用了smarty框架，变量没有修改

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- Bootstrap -->
<link href="/static/css/bootstrap.min.css"  rel="stylesheet">
<link href="/static/css/lib.css" rel="stylesheet">
<link href="/static/css/main.css?20150208" rel="stylesheet">

<!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/static/js/jquery-1.11.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/baiduTemplate.js"></script>
</head>

<script>
$(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"{!$api_url!}"+"/areas",
        dataType:"json",
        data:{},
        success:function(data){
            if(data.result ==0){
                var i;
                var html = "" ;
                for(i=0;i<data.data.length;i++){
                    html +="<span class='area' id='"+data.data[i].id+"'>"+data.data[i].area+"</span>";
                }
                $('#area-list').html(html);
                bind_area_click();
            }else{
                setTimeout(init_area,300);
            }
        },
        error:function(data){
            setTimeout(init_area,300);
        },
    });
});
</script>
<body>
    {!block name=base!} {!/block!}
</body>
</html>