使用script标签加载远程数据

script 元素能够动态加载远程 JavaScript 脚本文件。JavaScript 脚本文件不仅仅可以被执行，还可以附加数据。在服务器端使用 JavaScript 文件附加数据之后，当在客户端使用 script 元素加载这些远程脚本时，附加在 JavaScript 文件中的信息也一同被加载到客户端，从而实现数据异步交互的目的。下面示例演示如何动态生成 script 元素，并通过 script 元素实现远程数据加载。

操作步骤

1) 定义一个异步请求的封装函数。

//创建<script>标签，参数url表示要请求的服务器端文件路径
function request (url) {
    if (! document.script) {  //如果在document对象中不存在script属性
        document.script = document.createElement("script");  //创建script元素
        document.script.setAttribute("type", "text/javascript");  //设置脚本类型属性
        document.script.setAttribute("src", url);  //设置JavaScript文件的路径
        document.body.appendChild(document.script);  //把创建的script元素添加到页面中
    } else {  //如果已经存在script元素
        document.script.setAttribute("src", url);  //则直接设置src属性
    }
}

2) 完善客户端提交页面的结构和脚本代码。上面这个请求函数是整个 script 异步交互的核心。下面就可以来设计客户端提交页面。

<script>
    function callback (info) {  //客户端回调函数
        console.log(info);
    }
    function request (url) {  //script异步请求函数
        console.log(url);
    }
    window.onload = function () {  //页面初始化处理函数
        var b = document.getElementsByTagName("input")[0];
        b.onclick = function () {  //为页面按钮绑定异步请求函数
            request ("server.js");
        } 
    }
</script>
<input name="submit" type="button" id="submit" value="向服务器发出请求" />

3) 在服务器端的响应文件（server.js）中输入下面的代码。

callback("这里是服务器端数据信息");

4) 当预览客户端提交页面时，不会立即发生异步交互的动作，而是当单击按钮时才会触发异步请求和响应行为，这正是异步交互所要的设计效果。