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); // 返回值就是填充好的内容