2016-07-19 Update：

我去！一句$(dom).load(url)搞定了！

2016-05-14 Create：

在WEB开发中，为了加快页面加载的速度，我们经常虽然实现异步加载页面中某些部分的模块。最常用的解决方式是通过编写js代码用AJAX实现，但这种方式无疑是复杂的，因为针对每个页面的每个需要异步加载的模块，都要用一段代码单独实现。

今天讲解通过script标签和async属性来实现异步加载页面内容。

    <div id="data_wrap" class="loading">
    </div>
    <script type="text/javascript" src="load_data.php" async="async"></script>
    <div>
        <p>Other data...</p>
        <p>Other data...</p>
        <p>Other data...</p>
        <p>Other data...</p>
    </div>

#data_wrap用于显示异步加载的数据区域，通过<script type="text/javascript" src="load_data.php" async="async"></script>异步加载数据，因为script标签增加了async="async"属性，所以不会阻塞页面继续往下面渲染。当然需要注意的是async="async"是HTML5的新特性。

load_data.php的代码实现的功能是输出一段js代码。该段js代码负责把数据区域的HTML代码加到#data_wrap元素当中

    $html = ''; // 需要显示在页面上面的HTML模块代码
    for ($i= 0; $i< 4; $i++) {
        $html .= '<p>some data...</p>';
    }
    
    $js = '
    $(function() { // 基于jQuery，需要在该scipt之前引入jQuery库
        var dataWrap = document.getElementById("data_wrap");
        dataWrap.className = dataWrap.className.replace("loading", "");
        dataWrap.innerHTML = "'.$html.'";
    })
    ';
    echo $js;