常常在自己写的页面中有类似这样的的需求：可能有一个很大的数据，但是作为开发者来说，并不想主动把这些内容推送给用户，而是需要用户自己获取，而后再从服务器返回给用户，这样可以加快页面的响应速度！
曾经在写一个页面的时候，这个是给新用户注册信息用的，最后一步有一个协议，需要用户同意，才能进行后面的注册操作！在这里，这个协议文字量特别的大，我们本不想主动把这个东西主动给用户看，而且大部分熟悉的用户是不会看这个协议的，因为里面的内容除了大量枯燥、眼花的文字描写之外没有什么令用户耐心去看的冲动。所以你完全可以只放一个描述协议的空链接在这里，因为你知道用户不会看呀！但是，如果这样做的话，毕竟还是有一部分用户会好奇，如果点链接一直没反映，恐怕这样的体验不够令用户欣悦的。那怎么办呢？我到现在用过两种思路来处理这个问题！
1、我把所有的协议文字都放在当前这个html页面里面，伴随着用户打开当前的页面的至始至终，这些内容都是一直存在的，当然了刚开始是把这些内容隐藏的，点击链接的时候。用一个弹窗显示出来。可是我发现本来的页面是一个行数不过几十的页面，因为加了协议之后变成了千行以上的页面。页面看上去很乱，而且加大了本来的页面的大小，这样页面响应也会变慢的，这是没有必要的，毕竟用户注册是可以不必看协议的。还有一个方法，就是，你可以放一个链接在这里，当用户点击它的时候，让页面跳转到另外一个单独有协议的页面。可是这样做，我觉得体验是不够好的，因为用户正在注册，你突然跳到另外一个页面，首先这样会打断用户思路的。而且这样做还是没有打破不主动点击查看不显示的轻便的体验！
2、这种方法的思路就是用ajax。我们可以先定义一个空的div在页面中，里面什么都不放，它的作用就是当用户点击按钮查看协议的时候从服务器那里获取到协议内容，然后用这个div来装！当然了至于页面的显示css部分、到时协议是怎么呈现给用户等，我在这里省略不写了，因为主要是记录下这里这种方法实现的逻辑而已！下面我用简单的代码描述一下这样实现的思路。
首先我们在当前页面定义一个空的div，如下：
<div id="wrap">
//我什么都不做，你可以理解我只占位，将来我被用作装协议内容的容器
</div>
然后我们在另外一个页面agreement.html中单独写这个协议，并把内容放到页面中id为target的div里面。最后当用户点击查看协议按钮的时候，我们从服务器中的agreement.html中去拉取协议内容回来放到先前创建的那个空div中，这里我用到了jquery的load方法。下面是代码：
//首先获取容器,容器开始的时候是隐藏的
var container = document.getElementById("wrap");
//当用户点击btn的时候从服务器获取数据
//并把得到的数据拉回来放到container里面
btn.onclick = function(){
//首先显示container
container.style.display = 'block';
//用到jquery的load方法，从指定页面获取指定内容并放到容器中
//这里是从agreement.html获取id为target元素下面的内容，包括target自身
//然后放到container里面，这里用到了dom对象和jquery对象转换的方法,其实可以不用做
//你可以直接使用$("#wrap")而非$(container)
//函数第二个参数是一个回调函数，用于描述请求完成之后后续动作
//这里我采取的是如果有错，那么给出提示信息和错误码
$(container).load('agreement.html #target',function(res,status,xhr){
if(status == 'error'){
alert("发生错误了，错误码为："+ xhr.status);
};
});
};
当然了这里有个问题，就是如果用户重复点击按钮，那么频繁、重复的去拉取内容，显然是不对的，我们只希望到服务器拉取一次数据而已！我们可以以下面的逻辑实现。代码如下：
//我们把拉取内容的操作放到函数getAgreement里面
function getAgreement(){
$(container).load("agreement.html #target",function(res,status,xhr){
if(status == 'error'){
alert("发生错误了，错误码为："+xhr.status);
};
});
};
//定义一个全局变量来判断是不是第一次点开链接
var isFirstClick = true;
btn.onclick = function(){
//显示container
container.style.display = 'block';
//用一个if语句判断是不是第一次点击，并把isFirstClick 设置为false
if(isFirstClick){
//回调getAgreement函数
getAgreement();
//设置isFirstClick,避免第二次调用getAgreement函数
isFirstClick = false;
};
};
首先第一种方法，页面加载的资源较大，而且不容易管理，因为行数多了，链接到新页面的那种明显会打乱用户的思维。第二种方法的好处关键在于页面资源轻便、用户可以灵活动态加载资源，而且是在不刷新当前页面的情况下！体验较好！