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