首页 > 编程笔记 > JavaScript笔记 > JS DOM
使用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) 当预览客户端提交页面时,不会立即发生异步交互的动作,而是当单击按钮时才会触发异步请求和响应行为,这正是异步交互所要的设计效果。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算