ajax&模板引擎

Posted 2020-08-07 程序猿1990

使用命名空间,来避免命名的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);
// 返回值就是填充好的内容