首页 > 编程笔记 > JavaScript笔记 > JS DOM
阅读:27
使用script标签加载远程数据
script 元素能够动态加载远程 JavaScript 脚本文件。JavaScript 脚本文件不仅仅可以被执行,还可以附加数据。在服务器端使用 JavaScript 文件附加数据之后,当在客户端使用 script 元素加载这些远程脚本时,附加在 JavaScript 文件中的信息也一同被加载到客户端,从而实现数据异步交互的目的。下面示例演示如何动态生成 script 元素,并通过 script 元素实现远程数据加载。
2) 完善客户端提交页面的结构和脚本代码。上面这个请求函数是整个 script 异步交互的核心。下面就可以来设计客户端提交页面。
3) 在服务器端的响应文件(server.js)中输入下面的代码。
4) 当预览客户端提交页面时,不会立即发生异步交互的动作,而是当单击按钮时才会触发异步请求和响应行为,这正是异步交互所要的设计效果。
操作步骤
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) 当预览客户端提交页面时,不会立即发生异步交互的动作,而是当单击按钮时才会触发异步请求和响应行为,这正是异步交互所要的设计效果。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频