利用AJAX的跨域原理重构页面 实现页面的模块化

jq的AJAX不光能请求网络数据，还能跨域访问html、js文件，举例说，当其跨域访问js文件时，其实是干了两件事情：1，创建<script>标签，src指向要访问的url，appendChild()去head标签中；2，声明函数fn，fn必须与请求目标js文件中调用的方法同名。

需要注意的点有： 1，html和js文件同时创建

有了这个基础，我们就可以利用ajax来实现模块化地构建页面，类似于mvc各种框架的思想。

1，在全局脚本app.js中定义两个函数

获取路径参数函数：

function getUrlParms(){
    
    var params={};
    
    var url=window.location.href;
    
    var arr=url.split("?");

    if(arr.length==2){
        var p=arr[1];     
    }else{
       console.log(params)
       return params;    
    }
    
    // p="a=1&b=2&c=3"
    var parr=p.split("&"); // ["a=1","b=2","c=3"]
    
    for(var i=0;i<parr.length;i++){

        var kv=parr[i].split("=");
              
        params[kv[0]]=kv[1];

    }   
    console.log(params)

    // {a:1,b:2,c:3}    
}

加载模块函数：

function router(m,container){
	
	container=container||$("#share");
	
	// 请求模块结构
	$.ajax({
	    url:"views/"+m+".html",
		success: function(data){
			container.html(data);
		}
	})
	
	// 请求js文件
	loadJs(m);
	
}
function loadJs(m){
   $.ajax({
	   url:"js/"+m+".js",
   })	
}

2，设置首次打开文件所呈现的页面，如果有欢迎页，要用到localStorage的知识：

$(function(){
  
  // 首次加载 -- 打开欢迎页, 2次以上打开的是tab模块
   
    if(!localStorage.count){
    	localStorage.count=0;
    }
    
    localStorage.count++;

    console.log(localStorage.count);

    if(localStorage.count==1){
    	router("hello")
    }else{
    	router("tab")   //选项卡是本项目在欢迎页消失后首先呈现的页面
    }	
})

3，tab模块，不变的部分，比如header，写在tab.html里，需要动态更改的部分，在tab.js里调用router()方法，当然事先要在tab.html里留出空间，插入之后用ajax请求到的内容：

router("home",$("#tabcontainer"))            //home是home.html文件

差不多原理就是这样了，是不是很类似vue的组件。

4，如果home.html需要写一个需要请求网络数据的列表，具体该怎么操作呢？以下为例：

<img src="image/banner1.jpg" class="auto">
<p class="tj">推荐歌单3</p>

<div class="songlist">

</div>

<div id="templateItem" style="display: none;">        //这就是要动态插入的模板原型，display设置为none
//目的是让其在视图上不显示
	
	<div class="item">
   	   <div>200</div>
   	   <img src="image/18581746511268315.jpg" class="auto">
   	   <p>老板,给我来一打这样的男友</p>
    </div>
    
</div>

然后在home.js中，重点是，用回调函数来处理ajax请求回来的数据

var server = "http://musicapi.duapp.com/api.php";            //服务器

//url: server+"?type=topPlayList&cat=%E5%85%A8%E9%83%A8&offset=0&limit="+9,        //URL地址

function getPlayList(limit,callback){
	
	$.ajax({
		type:"get",
		url: server+"?type=topPlayList&cat=%E5%85%A8%E9%83%A8&offset=0&limit="+limit,
		async:true,
		success:function(data){
			//console.log(data);
			callback(data.playlists)
		}
   });
 
}


getPlayList(9,function(data){
	
	  console.log(data)
	  
	  var $songlist=$(".songlist");
	  
	  var template=$("#templateItem").html();        //不能在函数里面创建template，不然只能插入一个
	  
	  for(var i=0;i<data.length;i++){
	   	 
	   	 var $template=$(template);
	  	 $template.find("div").html(data[i].playCount);
	  	 $template.find("img").attr("src",data[i].coverImgUrl);
	  	 $template.find("p").html(data[i].name);
	  	 $template.appendTo($songlist);
	  	 
	  }
	
});

用jq获取模板的html，注意用html()获取到的对象是js对象，如果要使用接下来的find()方法，要用$()对其进行包裹，转换成jq对象。

这里也可以使用字符串拼接的方法。

转载于:https://my.oschina.net/u/3499937/blog/1036949