ajax&模板引擎

使用命名空間,來避免命名的ajax函數被重名的覆蓋
var $_fox_tool = {
// 將 咱們封裝的 函數 保存在 一個 全局 對象的 屬性中
ajax_tool_pro: function(object) {
var ajaxObj = new XMLHttpRequest();
if (object.method == 'post') {
ajaxObj.open(object.method, object.url);
ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxObj.send(object.data);
} else {
ajaxObj.open(object.method, object.url + '?' + object.data);
ajaxObj.send();
}

ajaxObj.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if (this.responseXML == null) {
object.callBack(this.responseText);
} else {
object.callBack(this.responseXML);
}

}
}
}
};

使用時如今頁面引入JS文件,而後
function ajax() {
// 封裝到了 一個對象中使用的時候要經過對象 .語法進行使用
$_fox_tool.ajax_tool_pro(
{
url:'03.getJson.php',
method:'get',
data:'', 能夠省略
callBack:function (data) {
console.log(data);
}
}
);
}

也可使用jquery發送ajax
直接發送get請求;url:必須;data:可選,參數支持對象,字符串;success:回調函數(注意,不是callback);dataType:'json'(不是json對象的時候能夠省略)dataType可選,可能的類型："xml""html""text""script""json""jsonp"
$.get({
url:'01.jq_get.php',
data:{name:"jack",skill:"painting",wife:"rose"},
dataType:'json',
success:function (data) {
console.log(data);
}
})

post和get方法同樣
getJSON方法中,若是是json格式,會自動轉換爲js對象,內部執行了JSON.parse()
getJSON('url',function(data){console.log(data);})

$.ajax是使用jquery的ajax方法發送請求,默認是get方法
$.ajax()方法相比於前面的方法,擁有更爲自由的定製性,能夠替換$.get(),$.post()方法
settings 可選。用於配置 Ajax 請求的鍵值對集合。能夠經過 $.ajaxSetup() 設置任何選項的默認值。
$.ajax({
url:'04.jq_ajax.php',
type:"post",
success:function (data) {
console.log(data);
},
beforeSend:function () {
// 發送ajax請求以前 能夠在這裏 驗證數據是否爲空
console.log('beforeSend');
// return false;
},
error:function () { //當頁面沒有加載出來時會輸出
console.log('請求失敗,請檢查');
},
dataType:'json'
})

val();是jq的寫法,jq裏沒有value()這種寫法

封裝模板引擎
var $_medo_tool = {
參數1:模板字符串
參數2:想要替換的對象
medo_template: function(templateStr, obj) {
var reg = /<%=\s*([^%>]+\S)\s*%>/;
// 使用while循環
var result;
// 每次 循環 都查找 模板中 知足條件的 文本 進行替換 直到 查找不到爲止
while (result = reg.exec(templateStr)) { //正則表達式在模板字符串中找到匹配的字符...exec檢索字符串中指定的值。返回找到的值，並肯定其位置。
var replaceStr = result[0]; //獲得一個帶<>的屬性,好比<name>
var key = result[1]; //獲得一個屬性,沒有尖括號
templateStr = templateStr.replace(replaceStr, obj[key]);
}
return templateStr; //返回一個替換過的模板字符串
}
}

模板引擎的使用可分爲三大步
1.導入模板引擎,直接導入便可,不依賴於JQ
<script type="text/javascript" src='js/fox_template.js'></script>
2.定義模板
<script type="text/itcast" id='template01'>我叫<name>,個人愛好是<habbit></script>
type不設置javascript那麼就不會按照js去解析,爲何要有script標籤呢,由於若是用別的標籤會把它解析出來,影響頁面,script標籤也跟普通標籤同樣使用,也能夠設置id等等
<script type="text/itcast" id='template02'>
<tr>
<td><%=name%></td>
<td><%=habbit%></td>
</tr>
</script>
3.寫JS,定義對象,讀取模板,傳入對象便可,傳數組會報錯
var str = document.querySelector('#template02').innerHTML;
var obj = {
name:"老王",
habbit:"撩漢子_嘿嘿嘿"
};
var result = $_fox_tool.fox_template(str,obj);
console.log(result);

常見的模板插件
百度開發http://tangram.baidu.com/BaiduTemplate/
騰訊開發https://github.com/aui/artTemplate
淘寶開發https://github.com/shepherdwind/velocity.js/
http://handlebarsjs.com/

模板引擎的用法大同小異,騰訊開發的ArtTemplate因爲性能優秀,這裏咱們演示ArtTemplate的用法

導入模板引擎: 將下載好的ArtTemplate導入到頁面中

<script type="text/javascript" src = "./files/template-native.js"></script>
定義模板:

<% %>這樣的語法是定義邏輯表達式

<%=內容 %>這樣的語法爲輸出表達式

注意:這路的模板type='text'若是寫成javascript會執行

<script type="text" id = "templ01"> <ul> <li><%=name %></li> <li><%=age %></li> <li><%=skill %></li> <li><ul>favouriteFood <% for(var i = 0 ;i < favouriteFood.length;i++) {%> <li><%=favouriteFood[i] %></li> <% } %> </ul> </li> </ul> </script>讀取模板,傳入數據: 導入了模板引擎之後,咱們可使用template(模板id,數據); // 調用模板引擎的方法 var backHtml = template("templ01",data); // 返回值就是填充好的內容